animation实现立体漂浮效果
漂浮的白云主要通过远景白云和近景白云来实现立体漂浮效果。远景和近景分别使用两张背景图片，通过改变其背景定位来实现白云移动效果，通过设置不同的动画持续时间来实现交错漂浮的效果
<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/mip/data/img/dmj/201910101570715986294912.png'); } .in2 { background-image: url('https://www.qiquanji.com/mip/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,我们将及时处理。
微信扫码关注
更新实时通知