html+css3背景云彩飘动中动画效果

准备好需要用到的图标。

新建html文档。

书写hmtl代码。

书写css代码。html, body { margin: 0; padding: 0; height: 100% }.sky { height: 480px; background: #007fd5; position: relative; overflow: hidden; -webkit-animation: sky_background 50s ease-out infinite; -moz-animation: sky_background 50s ease-out infinite; -o-animation: sky_background 50s ease-out infinite; animation: sky_background 50s ease-out infinite; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }.sky .clouds_one { background: url("../images/cloud_one.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%; -webkit-animation: cloud_one 50s linear infinite; -moz-animation: cloud_one 50s linear infinite; -o-animation: cloud_one 50s linear infinite; animation: cloud_one 50s linear infinite; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }.sky .clouds_two { background: url("../images/cloud_two.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%; -webkit-animation: cloud_two 75s linear infinite; -moz-animation: cloud_two 75s linear infinite; -o-animation: cloud_two 75s linear infinite; animation: cloud_two 75s linear infinite; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }.sky .clouds_three { background: url("../images/cloud_three.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%; -webkit-animation: cloud_three 100s linear infinite; -moz-animation: cloud_three 100s linear infinite; -o-animation: cloud_three 100s linear infinite; animation: cloud_three 100s linear infinite; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } @-webkit-keyframes sky_background {  0% { background: #007fd5; color: #007fd5} 50% { background: #000; color: #a3d9ff} 100% { background: #007fd5; color: #007fd5}}@-moz-keyframes sky_background {  0% { background: #007fd5; color: #007fd5} 50% { background: #000; color: #a3d9ff} 100% { background: #007fd5; color: #007fd5}}@keyframes sky_background {  0% { background: #007fd5; color: #007fd5} 50% { background: #000; color: #a3d9ff} 100% { background: #007fd5; color: #007fd5}} @-webkit-keyframes cloud_one {  0% { left: 0} 100% { left: -200%}}@-moz-keyframes cloud_one {  0% { left: 0} 100% { left: -200%}}@keyframes cloud_one {  0% { left: 0} 100% { left: -200%}} @-webkit-keyframes cloud_two {  0% { left: 0} 100% { left: -200%}}@-moz-keyframes cloud_two {  0% { left: 0} 100% { left: -200%}}@keyframes cloud_two {  0% { left: 0} 100% { left: -200%}} @-webkit-keyframes cloud_three {  0% { left: 0} 100% { left: -200%}}@-moz-keyframes cloud_three {  0% { left: 0} 100% { left: -200%}}@keyframes cloud_three {  0% { left: 0} 100% { left: -200%}}

代码整体结构。

查看效果。