animation实现立体漂浮效果

时间：6年前阅读：4676

漂浮的白云主要通过远景白云和近景白云来实现立体漂浮效果。远景和近景分别使用两张背景图片，通过改变其背景定位来实现白云移动效果，通过设置不同的动画持续时间来实现交错漂浮的效果

<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,我们将及时处理。

微信扫码关注

更新实时通知

animation实现立体漂浮效果

网友评论