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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0