css火箭发射倒计时升空动画
代码语言:html
所属分类:动画
代码描述:css火箭发射倒计时升空动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Bowlby+One+SC&display=swap'> <style> :root { --color: #40407a; --font-color: #f1c40f; --rocket-main: white; --rocket-highlight: #e74c3c; --rocket-glass: #9AECDB; --rocket-smoke: #f1f2f6; --rocket-fire: #f0932b; --rocket-fire-highlight: #f1c40f; } html, body { padding: 0; margin: 0; width: 100%; height: 100%; background: var(--color); } #frame { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; } .shadow { position: absolute; width: 50%; height: 100%; right: 0; background: rgba(100, 100, 100, 0.1); z-index: 1; } .shadow--full { width: 100%; } .rocket { position: relative; width: 55px; height: 100px; } .rocket__body { position: relative; width: 100%; height: 100%; overflow: hidden; z-index: 10; } .rocket__body__window { position: absolute; width: 22px; height: 22px; top: 30px; left: 13.5px; border-radius: 50%; background: var(--rocket-glass); z-index: 1; border: 3px solid var(--rocket-highlight); } .rocket__body__inner { position: relative; width: 55px; height: 125px; border-radius: 80%; background: var(--rocket-main); overflow: hidden; } .rocket__body__inner:before, .rocket__body__inner:after { content: ""; position: absolute; background: var(--rocket-highlight); borde.........完整代码请登录后点击上方下载按钮下载查看
网友评论0