漂浮的白云主要通过远景白云和近景白云来实现立体漂浮效果。远景和近景分别使用两张背景图片，通过改变其背景定位来实现白云移动效果，通过设置不同的动画持续时间来实现交错漂浮的效果
<style>
.box {
position: relative;
height: 300px;
width: 500px;
}
.in1,
.in2 {
position: absolute;
height: 100%;
width: 100%;
background-size: cover;
-webkit-animation: move 100s infinite linear alternate;
animation: move 100s infinite linear alternate;
}
@-webkit-keyframes move {
100% {
background-position: 500% 0;
}
}
@keyframes move {
100% {
background-position: 500% 0;
}
}
.in1 {
background-image: url('https://www.qiquanji.com/data/img/dmj/201910101570715986294912.png');
}
.in2 {
background-image: url('https://www.qiquanji.com/data/img/dmj/201910101570715989989003.png');
-webkit-animation-duration: 10s;
animation-duration: 10s;
}
@media (max-width:700px) {
.box{width:100%;box-sizing: border-box;}
}
</style>
</head>
<body>
<div class="box">
<div class="in1"></div>
<div class="in2"></div>
</div>
</body>
</html>
最终效果点（点上面的运行代码来看）
效果静态图：
原文链接：https://www.qiquanji.com/post/8732.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知