div+css实现图片悬浮背影分身虚化效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现图片悬浮背影分身虚化效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --blue-rgb: 92 192 249; --green-rgb: 125 161 35; --brown-rgb: 127 46 23; } html, body { background-color: black; } body { min-height: 100vh; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; transition: background-color 1000ms; } body:has(.card[data-color="blue"]:hover) { background-color: rgb(var(--blue-rgb) / 25%); } body:has(.card[data-color="blue"]:hover) { background-color: rgb(var(--blue-rgb) / 25%); } body:has(.card[data-color="green"]:hover) { background-color: rgb(var(--green-rgb) / 25%); } body:has(.card[data-color="brown"]:hover) { background-color: rgb(var(--brown-rgb) / 25%); } #cards { width: 100%; display: flex; justify-content: space-evenly; } .card { background-size: cover; background-position: center; position: relative; cursor: pointer; outline: none; transition: scale 100ms; } .card .card-front-image { position: relative; z-index: 2; } .card .card-image { width: clamp(300px, 20vw, 500px); aspect-ratio: 2 / 3; border-radius: clamp(0.5rem, 0.75vw, 2rem); } .card-faders { height: 100%; width: 100%; position: absolute; left: 0px; top: 0px; z-index: 1; opacity: 0; transition: opacity 1500ms; pointer-events: none; } .card:hover .card-faders { opacity: 1; } .card:active { scale: 0.98; } .card-fader { position: absolute; left: 0px; top: 0px; } .card-fader:nth-child(odd) { animation: fade-left 3s linear infinite; } .card-fader:nth-child(even) { animation: fade-right 3s linear infinite; } .card-fader:is(:nth-child(3), :nth-child(4)) { animation-delay: 750ms; } .card-fader:is(:nth-child(5), :nth-child(6)) { animation-delay: 1500ms; } .card-fader:is(:nth-child(7), :nth-child(8)) { animation-delay: 2250ms; } @media(max-width: 1200px) { body { justify-content.........完整代码请登录后点击上方下载按钮下载查看
网友评论0