<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>漂浮的白云</title><style type="text/css">.box {position: relative;height: 300px;width: 500px;}.in1, .in2 {position: absolute;height: 100%;width: 100%;background-size: cover;animation: move 100s infinite linear alternate;}@keyframes move {100% {background-position: 500% 0;}}.in1 {background-image: url('/uploads/rs/26/ddzmgynp/cloud.png');}.in2 {background-image: url('/uploads/rs/26/ddzmgynp/cloud1.png');animation-duration: 10s;}</style></head><body><h1>漂浮的白云</h1><div class="box"><div class="in1"></div><div class="in2"></div></div><strong>【简要介绍】</strong><p>漂浮的白云主要通过远景白云和近景白云来实现立体漂浮效果。远景和近景分别使用两张背景图片，通过改变其背景定位来实现白云移动效果，通过设置不同的动画持续时间来实现交错漂浮的效果</p></body></html>
效果图：
原链接：/xiaohuochai/p/5419236.html
