<!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(‘http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/cloud.png‘); ???????} ???????.in2 { ???????????background-image: url(‘http://sandbox.runjs.cn/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>效果图：
原链接：https://www.cnblogs.com/xiaohuochai/p/5419236.html
css3动画（animation）效果1-漂浮的白云
原文地址：https://www.cnblogs.com/huanghuali/p/8489479.html