原生js实现网页滚动实现火箭发射升空动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:原生js实现网页滚动实现火箭发射升空动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --base-padding: 3vw; --white-25: rgba(255,255,255,.25); --white-50: rgba(255,255,255,.5); } body { margin: var(--base-padding); font-family: system-ui; } * { box-sizing: border-box; } section { display: block; min-height: 100vh; display: grid; place-items: center; } #rocket { width: 40px; height: 125px; background: linear-gradient(to right, transparent 45%, firebrick 45%, firebrick 55%, transparent 55%), radial-gradient(circle at 50% 40%, rgba(255,255,255,1) 10%, #aaa 11%, #aaa 15%, transparent 16%), linear-gradient(to right, transparent 50%, rgba(0,0,0,.1) 50%), linear-gradient(to bottom, firebrick 12%, transparent 12%), lightgray; background-size: 100% 40%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; background-position: 50% 95%, 0 0, 0 0, 0 0, 0 0; background-repeat: no-repeat; border-radius: 50px 50px 50px 50px / 200px 200px 10px 10px; position: fixed; bottom: 0; left: calc(50% - 20px); box-shadow: 0 15px 0 -5px #666; filter: drop-shadow(0px -5px 2px rgba(0,0,0,.15)); } #rocket:before { content:''; width: 200%; height: 50%; position: absolute; top: 55%; left: -50%; background: radial-gradient(circle at 50% 100%, transparent 50%, firebrick 51%); clip-path: polygon(0% 0%, 25% 0%, 25% 100%, 75% 100%, 75% 0%, 100% 0%, 100% 100%, 0% 100%); border-radius: 100% 100% 0 0; } #rocket:after { content:''; width: 60%; height: 25%; position: absolute; top: 108%; left: 20%; background: linear-gradient(to bottom, orangered, gold); border-radius: 0 0 25% 25%; filter: blur(2px); opacity: .5; animation: blast_off .25s linear infinite; } @keyframes blast_off { 33% { background: linear-gradient(to bottom, orangered 25%, gold 75%); } 66% { background: linear-gradient(to bottom, orangered 50%, gold 90%); } } .shake_rocket { animation: shake .1s linear infinite; } @keyframes shake { 25% { transform: translateX(-1px); } 75% { transform: translateX(1px); } } #sky { min-height: 200vh; width: 100%; position: fixed; bottom: 0; left: 0; background: radial-gradient(circle at 75% 24%, rgba(255,255,255,.5) .25%, transparent .25%), radial-gradient(circle at 10% 23%, rgba(255,255,255,.25) .25%, transparent .25%), radial-gradient(circle at 98% 29%, rgba(255,255,255,.25) .25%, transparent .25%), radial-gradient(circle at 63% 10%, rgba(255,255,255,.25) .25%, transparent .25%), radial-gradient(circle at 20% 6%, rgba(255,255,255,.25) .25%, transparent .25%), radial-gradient(circle at 75% 5%, rgba(255,255,255,.25) .25%, transparent .25%), radial-gradient(circle at 35% 15%, rgba(255,255,255,.25) .25%, transparent .25%), radial-gradient(circle at 94% 10%, rgba(255,255,255,.25) .25%, transparent .25%), radial-gradient(circle at 55% 30%, rgba(255,255,255,.25) .25%, transparent .25%), .........完整代码请登录后点击上方下载按钮下载查看
网友评论0