前面的话
前面介绍过动画animation的详细用法，本文主要介绍动画animation的三个效果
漂浮的白云
【效果演示】
【简要介绍】
漂浮的白云主要通过远景白云和近景白云来实现立体漂浮效果。远景和近景分别使用两张背景图片，通过改变其背景定位来实现白云移动效果，通过设置不同的动画持续时间来实现交错漂浮的效果
【主要代码】
.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;}
查看更多关于动画animation的三个应用(漂浮的白云、旋转的星球、正方体合成)_html/css_WEB-I的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did111927