云朵 – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>云朵</title> <style> .sky-wrap{ position: absolute; top: 0; left: 0; right: 0; } .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: translateZ(0); } .sky .clouds_one { background: url(https://img.momen.vip/imgs/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: translateZ(0); } .sky .clouds_two { background: url(https://img.momen.vip/imgs/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: translateZ(0); } .sky .clouds_three { background: url(https://img.momen.vip/imgs/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: translateZ(0); } @keyframes sky_background { 0% { background: #007fd5; color: #007fd5; } 50% { background: #000; color: #a3d9ff; } to { background: #007fd5; color: #007fd5; } } @keyframes cloud_one { 0% { left: 0; } to { left: -200%; } } @keyframes cloud_two { 0% { left: 0; } to { left: -200%; } } @keyframes cloud_three { 0% { left: 0; } to { left: -200%; } } </style> </head> <body> <div class="sky-wrap"> <div class="sky"> <div class="clouds_one"></div> <div class="clouds_two"></div> <div class="clouds_three"></div> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 云朵