溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS3怎么實現(xiàn)可愛的小黃人動畫

發(fā)布時間：2021-08-10 18:09:27 來源：億速云 閱讀：155 作者：chen 欄目：web開發(fā)

這篇文章主要介紹“CSS3怎么實現(xiàn)可愛的小黃人動畫 ”，在日常操作中，相信很多人在CSS3怎么實現(xiàn)可愛的小黃人動畫 問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS3怎么實現(xiàn)可愛的小黃人動畫 ”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

如圖：

CSS3怎么實現(xiàn)可愛的小黃人動畫

聯(lián)想到我要做CSS3動畫，呵呵……怎么辦 ? ——沒辦法，摳唄?。ù颂幬饑?，著實無素材）

……最后效果變成這樣子,這是移動端的例子！(gif圖有卡頓現(xiàn)象，請湊合看吧,非喜勿噴…)：

CSS3怎么實現(xiàn)可愛的小黃人動畫

OK,其實主要目的還是知識點的學(xué)習(xí)吧：

這個demo涉及的知識點有：

perspective

perspective-origin

transform-style

transform-origin

animation

@keyframes

translate3d,translateX，rotateY….

這些知識點有些涉及css3d動畫，各個知識點的具體詳解我就不解釋了，有興趣可以到這里了解一下：http://isux.tencent.com/css3/index.html

回到這個案例，話說這么挫的動畫是怎么具體實現(xiàn)的呢？ 我將分享代碼給大家練習(xí)：

html結(jié)構(gòu)：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <body>  

  2.     <div class="title">  

  3.         <p>小黃人</p>  

  4.     </div>  

  5.     <div class="wrapper">  

  6.         <div class="littleH">  

  7.             <div class="light">  

  8.                 <div class="light_left">  

  9.                     <p>歡迎歡迎，熱烈歡迎</p>  

  10.                 </div>  

  11.                 <div class="light_right">  

  12.                     <p>歡迎歡迎，熱烈歡迎</p>  

  13.                 </div>  

  14.                 <div class="load"></div>  

  15.             </div>  

  16.             <div class="littleH_body">  

  17.                 <div class="leftHair"></div>  

  18.                 <div class="rightHair"></div>  

  19.                 <div class="leftBlackeye"></div>  

  20.                 <div class="leftWhiteeye"></div>  

  21.                 <div class="rightBlackeye"></div>  

  22.                 <div class="rightWhiteeye"></div>  

  23.                 <div class="mouse"></div>  

  24.                 <div class="leftFoot"></div>  

  25.                 <div class="rightFoot"></div>  

  26.             </div>  

  27.         </div>  

  28.     </div>  

  29. </body>  

css代碼：

CSS Code復(fù)制內(nèi)容到剪貼板

  1. body{   

  2.             margin: 0;   

  3.             padding: 0;   

  4.             width: 100%;   

  5.             height: 100%;   

  6.         }   

  7.         .title p{   

  8.             text-align: center;   

  9.             font-size: 100px;   

  10.             font-weight: bolder;   

  11.             color:#333;   

  12.         }   

  13.         .wrapper{   

  14.             margin: 400px auto;   

  15.         }   

  16.         .littleH{   

  17.             position: relative;   

  18.             -webkit-perspective: 800;   

  19.             -webkit-perspective-origin: 50% 50%;   

  20.         }   

  21.         .light{   

  22.             -webkit-transform-style: preserve-3d;   

  23.         }   

  24.         .light .light_left,.light .light_right{   

  25.             position: absolute;   

  26.             width: 100%;   

  27.             height: 300px;   

  28.             background: lightblue;   

  29.             -webkit-transform: rotateY(90deg) translate3d(0,300px,-200px);   

  30.             -webkit-animation: changeBgColor 2s linear infinite;   

  31.         }   

  32.         .light .light_right{   

  33.             -webkit-transform: rotateY(-90deg) translate3d(0,300px,-215px);   

  34.             -webkit-animation-delay: 1s;   

  35.         }   

  36.         @-webkit-keyframes changeBgColor{   

  37.             0%,100%{   

  38.                 background: lightblue;   

  39.             }   

  40.             50%{   

  41.                 background: lightgreen;   

  42.             }   

  43.         }   

  44.         .light .light_left p,.light .light_right p{   

  45.             color:#fff;   

  46.             font-size: 80px;   

  47.             font-weight: bold;   

  48.             margin-left: 100px;   

  49.         }   

  50.         .light .light_right p{   

  51.             float: rightright;   

  52.             margin-right: 100px;   

  53.         }   

  54.         .light .load{   

  55.             position: absolute;   

  56.             width: 500px;   

  57.             height: 1500px;   

  58.             background: -webkit-gradient(linear, left top, left bottombottom, color-stop(51%,#aadbdc), color-stop(52%,#ffffff));   

  59.             background: -webkit-linear-gradient(top, #aadbdc 51%,#ffffff 52%);   

  60.             background: linear-gradient(to bottombottom, #aadbdc 51%,#ffffff 52%);    

  61.             background-size: 350px 80px;   

  62.             -webkit-animation: move_load 5s linear infinite;   

  63.         }   

  64.         @-webkit-keyframes move_load{   

  65.             0%{   

  66.                 -webkit-transform:rotateX(90deg) translate3d(250px,0,0);   

  67.             }   

  68.             100%{   

  69.                 -webkit-transform:rotateX(90deg) translate3d(250px,-320px,0);   

  70.             }   

  71.         }   

  72.         .littleH_body{   

  73.             position: absolute;   

  74.             left:50%;   

  75.             margin-left: -157px;   

  76.             width: 314px;   

  77.             height: 425px;   

  78.             background: url(1.png);   

  79.             -webkit-transform-style: preserve-3d;   

  80.         }   

  81.         .leftHair{   

  82.             position: absolute;   

  83.             rightright: 58px;   

  84.             top:-5px;   

  85.             width: 100px;   

  86.             height: 17px;   

  87.             background: url(lefthair.png);   

  88.             -webkit-transform-origin: left bottombottom;   

  89.             -webkit-animation: lefthair 1s .3s ease-in-out infinite;   

  90.   

  91.         }   

  92.         @-webkit-keyframes lefthair{   

  93.             0%,10%,40%,100%{   

  94.                 -webkit-transform: rotate(0deg) translateY(1px);   

  95.             }   

  96.             30%{   

  97.                 -webkit-transform: rotate(-3deg) translateY(1px);   

  98.             }   

  99.         }   

  100.         .rightHair{   

  101.             position: absolute;   

  102.             left: 58px;   

  103.             top:-8px;   

  104.             width: 100px;   

  105.             height: 16px;   

  106.             background: url(righthair.png);   

  107.             -webkit-transform-origin: rightright bottombottom;   

  108.             -webkit-animation: righthair 1s ease-in-out infinite;   

  109.         }   

  110.         @-webkit-keyframes righthair{   

  111.             0%,10%,40%,100%{   

  112.                 -webkit-transform: rotate(0deg) translateY(1px);   

  113.             }   

  114.             30%{   

  115.                 -webkit-transform: rotate(4deg) translateY(1px);   

  116.             }   

  117.         }   

  118.         .leftBlackeye{   

  119.             position: absolute;   

  120.             rightright: 87px;   

  121.             top:102px;   

  122.             width: 43px;   

  123.             height: 43px;   

  124.             background: url(eyeblack.png);   

  125.             -webkit-animation: leftblackeye 5s ease-in infinite;   

  126.         }   

  127.         @-webkit-keyframes leftblackeye{   

  128.             0%,20%,50%,70%,100%{   

  129.                 -webkit-transform: translateX(0px);   

  130.             }   

  131.             30%,40%{   

  132.                 -webkit-transform: translateX(15px);   

  133.             }   

  134.             80%,90%{   

  135.                 -webkit-transform: translateX(-15px);   

  136.             }   

  137.         }   

  138.         .leftWhiteeye{   

  139.             position: absolute;   

  140.             rightright: 92px;   

  141.             top:110px;   

  142.             width: 20px;   

  143.             height: 21px;   

  144.             background: url(whiteeye.png);   

  145.             background-size: 95% 95%;   

  146.             background-repeat: no-repeat;   

  147.             -webkit-animation: leftwhiteeye 5s ease-in infinite;   

  148.         }   

  149.         @-webkit-keyframes leftwhiteeye{   

  150.             0%,20%,50%,70%,100%{   

  151.                 -webkit-transform: translateX(0px);   

  152.             }   

  153.             30%,40%{   

  154.                 -webkit-transform: translate3d(15px,3px,0);   

  155.             }   

  156.             80%,90%{   

  157.                 -webkit-transform: translate3d(-30px,3px,0);   

  158.             }   

  159.         }   

  160.         .rightBlackeye{   

  161.             position: absolute;   

  162.             left: 84px;   

  163.             top:102px;   

  164.             width: 43px;   

  165.             height: 43px;   

  166.             background: url(eyeblack.png);   

  167.             -webkit-animation: rightblackeye 5s ease-in infinite;   

  168.         }   

  169.         @-webkit-keyframes rightblackeye{   

  170.             0%,20%,50%,70%,100%{   

  171.                 -webkit-transform: translateX(0px);   

  172.             }   

  173.             30%,40%{   

  174.                 -webkit-transform: translateX(15px);   

  175.             }   

  176.             80%,90%{   

  177.                 -webkit-transform: translateX(-15px);   

  178.             }   

  179.         }   

  180.         .rightWhiteeye{   

  181.             position: absolute;   

  182.             left: 102px;   

  183.             top:112px;   

  184.             width: 20px;   

  185.             height: 21px;   

  186.             background: url(whiteeye.png);   

  187.             background-size: 95% 95%;   

  188.             background-repeat: no-repeat;   

  189.             -webkit-animation: rightwhiteeye 5s ease-in infinite;   

  190.         }   

  191.         @-webkit-keyframes rightwhiteeye{   

  192.             0%,20%,50%,70%,100%{   

  193.                 -webkit-transform: translateX(0px);   

  194.             }   

  195.             30%,40%{   

  196.                 -webkit-transform: translate3d(15px,3px,0);   

  197.             }   

  198.             80%,90%{   

  199.                 -webkit-transform: translate3d(-30px,3px,0);   

  200.             }   

  201.         }   

  202.         .mouse{   

  203.             position: absolute;   

  204.             left: 126px;   

  205.             top:210px;   

  206.             width: 71px;   

  207.             height: 30px;   

  208.             background: url(mouse.png);   

  209.             -webkit-transform-origin: center top;   

  210.             -webkit-animation: mouse 5s ease-in-out infinite;   

  211.         }   

  212.         @-webkit-keyframes mouse{   

  213.             40%{   

  214.                 -webkit-transform: rotate(-15deg) translateX(22px);   

  215.             }   

  216.             0%,20%,60%,100%{   

  217.                 -webkit-transform: rotate(0deg);   

  218.             }   

  219.         }   

  220.         .leftFoot{   

  221.             position: absolute;   

  222.             rightright: 85px;   

  223.             top:424px;   

  224.             width: 68px;   

  225.             height: 43px;   

  226.             background: url(leftfoot.png);   

  227.             -webkit-transform-origin: left top;   

  228.             -webkit-animation: leftfoot .6s ease-in-out infinite;   

  229.         }   

  230.         @-webkit-keyframes leftfoot{   

  231.             0%,50%,100%{   

  232.                 -webkit-transform: rotate(0deg);   

  233.             }   

  234.             80%{   

  235.                 -webkit-transform: rotate(-10deg);   

  236.             }   

  237.         }   

  238.         .rightFoot{   

  239.             position: absolute;   

  240.             left: 85px;   

  241.             top:424px;   

  242.             width: 68px;   

  243.             height: 43px;   

  244.             background: url(rightfoot.png);   

  245.             margin-bottom: 100px;   

  246.             -webkit-transform-origin: rightright top;   

  247.             -webkit-animation: rightfoot .6s ease-in-out infinite;   

  248.         }   

  249.         @-webkit-keyframes rightfoot{   

  250.             0%,50%,100%{   

  251.                 -webkit-transform: rotate(0deg);   

  252.             }   

  253.   

  254.             30%{   

  255.                 -webkit-transform: rotate(10deg);   

  256.             }   

  257.         }   

代碼應(yīng)該還是很簡單就能看懂的，不足之處在于圖片沒有合并，就湊合吧，主要目的還是對CSS3動畫（特別是3d）知識點的學(xué)習(xí)及實踐。多練習(xí)，才能記得更牢，用得更順，這只是開始&hellip;&hellip;

PS：附上我摳的圖片

CSS3怎么實現(xiàn)可愛的小黃人動畫 1.png

CSS3怎么實現(xiàn)可愛的小黃人動畫righthair.png

CSS3怎么實現(xiàn)可愛的小黃人動畫lefthair.png

CSS3怎么實現(xiàn)可愛的小黃人動畫eyeblack.png

CSS3怎么實現(xiàn)可愛的小黃人動畫whiteeye.png

CSS3怎么實現(xiàn)可愛的小黃人動畫mouse.png

CSS3怎么實現(xiàn)可愛的小黃人動畫rightfoot.png

CSS3怎么實現(xiàn)可愛的小黃人動畫leftfoot.png

到此，關(guān)于“CSS3怎么實現(xiàn)可愛的小黃人動畫 ”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手