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