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%}
Комментарии ()