CSS+HTML<简单的景深效果>
2020-02-27 本文已影响0人
誰在花里胡哨
效果图：
move.gif
不太了解 perspective 属性的，可以点击查看此篇文章
景深一般用于3D场景内，会搭配着 transform 3D旋转的使用
transform-style: preserve-3d;
一般这几个transform属性会应用于景深效果中
image.png
面对屏幕，物体由远到近的调整
transform:translateZ()
物体以Z轴旋转(在未定义3D旋转的情况下等同于 transform:rotate())
transform:rotateZ()
物体以X轴旋转
transform:rotateX()
物体以Y轴旋转
transform:rotateY()
简单的就说这么多吧，景深这东西不太好解释，尽量自己动手琢磨，比别人解释给你听更强 👍
image.png
如果下面的代码你能理解的话，那么上面 蓝天白云效果 这种效果，你就大致知道是怎么实现的了 😁
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
}
body {
display: flex;
justify-content: center;
/* background: black; */
perspective: 100px;
overflow: hidden;
}
.box {
width: 100%;
height: 100%;
position: absolute;
background: #5a5a5a;
transform-style: preserve-3d;
transform-origin: 50% 100%;
transform: rotateX(90deg);
}
.cloud {
z-index: 5;
transform-style: preserve-3d;
transform-origin: 50% 100%;
width: 200px;
height: 200px;
position: absolute;
bottom: 0;
opacity: 0;
animation-name: move;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
transform: translateZ(-1000px);
}
.cloud:nth-child(1) {
background: black;
}
.cloud:nth-child(2) {
width: 300px;
left: 0;
background: #adacac;
animation-delay: -2s;
}
@keyframes move {
20%{
opacity: 1;
}
100% {
opacity: 1;
transform: translateZ(200px);
}
}
</style>
</head>
<body>
<div class="cloud"></div>
<div class="cloud"></div>
<div class="box">
</div>
</body>
</html>
