怎么用html5和css3實現動畫分成人物頭像

這篇文章主要講解了“怎么用html5和css3實現動畫分成人物頭像”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么用html5和css3實現動畫分成人物頭像”吧！

　　實現的代碼。

　　html代碼：

XML / HTML代碼將內容復制到文本

< div class = 'stage' >   

        < div class = '圖像' >   

            < img src = “ https://cache.yisu.com/upload/information/20220117/488/21350.jpg” >   

            < div class = '笑臉' >   

                < svg寬度= “ 30px”高度= “ 30px” >    

                    < path fill = “ #effedd” d = “ M15,0C6.7,0,0,6.7,0,15c0,8.3,6.7,15,15,15s15-6.7,15-15C30,6.7,23.3,0,15 ，0z M20.5,8c1.4,0,2.5,1.1,2.5,2.5c0,1.4-1.1,2.5-2.5,2.5S18,11.9,18,10.5C18,9.1,19.1,8,20.5,8z M10。 5,8c1.4,0,2.5,1.1,2.5,2.5c0,1.4-1.1,2.5-2.5,2.5S8,11.9,8,10.5C8,9.1,9.1,8,10.5,8z M15,26c-5， 0-9-4-9-9h4c0,3.3,2.7,6,6,6s6-2.7,6-6h4C24,22,20,26,15,26z“ /> </ svg >     

            </ div >  

        </ div >  

        <圖類= '頭像' >   

        </圖>  

        <圖類= '頭像' >   

        </圖>  

        <圖類= '頭像' >   

        </圖>  

        <圖類= '頭像' >   

        </圖>  

        <圖類= '頭像' >   

        </圖>  

        <圖類= '頭像' >   

        </圖>  

        <圖類= '頭像' >   

        </圖>  

        <圖類= '頭像' >   

        </圖>  

    </ div >  

　　css3代碼：

CSS代碼將內容復制到文本

.stage {   

  職位： 絕對;   

  最高：0;   

  右右：0;   

  底部底部：0;   

  左：0;   

  保證金： 自動;   

  高度：  460px ;   

  寬度：  480px ;   

}   

.avatar {   

  職位： 絕對;   

  最高：0;   

  右右：0;   

  底部底部：0;   

  左：0;   

  保證金： 自動;   

  高度：  64px ;   

  寬度：  64px ;   

  背景重復： 不重復；   

  背景-大小：封面；   

  邊界半徑：50％;   

  -webkit-transform-origin：  center ;   

      -ms-transform-origin：  center ;   

          transform-origin：  center ;   

}   

.avatar：之前{   

  內容：  '' ;   

  職位： 絕對;   

  最高：-8％;   

  對對：-8％;   

  高度：17. 06667px ;   

  寬度：17. 06667px ;   

  背景：  ＃bec4bc ;   

  邊界半徑：50％;   

  邊框：  3px純白色;     

}   

.avatar：nth-of-type（1）{   

  -webkit-animation：ani1 2s 0.1s cube-bezier（0.175，0.885，0.32，1.275）轉發;   

          動畫：ani1 2s 0.1s cube-bezier（0.175，0.885，0.32，1.275）轉發；   

}   

@ -webkit-keyframes ani1 {   

  0％，20％{   

    -webkit-transform：旋轉（45deg）轉換（0）旋轉（-45deg）;   

            轉換：rotate（45deg）translate（0）rotate（-45deg）;   

  }   

  34％，100％{   

    -webkit-transform：旋轉（45deg）轉換（208px ）旋轉（-45deg）;   

            變換：rotate（45deg），translate（208px ），rotate（-45deg）;   

  }   

}   

@keyframes ani1 {   

  0％，20％{   

    -webkit-transform：旋轉（45deg）轉換（0）旋轉（-45deg）;   

            轉換：rotate（45deg）translate（0）rotate（-45deg）;   

  }   

  34％，100％{   

    -webkit-transform：旋轉（45deg）轉換（208px ）旋轉（-45deg）;   

            變換：rotate（45deg），translate（208px ），rotate（-45deg）;   

  }   

}   

.avatar：nth-of-type（2）{   

  -webkit-animation：ani2 2s 0.2s立方貝塞爾（0.175，0.885，0.32，1.275）轉發;   

          動畫：ani2 2s 0.2s三次方貝塞爾（0.175，0.885，0.32，1.275）轉發；   

}   

@ -webkit-keyframes ani2 {   

  0％，20％{   

    -webkit-transform：旋轉（90deg）轉換（0）旋轉（-90deg）;   

            變換：旋轉（90度）平移（0）旋轉（-90度）;   

  }   

  34％，100％{   

    -webkit-transform：旋轉（90deg）轉換（208px ）旋轉（-90deg）;   

            變換：rotate（90deg），translate（208px ），rotate（-90deg）;   

  }   

}   

@keyframes ani2 {   

  0％，20％{   

    -webkit-transform：旋轉（90deg）轉換（0）旋轉（-90deg）;   

            變換：旋轉（90度）平移（0）旋轉（-90度）;   

  }   

  34％，100％{   

    -webkit-transform：旋轉（90deg）轉換（208px ）旋轉（-90deg）;   

            變換：rotate（90deg），translate（208px ），rotate（-90deg）;   

  }   

}   

.avatar：nth-of-type（3）{   

  -webkit-animation：ani3 2s 0.3s cube-bezier（0.175，0.885，0.32，1.275）轉發;   

          動畫：ani3 2s 0.3s cube-bezier（0.175，0.885，0.32，1.275）轉發；   

}   

@ -webkit-keyframes ani3 {   

  0％，20％{   

    -webkit-transform：旋轉（135deg）轉換（0）旋轉（-135deg）;   

            變換：旋轉（135度）平移（0）旋轉（-135度）;   

  }   

  34％，100％{   

    -webkit-transform：旋轉（135deg）轉換（208px ）旋轉（-135deg）;   

            變換：rotate（135deg）平移（208px ）rotate（-135deg）;   

  }   

}   

@keyframes ani3 {   

  0％，20％{   

    -webkit-transform：旋轉（135deg）轉換（0）旋轉（-135deg）;   

            變換：旋轉（135度）平移（0）旋轉（-135度）;   

  }   

  34％，100％{   

    -webkit-transform：旋轉（135deg）轉換（208px ）旋轉（-135deg）;   

            變換：rotate（135deg）平移（208px ）rotate（-135deg）;   

  }   

}   

.avatar：nth-of-type（4）{   

  -webkit-animation：ani4 2s 0.4s cube-bezier（0.175，0.885，0.32，1.275）轉發;   

          動畫：ani4 2s 0.4s立方貝塞爾曲線（0.175、0.885、0.32、1.275）向前；   

}   

@ -webkit-keyframes ani4 {   

  0％，20％{   

    -webkit-transform：旋轉（180deg）轉換（0）旋轉（-180deg）;   

            變換：旋轉（180度）平移（0）旋轉（-180度）;   

  }   

  34％，100％{   

    -webkit-transform：旋轉（180deg）轉換（208px ）旋轉（-180deg）;   

            變換：rotate（180deg）平移（208px ）rotate（-180deg）;   

  }   

}   

@keyframes ani4 {   

  0％，20％{   

    -webkit-transform：旋轉（180deg）轉換（0）旋轉（-180deg）;   

            變換：旋轉（180度）平移（0）旋轉（-180度）;   

  }   

  34％，100％{   

    -webkit-transform：旋轉（180deg）轉換（208px ）旋轉（-180deg）;   

            變換：rotate（180deg）平移（208px ）rotate（-180deg）;   

  }   

}   

.avatar：nth-of-type（5）{   

  -webkit-animation：ani5 2s 0.5s cube-bezier（0.175，0.885，0.32，1.275）轉發;   

          動畫：ani5 2s 0.5s cube-bezier（0.175，0.885，0.32，1.275）轉發；   

}   

@ -webkit-keyframes ani5 {   

  0％，20％{   

    -webkit-transform：旋轉（225deg）轉換（0）旋轉（-225deg）;   

            變換：rotate（225deg）translate（0）rotate（-225deg）;   

  }   

  34％，100％{   

    -webkit-transform：旋轉（225deg）轉換（208px ）旋轉（-225deg）;   

            變換：rotate（225deg），translate（208px ），rotate（-225deg）;   

  }   

}   

@keyframes ani5 {   

  0％，20％{   

    -webkit-transform：旋轉（225deg）轉換（0）旋轉（-225deg）;   

            變換：rotate（225deg）translate（0）rotate（-225deg）;   

  }   

  34％，100％{   

    -webkit-transform：旋轉（225deg）轉換（208px ）旋轉（-225deg）;   

            變換：rotate（225deg），translate（208px ），rotate（-225deg）;   

  }   

}   

.avatar：nth-of-type（6）{   

  -webkit-animation：ani6 2s 0.6s立方貝塞爾（0.175，0.885，0.32，1.275）轉發;   

          動畫：ani6 2s 0.6s立方貝塞爾曲線（0.175、0.885、0.32、1.275）向前；   

}   

@ -webkit-keyframes ani6 {   

  0％，20％{   

    -webkit-transform：旋轉（270deg）轉換（0）旋轉（-270deg）;   

            變換：旋轉（270度）平移（0）旋轉（-270度）;   

  }   

  34％，100％{   

    -webkit-transform：旋轉（270deg ）轉換（208px ）旋轉（-270deg）;   

            變換：rotate（270deg ），translate（208px ），rotate（-270deg）;   

  }   

}   

@keyframes ani6 {   

  0％，20％{   

    -webkit-transform：旋轉（270deg）轉換（0）旋轉（-270deg）;   

            變換：旋轉（270度）平移（0）旋轉（-270度）;   

  }   

  34％，100％{   

    -webkit-transform：旋轉（270deg ）轉換（208px ）旋轉（-270deg）;   

            變換：rotate（270deg ），translate（208px ），rotate（-270deg）;   

  }   

}   

.avatar：nth-of-type（7）{   

  -webkit-animation：ani7 2s 0.7s cube-bezier（0.175，0.885，0.32，1.275）轉發;   

          動畫：ani7 2s 0.7s立方貝塞爾曲線（0.175、0.885、0.32、1.275）向前；   

}   

@ -webkit-keyframes ani7 {   

  0％，20％{   

    -webkit-transform：旋轉（315deg）轉換（0）旋轉（-315deg）;   

            變換：旋轉（315度）平移（0）旋轉（-315度）;   

  }   

  34％，100％{   

    -webkit-transform：旋轉（315deg）轉換（208px ）旋轉（-315deg）;   

            變換：rotate（315deg）平移（208px ）rotate（-315deg）;   

  }   

}   

@keyframes ani7 {   

  0％，20％{   

    -webkit-transform：旋轉（315deg）轉換（0）旋轉（-315deg）;   

            變換：旋轉（315度）平移（0）旋轉（-315度）;   

  }   

  34％，100％{   

    -webkit-transform：旋轉（315deg）轉換（208px ）旋轉（-315deg）;   

            變換：rotate（315deg）平移（208px ）rotate（-315deg）;   

  }   

}   

.avatar：nth-of-type（8）{   

  -webkit-animation：ani8 2s 0.8s cube-bezier（0.175，0.885，0.32，1.275）轉發;   

          動畫：ani8 2s 0.8s三次方貝塞爾（0.175，0.885，0.32，1.275）向前；   

}   

@ -webkit-keyframes ani8 {   

  0％，20％{   

    -webkit-transform：旋轉（360deg）轉換（0）旋轉（-360deg）;   

            變換：旋轉（360度）平移（0）旋轉（-360度）;   

  }   

  34％，100％{   

    -webkit-transform：旋轉（360deg）轉換（208px ）旋轉（-360deg）;   

            變換：rotate（360deg），translate（208px ），rotate（-360deg）;   

  }   

}   

@keyframes ani8 {   

  0％，20％{   

    -webkit-transform：旋轉（360deg）轉換（0）旋轉（-360deg）;   

            變換：旋轉（360度）平移（0）旋轉（-360度）;   

  }   

  34％，100％{   

    -webkit-transform：旋轉（360deg）轉換（208px ）旋轉（-360deg）;   

            變換：rotate（360deg），translate（208px ），rotate（-360deg）;   

  }   

}   

.avatar：nth-of-type（4）：之前，.avatar：nth-of-type（2）：before {   

  -webkit-animation：反彈3s 1.8s立方貝塞爾（0.175，0.885，0.32，1.275）向前，換色1s 1.8s立方貝塞爾（0.175，0.885，0.32，1.275）向前;   

          動畫：跳動3s 1.8s立方貝塞爾（0.175，0.885，0.32，1.275）前鋒，換色1s 1.8s立方貝塞爾（0.175，0.885，0.32，1.275）前鋒；   

}   

.avatar：nth-of-type（7）：之前{   

  -webkit-animation：向前跳3s 2s立方貝塞爾（0.175，0.885，0.32，1.275），換色1s 2s立方貝塞爾（0.175，0.885，0.32，1.275）前;   

          動畫：前跳3s 2s立方貝塞爾（0.175，0.885，0.32，1.275）向前，換色1s 2s立方貝塞爾（0.175，0.885，0.32，1.275）向前；   

}   

.avatar：nth-of-type（3）：之前{   

  -webkit-animation：彈跳3s 2.8s立方貝塞爾（0.175，0.885，0.32，1.275）前鋒，colorchange 1s 2.8s立方貝塞爾（0.175，0.885，0.32，1.275）前鋒;   

          動畫：前跳3秒2.8秒立方貝塞爾（0.175，0.885，0.32，1.275），換色1秒2.8秒立方貝塞爾（0.175，0.885，0.32，1.275）；   

}   

.avatar：nth-of-type（1）：之前{   

  -webkit-animation：向前跳3s 3s立方貝塞爾（0.175，0.885，0.32，1.275），換色1s 3s立方貝塞爾（0.175，0.885，0.32，1.275）;   

          動畫：前跳3s 3s三次方貝塞爾（0.175，0.885，0.32，1.275）前進，換色1s 3s三次方貝塞爾（0.175，0.885，0.32，1.275）前進；   

}   

.avatar：nth-of-type（6）：之前{   

  -webkit-animation：彈跳3s 3.2s立方貝塞爾（0.175，0.885，0.32，1.275）向前，換色1s 3.2s立方貝塞爾（0.175，0.885，0.32，1.275）向前;   

          動畫：前跳3s 3.2s立方貝塞爾（0.175，0.885，0.32，1.275）向前，換色1s 3.2s立方貝塞爾（0.175，0.885，0.32，1.275）向前；   

}   

.avatar：nth-of-type（5）：之前{   

  -webkit-animation：反彈3s 3.8s立方貝塞爾（0.175，0.885，0.32，1.275）前鋒，colorchange 1s 3.8s立方貝塞爾（0.175，0.885，0.32，1.275）前鋒;   

          動畫：前跳3秒3.8秒立方貝塞爾（0.175，0.885，0.32，1.275），變色1秒3.8秒立方貝塞爾（0.175，0.885，0.32，1.275）前；   

}   

.avatar：nth-of-type（8）：之前{   

  -webkit-animation：向前跳3s 4s立方貝塞爾（0.175，0.885，0.32，1.275），換色1s 4s立方貝塞爾（0.175，0.885，0.32，1.275）;   

          動畫：前跳3s 4s立方貝塞爾（0.175，0.885，0.32，1.275）向前，換色1s 4s立方貝塞爾（0.175，0.885，0.32，1.275）前；   

}   

。圖片 {   

  職位： 絕對;   

  最高：0;   

  右右：0;   

  底部底部：0;   

  左：0;   

  保證金： 自動;   

  高度：  220px ;   

  寬度：  220px ;   

}   

.image img {   

  職位： 相對;   

  高度：  220px ;   

  寬度：  220px ;   

  邊界半徑：50％;   

  z索引：1；   

}   

.image：之前{   

  職位： 絕對;   

  最高：0;   

  右右：0;   

  底部底部：0;   

  左：0;   

  保證金： 自動;   

  內容：  '' ;   

  高度：100％;   

  寬度：100％;   

  背景：  ＃f9fff7 ;   

  邊框：  3px實線＃e7f5d1 ;     

  邊界半徑：50％;   

  -webkit-animation：脈沖1s 1.4s緩解；   

          動畫：脈沖1秒1.4秒緩和；   

  -webkit-animation-iteration-count：3；   

          animation-iteration-count：3；   

}   

.image .smiley {   

  職位： 絕對;   

  頂部：-8px ;   

  右右：-8px ;   

  高度：  64px ;   

  寬度：  64px ;   

  背景：  ＃b5e763 ;   

  邊界半徑：50％;   

  邊框：  5px純白色;     

  -webkit-animation：向前彈跳5s立方貝塞爾曲線（0.175，0.885，0.32，1.275）;   

          動畫：向前彈起5秒立方貝塞爾（0.175，0.885，0.32，1.275）；   

  -webkit-transform-origin：  center ;   

      -ms-transform-origin：  center ;   

          transform-origin：  center ;   

  z索引：1；   

}   

.image .smiley svg {   

  職位： 絕對;   

  最高：0;   

  右右：0;   

  底部底部：0;   

  左：0;   

  保證金： 自動;   

  -webkit-animation：彈跳5秒0.075s立方貝塞爾曲線（0.175，0.885，0.32，1.275）;   

          動畫：前跳5秒0.075秒立方貝塞爾（0.175，0.885，0.32，1.275）；   

}   

@ -webkit-keyframes反彈{   

  0％{   

    -webkit-transform：scale（0）;   

            變換：標度（0）;   

  }   

  5％{   

    -webkit-transform：scale（1.5）;   

            轉換：scale（1.5）;   

  }   

  10％，100％{   

    -webkit-transform：scale（1）;   

            轉換：scale（1）;   

  }   

}   

@keyframes反彈{   

  0％{   

    -webkit-transform：scale（0）;   

            變換：標度（0）;   

  }   

  5％{   

    -webkit-transform：scale（1.5）;   

            轉換：scale（1.5）;   

  }   

  10％，100％{   

    -webkit-transform：scale（1）;   

            轉換：scale（1）;   

  }   

}   

@ -webkit-keyframes脈沖{   

  0％{   

    -webkit-transform：scale（0.1，0.1）;   

            轉換：scale（0.1，0.1）;   

    不透明度：0.0;   

  }   

  50％{   

    透明度：1.0；   

  }   

  100％{   

    -webkit-transform：scale（3）;   

            轉換：scale（3）;   

    不透明度：0.0;   

  }   

}   

@keyframes脈沖{   

  0％{   

    -webkit-transform：scale（0.1，0.1）;   

            轉換：scale（0.1，0.1）;   

    不透明度：0.0;   

  }   

  50％{   

    透明度：1.0；   

  }   

  100％{   

    -webkit-transform：scale（3）;   

            轉換：scale（3）;   

    不透明度：0.0;   

  }   

}   

@ -webkit-keyframes colorchange {   

  0％{   

    背景：  ＃bec4bc ;   

  }   

  100％{   

    背景：  ＃b5e763 ;   

  }   

}   

@keyframes colorchange {   

  0％{   

    背景：  ＃bec4bc ;   

  }   

  100％{   

    背景：  ＃b5e763 ;   

  }   

}   

.avatar：nth-of-type（1）{   

  背景圖片：  url （“ 128.jpg” ）;   

}   

.avatar：nth-of-type（2）{   

  背景圖片：  url （“ rasagy.jpg” ）;   

}   

.avatar：nth-of-type（3）{   

  背景圖片：  url （“ geeftvorm.jpg” ）;   

}   

.avatar：nth-of-type（4）{   

  背景圖片：  url （“ VinThomas.jpg” ）;   

}   

.avatar：nth-of-type（5）{   

  背景圖片：  url （“ ladylexy.jpg” ）;   

}   

.avatar：nth-of-type（6）{   

  背景圖片：  url （“ claudioguglieri.jpg” ）;   

}   

.avatar：nth-of-type（7）{   

  背景圖片：  url （“ jina.jpg” ）;   

}   

.avatar：nth-of-type（8）{   

  背景圖片：  url （“ peterme.jpg” ）;   

}  9161

感謝各位的閱讀，以上就是“怎么用html5和css3實現動畫分成人物頭像”的內容了，經過本文的學習后，相信大家對怎么用html5和css3實現動畫分成人物頭像這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！