CSS анимация в стиле рентгена

CSS анимация в стиле рентгена
HTML и CSS 0    121 0
CSS анимация в стиле рентгена

Стильный CSS эффект для фотографии. Если навести мышкой на фото, то оно как бы "просканируется рентгеном".

Скачать архив

Содержание архива:

HTML разметка


CSS оформление

#rentgen .c{position:relative;width:90vmin;height:calc(90vmin * 9 / 16);margin:auto;overflow:hidden;box-shadow:0 1.25em 1em -.5em #0005}
#rentgen .i{width:100%;height:100%;background-color:#000}
#rentgen .img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:0 50%;object-position:0 50%;transition:-webkit-transform 1s;transition:transform 1s;transition:transform 1s,-webkit-transform 1s}
#rentgen .c:hover .img{-webkit-transform:translateX(-3%);transform:translateX(-3%);transition-duration:5s}
:root{--s1-w:40vmin;--s2-w:60vmin;--s3-w:10vmin}
@-webkit-keyframes move-x {
50%{-webkit-transform:translateX(var(--x1));transform:translateX(var(--x1))}
100%{-webkit-transform:translateX(var(--x2));transform:translateX(var(--x2))}
}
@keyframes move-x {
50%{-webkit-transform:translateX(var(--x1));transform:translateX(var(--x1))}
100%{-webkit-transform:translateX(var(--x2));transform:translateX(var(--x2))}
}
#rentgen .s1,#rentgen .s2,#rentgen .s3{position:absolute;top:0;bottom:0;-webkit-animation:gg .5s ease-out forwards;animation:gg .5s ease-out forwards;pointer-events:none}
#rentgen .c:hover .s1,#rentgen .c:hover .s2,#rentgen .c:hover .s3{-webkit-animation-name:move-x;animation-name:move-x}
#rentgen .s1{left:100%;z-index:1;width:var(--s1-w);background-color:#fff;mix-blend-mode:difference;--x1:-110vmin;--x2:-50vmin}
#rentgen .s2{z-index:2;width:calc(var(--s2-w) * 2);left:calc(100% + var(--s1-w));background-color:#000;--x1:-110vmin;--x2:-90vmin}
#rentgen .s3{z-index:2;width:10vmin;right:100%;background-color:#000;-webkit-animation-delay:.1s;animation-delay:.1s;--x1:0;--x2:95%}

Рекомендую отличный хостинг
Просят от 5 рублей в день
  • PHP 4/5/7, Perl 5, Python, Zend, phpMyAdmin;
  • SSH, sFTP/FTP доступ;
  • Возможность заказа дополнительных IP-адресов;
  • POP3, IMAP, SMTP для работы с почтой;
  • Неограниченное количество доменов и поддоменов;
  • Неограниченный трафик;
  • Автоматическая установка CMS;
  • Управление DNS-записями;
  • И еще много разных ништяков 😉
Протестировать (30 дней бесплатно)

Cмотрю на свой контент и думаю: стал бы я сам делиться им с друзьями?


Похожие статьи:

Подборка слайдеров для сайта на чистом CSS
Кнопка для сайта в стиле минимализм
Градиент для кнопок на сайте
3D текст с мультяшным эффектом на CSS
Верстка блоков со стрелочками
Анимированный фон с плавающими облаками
Красивое оформление 404 страницы
Вертикальное hover hide меню для сайта на HTML и CSS
Стилизация Input File
Стилизация checkbox и radio

Комментарии ()

    Вы должны авторизоваться, чтобы оставлять комментарии.

    Вы можете авторизоваться на сайте через:
    YandexVkontakte