【開發(fā)小技巧】028—使用CSS創(chuàng)建卡通動畫加載效果
HTML代碼：在本文中，設(shè)計了代碼的基本結(jié)構(gòu)。
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Animated loadertitle><link rel="stylesheet" href="style.css">head><body><div class="pieces">div><div class="one">div><div class="two">div><div class="eye">div><p>GeeksforGeeks loading...p>body>html>
CSS代碼：在本文中，卡通加載器的設(shè)計是使用CSS屬性實現(xiàn)的。
通過逐漸從一組樣式更改為另一組樣式來創(chuàng)建動畫。更改以百分比或關(guān)鍵字“ from”和“ to”為單位，分別與0％和100％相同。
我們可以根據(jù)需要多次更改CSS樣式集。
句法：
animationname {keyframes-selector {css-styles;}}body{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #202020;}.pieces{padding: 10px;border-radius: 50%;background: #ffcc00;position: absolute;right: 40%;animation: pieces 1s linear infinite;}.one{position: absolute;top: 50.5%;left: 30%;background: yellowgreen;border-radius: 0 0 125px 125px;height: 125px;width: 250px;animation: anim1 1s linear infinite;}.two{position: absolute;top: 36.5%;left: 30%;background: yellowgreen;border-radius: 125px 125px 0 0;height: 125px;width: 250px;animation: anim2 1s linear infinite;}.eye{position: absolute;right: 60%;top: 40%;background: #202020;padding: 12px;border-radius: 50%;animation: eye 1s linear infinite;}p{position: absolute;font-weight: bold;text-transform: uppercase;font-size: 25px;letter-spacing: 2px;top: 53%;right: 30%;font-family: arial;color: green;}@keyframes anim1{0%{transform: rotate(0deg);}50%{transform: rotate(20deg);}100%{transform: rotate(0deg);}}@keyframes anim2{0%{transform: rotate(0deg);}50%{transform: rotate(-20deg);}100%{transform: rotate(0deg);}}@keyframes eye{0%{top: 40%;right: 60%;}50%{top: 40.3%;right: 60.3%;}100%{top: 40%;right: 60%;}}@keyframes pieces{0%{right: 40%;}100%{right: 60%;}}
完整代碼：這是以上兩個代碼部分的組合。
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content=????"width=device-width,?initial-scale=1.0">???????<title>Animated loadertitle><style>body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #202020;}.pieces {padding: 10px;border-radius: 50%;background: #ffcc00;position: absolute;right: 40%;animation: pieces 1s linear infinite;}.one {position: absolute;top: 50.5%;left: 30%;background: yellowgreen;border-radius: 0 0 125px 125px;height: 125px;width: 250px;animation: anim1 1s linear infinite;}.two {position: absolute;top: 36.5%;left: 30%;background: yellowgreen;border-radius: 125px 125px 0 0;height: 125px;width: 250px;animation: anim2 1s linear infinite;}.eye {position: absolute;right: 60%;top: 40%;background: #202020;padding: 12px;border-radius: 50%;animation: eye 1s linear infinite;}p {position: absolute;font-weight: bold;text-transform: uppercase;font-size: 25px;letter-spacing: 2px;top: 53%;right: 30%;font-family: arial;color: green;}@keyframes anim1 {0% {transform: rotate(0deg);}50% {transform: rotate(20deg);}100% {transform: rotate(0deg);}}@keyframes anim2 {0% {transform: rotate(0deg);}50% {transform: rotate(-20deg);}100% {transform: rotate(0deg);}}@keyframes eye {0% {top: 40%;right: 60%;}50% {top: 40.3%;right: 60.3%;}100% {top: 40%;right: 60%;}}@keyframes pieces {0% {right: 40%;}100% {right: 60%;}}style>head><body><div class="pieces">div><div class="one">div><div class="two">div><div class="eye">div><p>GeeksforGeeks loading...p>body>html>
本文完~
評論
圖片
表情