摘要:今天抽了点时间用 HTML+CSS 写了一个 鸿蒙OS 开机动画 ,用的最多的就是css的animation这个属性,分享一下:
最近刷抖音刷微博啥的经常能看到鸿蒙 HarmonyOs 的消息,先给华为和我们中国科技的崛起点个赞!
今天抽了点时间用 HTML+CSS 写了一个 鸿蒙OS 开机动画 ,用的最多的就是css的animation这个属性,分享下代码:
HTML代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HarmonyOS开机动画</title> <style> * { padding: 0; margin: 0; } html, body { height: 100% } body { background: black; } .outWrap{ position: fixed; top: 30%; left: 15%; display: flex; animation: moveFiexd 4s forwards } .font{ height: 150px; color: white; font-size: 104px; line-height: 150px; opacity: 0; animation: transparency 4s forwards } .back{ height: 150px; color: white; font-size: 131px; line-height: 177px; opacity: 0; animation: transparency 4s forwards } .wrap{ display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } .wrapOver { position: relative; width: 100px; height: 50px; overflow: hidden } .circle1 { position: absolute; box-sizing: border-box; width: 100px; height: 100px; border: 15px solid white; border-radius: 50%; transform: translateY(100%); filter:blur(2px); animation: myMoveTop 2s forwards } .circle2 { position: absolute; box-sizing: border-box; width: 100px; height: 100px; border: 15px solid white; border-radius: 50%; transform: translateY(-150%); filter:blur(2px); animation: myMoveBottom 2s forwards } .bottomSliver{ width: 0px; height: 5px; background:#00a1d6 ; margin-top: 5px; animation: myMoveSliver 4s forwards } @keyframes transparency { 50% { opacity: 0;} 100% { opacity: 1;} } @keyframes myMoveSliver { 50% { width: 0px;} 100% { width: 50px;} } @keyframes myMoveBottom { 90% {filter:blur(2px); } 100% { transform: translateY(-50%);filter:blur(0px);} } @keyframes myMoveTop { 90% {filter:blur(2px); } 100% { transform: none;filter:blur(0px); } } @keyframes moveFiexd { 50% {left:15%; } 100% {left:30%; } } </style> </head> <body> <div class="outWrap"> <div class="font">Harmony</div> <div class="wrap"> <div class="wrapOver"> <div class="circle1"></div> </div> <div class="wrapOver"> <div class="circle2"></div> </div> <div class="bottomSliver"></div> </div> <div class="back">S</div> </div> </body> </html>
网友评论:
袁总遥遥领先~@!
2024-08-01 18:28:05 回复
网友评论:
遥遥领先,袁总也遥遥领先!
2023-11-21 10:20:54 回复
网友评论:
遥遥领先
2023-11-21 10:09:36 回复
网友评论:
不错,学习到了
2023-11-21 10:05:22 回复