3d分层悬停效果
3d分层悬停效果
写在前面
经过了2个星期的努力，我回来了！会继续将我学习路上遇到的问题，以及一些笔记，demo分享给大家
实现效果
致我最爱的backpink
实现思路
- 将6张图片，通过定位叠在一起
- 当鼠标移入时，每张图片旋转一定的角度，从而实现
思路很简单，实现也很简单，但是效果很好看
实现过程
HTML
<div class="imgBox">
<div class="innerBox">
<img src="img/1.jpg" style="--ljc:1;" alt="">
<img src="img/1.jpg" style="--ljc:2;" alt="">
<img src="img/1.jpg" style="--ljc:3;" alt="">
<img src="img/1.jpg" style="--ljc:4;" alt="">
<img src="img/1.jpg" style="--ljc:5;" alt="">
<img src="img/1.jpg" style="--ljc:6;" alt="">
</div>
</div>
html结构很简单，用盒子包裹6张图片，
--ljc自定义属性后面会提高
CSS样式
给装图片的盒子添加hover事件，旋转一定的角度，skew属性是扭曲距离，这个实操一下效果很明显，不了解的可以动手试试
.innerBox:hover {
transform: rotateX(35deg) skew(10deg) rotateZ(-35deg);
}
这里利用了css的calc函数以及var变量来实现，简化了代码
在html中我们给每个图片都设置了--ljc属性，并赋予了不一样的数值，这个数值就是用来计算我们偏移距离，例如--ljc:2通过calc函数计算的10px*2也就是20px,其他几个也是一样的，--ljc就相当于一个变量的存在
.innerBox:hover img {
transform: translateX(calc(-10px * var(--ljc))) translateY(calc(10px * var(--ljc))) translateZ(calc(-10px * var(--ljc)));
opacity: calc(0.1 * (10 - var(--ljc)));
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: black;
}
.imgBox {
position: relative;
display: flex;
justify-content: center;
margin-top: 40px;
perspective: 2000px;
}
.innerBox {
position: relative;
width: 250px;
height: 500px;
transition: all 0.5s;
transform-style: preserve-3d;/*3d效果*/
}
.innerBox img {
position: absolute;
width: 100%;
height: 100%;
border: none;
box-shadow: 0 0 8px pink;
transition: all 1.5s;
transform: translateZ(0px);
}
.innerBox:hover {
transform: rotateX(35deg) skew(10deg) rotateZ(-35deg);
}
.innerBox:hover img {
transform: translateX(calc(-10px * var(--ljc))) translateY(calc(10px * var(--ljc))) translateZ(calc(-10px * var(--ljc)));
opacity: calc(0.1 * (10 - var(--ljc)));
}
</style>
</head>
<body>
<div class="imgBox">
<div class="innerBox">
<img src="img/1.jpg" style="--ljc:1;" alt="">
<img src="img/1.jpg" style="--ljc:2;" alt="">
<img src="img/1.jpg" style="--ljc:3;" alt="">
<img src="img/1.jpg" style="--ljc:4;" alt="">
<img src="img/1.jpg" style="--ljc:5;" alt="">
<img src="img/1.jpg" style="--ljc:6;" alt="">
</div>
</div>
</body>
</html>
这个效果实现起来并不难，但是足够炫酷！
更多阅读
充电水波摇晃效果
旋转水滴加载效果
抖音超火的罗盘时钟效果
圆盘时钟效果
文字抖动效果
旋转魔方效果
文字闪烁效果
加载动画效果
炫彩流光按钮
原生js轮播图效果
文字折叠效果
