css实现海面波动海燕纷飞动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现海面波动海燕纷飞动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; background-image: linear-gradient(#ffbe79, #ffbe79 10%, #75bed6 40%, #75bed6); overflow: hidden; height: 100vh; } .bird { width: 25px; height: 5px; display: inline-block; position: absolute; transform: skew(20deg, 20deg); animation: wave 2.5s ease-in-out infinite; } .bird:before, .bird:after { content: ''; width: 100%; height: 100%; background-color: #000; position: absolute; border-radius: 20%; } .bird:before { right: 49%; transform-origin: right; transform: rotate(-40deg); animation: flap-left .75s ease-in-out infinite; } .bird:after { left: 49%; transform-origin: left; transform: rotate(40deg); animation: flap-right .75s linear infinite; } @keyframes wave { 40% { transform: translateY(40px) skew(20deg, 20deg); } 50% { transform: translateY(50px) skew(20deg, 20deg); } 60% { transform: translateY(40px) skew(20deg, 20deg); } 100% { transform: translateY(0) skew(20deg, 20deg); } } @keyframes flap-left { 60% { transform: rotate(10deg); } 75% { transform: rotate(20deg); } 100% { transform: rotate(-40deg); } } @keyframes flap-right { 60% { transform: rotate(-10deg); } 75% { transform: rotate(-20deg); } 100% { transform: rotate(40deg); } } </style> </head> <body> <script > // JS is for dynamically creating and moving the birds across the screen. // The actual bird flapping and flight wave is CSS animation. // Adjust these options here to customize the scene. let options = { delay: 500, speedRange: [2, 5], angleRange: [-30, 30], sizeRange: [8, 30] }; let bird = document.createElement('span'); bird.className = 'bird'; let particles = []; setInterval(() => { let newBird = bird.cloneNode(); const size = rand(options.sizeRange[0], options.sizeRange[1]); newBird.style.width = size + 'px'; newBird.style.height = (size/5) + 'px'; document.body.appendChild(newBird); particles.push(new Particle(newBird, { speed: rand( options.speedRange[0], options.speedRange[1] ), angle: rand( options.angleRange[0], options.angleRange[1] ), pos: [-100, rand(0, window.innerHeight)] })); }, options.delay); window.requestAnimationFrame(draw); function draw () { particles.forEach((particle, i, arr) => { if (particle.pos[0] > window.innerWidth || particle.pos[1] > window.innerHeight || particle.pos[0] < 0-window.innerWidth || particle.pos[1] < 0-window.innerHeight) { particle.element.parentNode.removeChild(particle.element); arr.splice(i, 1); } particle.move(); }); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0