• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    一款利用html5和css3动画排列人物头像的实例演示

    　　今天给大家分享一款html5和css3动画排列人物头像演示。这款实例页面初始时，只有中间的美女图，然后出现微笑图，紧接着出现小的人物图，慢慢的以动画的形式排列到页面中形成一个圆环。效果图如下：

    　　实现的代码。

    　　html代码：

    XML/HTML Code复制内容到剪贴板
    1. <div class='stage'>  
    2.         <div class='image'>  
    3.             <img src="https://pbs.twimg.com/profile_images/529224080751202304/UNLt5nUZ_400x400.jpeg">  
    4.             <div class='smiley'>  
    5.                 <svg width="30px" height="30px">  
    6.                     <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-9h3c0,3.3,2.7,6,6,6s6-2.7,6-6h3C24,22,20,26,15,26z" /></svg>  
    7.             </div>  
    8.         </div>  
    9.         <figure class='avatar'>  
    10.         </figure>  
    11.         <figure class='avatar'>  
    12.         </figure>  
    13.         <figure class='avatar'>  
    14.         </figure>  
    15.         <figure class='avatar'>  
    16.         </figure>  
    17.         <figure class='avatar'>  
    18.         </figure>  
    19.         <figure class='avatar'>  
    20.         </figure>  
    21.         <figure class='avatar'>  
    22.         </figure>  
    23.         <figure class='avatar'>  
    24.         </figure>  
    25.     </div>  

    　　css3代码：

    CSS Code复制内容到剪贴板
    1. .stage {   
    2.   position: absolute;   
    3.   top: 0;   
    4.   rightright: 0;   
    5.   bottombottom: 0;   
    6.   left: 0;   
    7.   margin: auto;   
    8.   height: 460px;   
    9.   width: 480px;   
    10. }   
    11.   
    12. .avatar {   
    13.   position: absolute;   
    14.   top: 0;   
    15.   rightright: 0;   
    16.   bottombottom: 0;   
    17.   left: 0;   
    18.   margin: auto;   
    19.   height: 64px;   
    20.   width: 64px;   
    21.   background-repeat: no-repeat;   
    22.   background-size: cover;   
    23.   border-radius: 50%;   
    24.   -webkit-transform-origin: center;   
    25.       -ms-transform-origin: center;   
    26.           transform-origin: center;   
    27. }   
    28. .avatar:before {   
    29.   content: '';   
    30.   position: absolute;   
    31.   top: -8%;   
    32.   rightright: -8%;   
    33.   height: 17.06667px;   
    34.   width: 17.06667px;   
    35.   background: #bec4bc;   
    36.   border-radius: 50%;   
    37.   border: 3px solid white;   
    38. }   
    39. .avatar:nth-of-type(1) {   
    40.   -webkit-animation: ani1 2s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    41.           animation: ani1 2s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    42. }   
    43. @-webkit-keyframes ani1 {   
    44.   0%, 20% {   
    45.     -webkit-transform: rotate(45deg) translate(0) rotate(-45deg);   
    46.             transform: rotate(45deg) translate(0) rotate(-45deg);   
    47.   }   
    48.   34%, 100% {   
    49.     -webkit-transform: rotate(45deg) translate(208px) rotate(-45deg);   
    50.             transform: rotate(45deg) translate(208px) rotate(-45deg);   
    51.   }   
    52. }   
    53. @keyframes ani1 {   
    54.   0%, 20% {   
    55.     -webkit-transform: rotate(45deg) translate(0) rotate(-45deg);   
    56.             transform: rotate(45deg) translate(0) rotate(-45deg);   
    57.   }   
    58.   34%, 100% {   
    59.     -webkit-transform: rotate(45deg) translate(208px) rotate(-45deg);   
    60.             transform: rotate(45deg) translate(208px) rotate(-45deg);   
    61.   }   
    62. }   
    63. .avatar:nth-of-type(2) {   
    64.   -webkit-animation: ani2 2s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    65.           animation: ani2 2s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    66. }   
    67. @-webkit-keyframes ani2 {   
    68.   0%, 20% {   
    69.     -webkit-transform: rotate(90deg) translate(0) rotate(-90deg);   
    70.             transform: rotate(90deg) translate(0) rotate(-90deg);   
    71.   }   
    72.   34%, 100% {   
    73.     -webkit-transform: rotate(90deg) translate(208px) rotate(-90deg);   
    74.             transform: rotate(90deg) translate(208px) rotate(-90deg);   
    75.   }   
    76. }   
    77. @keyframes ani2 {   
    78.   0%, 20% {   
    79.     -webkit-transform: rotate(90deg) translate(0) rotate(-90deg);   
    80.             transform: rotate(90deg) translate(0) rotate(-90deg);   
    81.   }   
    82.   34%, 100% {   
    83.     -webkit-transform: rotate(90deg) translate(208px) rotate(-90deg);   
    84.             transform: rotate(90deg) translate(208px) rotate(-90deg);   
    85.   }   
    86. }   
    87. .avatar:nth-of-type(3) {   
    88.   -webkit-animation: ani3 2s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    89.           animation: ani3 2s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    90. }   
    91. @-webkit-keyframes ani3 {   
    92.   0%, 20% {   
    93.     -webkit-transform: rotate(135deg) translate(0) rotate(-135deg);   
    94.             transform: rotate(135deg) translate(0) rotate(-135deg);   
    95.   }   
    96.   34%, 100% {   
    97.     -webkit-transform: rotate(135deg) translate(208px) rotate(-135deg);   
    98.             transform: rotate(135deg) translate(208px) rotate(-135deg);   
    99.   }   
    100. }   
    101. @keyframes ani3 {   
    102.   0%, 20% {   
    103.     -webkit-transform: rotate(135deg) translate(0) rotate(-135deg);   
    104.             transform: rotate(135deg) translate(0) rotate(-135deg);   
    105.   }   
    106.   34%, 100% {   
    107.     -webkit-transform: rotate(135deg) translate(208px) rotate(-135deg);   
    108.             transform: rotate(135deg) translate(208px) rotate(-135deg);   
    109.   }   
    110. }   
    111. .avatar:nth-of-type(4) {   
    112.   -webkit-animation: ani4 2s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    113.           animation: ani4 2s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    114. }   
    115. @-webkit-keyframes ani4 {   
    116.   0%, 20% {   
    117.     -webkit-transform: rotate(180deg) translate(0) rotate(-180deg);   
    118.             transform: rotate(180deg) translate(0) rotate(-180deg);   
    119.   }   
    120.   34%, 100% {   
    121.     -webkit-transform: rotate(180deg) translate(208px) rotate(-180deg);   
    122.             transform: rotate(180deg) translate(208px) rotate(-180deg);   
    123.   }   
    124. }   
    125. @keyframes ani4 {   
    126.   0%, 20% {   
    127.     -webkit-transform: rotate(180deg) translate(0) rotate(-180deg);   
    128.             transform: rotate(180deg) translate(0) rotate(-180deg);   
    129.   }   
    130.   34%, 100% {   
    131.     -webkit-transform: rotate(180deg) translate(208px) rotate(-180deg);   
    132.             transform: rotate(180deg) translate(208px) rotate(-180deg);   
    133.   }   
    134. }   
    135. .avatar:nth-of-type(5) {   
    136.   -webkit-animation: ani5 2s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    137.           animation: ani5 2s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    138. }   
    139. @-webkit-keyframes ani5 {   
    140.   0%, 20% {   
    141.     -webkit-transform: rotate(225deg) translate(0) rotate(-225deg);   
    142.             transform: rotate(225deg) translate(0) rotate(-225deg);   
    143.   }   
    144.   34%, 100% {   
    145.     -webkit-transform: rotate(225deg) translate(208px) rotate(-225deg);   
    146.             transform: rotate(225deg) translate(208px) rotate(-225deg);   
    147.   }   
    148. }   
    149. @keyframes ani5 {   
    150.   0%, 20% {   
    151.     -webkit-transform: rotate(225deg) translate(0) rotate(-225deg);   
    152.             transform: rotate(225deg) translate(0) rotate(-225deg);   
    153.   }   
    154.   34%, 100% {   
    155.     -webkit-transform: rotate(225deg) translate(208px) rotate(-225deg);   
    156.             transform: rotate(225deg) translate(208px) rotate(-225deg);   
    157.   }   
    158. }   
    159. .avatar:nth-of-type(6) {   
    160.   -webkit-animation: ani6 2s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    161.           animation: ani6 2s 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    162. }   
    163. @-webkit-keyframes ani6 {   
    164.   0%, 20% {   
    165.     -webkit-transform: rotate(270deg) translate(0) rotate(-270deg);   
    166.             transform: rotate(270deg) translate(0) rotate(-270deg);   
    167.   }   
    168.   34%, 100% {   
    169.     -webkit-transform: rotate(270deg) translate(208px) rotate(-270deg);   
    170.             transform: rotate(270deg) translate(208px) rotate(-270deg);   
    171.   }   
    172. }   
    173. @keyframes ani6 {   
    174.   0%, 20% {   
    175.     -webkit-transform: rotate(270deg) translate(0) rotate(-270deg);   
    176.             transform: rotate(270deg) translate(0) rotate(-270deg);   
    177.   }   
    178.   34%, 100% {   
    179.     -webkit-transform: rotate(270deg) translate(208px) rotate(-270deg);   
    180.             transform: rotate(270deg) translate(208px) rotate(-270deg);   
    181.   }   
    182. }   
    183. .avatar:nth-of-type(7) {   
    184.   -webkit-animation: ani7 2s 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    185.           animation: ani7 2s 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    186. }   
    187. @-webkit-keyframes ani7 {   
    188.   0%, 20% {   
    189.     -webkit-transform: rotate(315deg) translate(0) rotate(-315deg);   
    190.             transform: rotate(315deg) translate(0) rotate(-315deg);   
    191.   }   
    192.   34%, 100% {   
    193.     -webkit-transform: rotate(315deg) translate(208px) rotate(-315deg);   
    194.             transform: rotate(315deg) translate(208px) rotate(-315deg);   
    195.   }   
    196. }   
    197. @keyframes ani7 {   
    198.   0%, 20% {   
    199.     -webkit-transform: rotate(315deg) translate(0) rotate(-315deg);   
    200.             transform: rotate(315deg) translate(0) rotate(-315deg);   
    201.   }   
    202.   34%, 100% {   
    203.     -webkit-transform: rotate(315deg) translate(208px) rotate(-315deg);   
    204.             transform: rotate(315deg) translate(208px) rotate(-315deg);   
    205.   }   
    206. }   
    207. .avatar:nth-of-type(8) {   
    208.   -webkit-animation: ani8 2s 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    209.           animation: ani8 2s 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    210. }   
    211. @-webkit-keyframes ani8 {   
    212.   0%, 20% {   
    213.     -webkit-transform: rotate(360deg) translate(0) rotate(-360deg);   
    214.             transform: rotate(360deg) translate(0) rotate(-360deg);   
    215.   }   
    216.   34%, 100% {   
    217.     -webkit-transform: rotate(360deg) translate(208px) rotate(-360deg);   
    218.             transform: rotate(360deg) translate(208px) rotate(-360deg);   
    219.   }   
    220. }   
    221. @keyframes ani8 {   
    222.   0%, 20% {   
    223.     -webkit-transform: rotate(360deg) translate(0) rotate(-360deg);   
    224.             transform: rotate(360deg) translate(0) rotate(-360deg);   
    225.   }   
    226.   34%, 100% {   
    227.     -webkit-transform: rotate(360deg) translate(208px) rotate(-360deg);   
    228.             transform: rotate(360deg) translate(208px) rotate(-360deg);   
    229.   }   
    230. }   
    231. .avatar:nth-of-type(4):before, .avatar:nth-of-type(2):before {   
    232.   -webkit-animation: bounce 3s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    233.           animation: bounce 3s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    234. }   
    235. .avatar:nth-of-type(7):before {   
    236.   -webkit-animation: bounce 3s 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    237.           animation: bounce 3s 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    238. }   
    239. .avatar:nth-of-type(3):before {   
    240.   -webkit-animation: bounce 3s 2.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 2.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    241.           animation: bounce 3s 2.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 2.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    242. }   
    243. .avatar:nth-of-type(1):before {   
    244.   -webkit-animation: bounce 3s 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    245.           animation: bounce 3s 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    246. }   
    247. .avatar:nth-of-type(6):before {   
    248.   -webkit-animation: bounce 3s 3.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 3.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    249.           animation: bounce 3s 3.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 3.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    250. }   
    251. .avatar:nth-of-type(5):before {   
    252.   -webkit-animation: bounce 3s 3.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 3.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    253.           animation: bounce 3s 3.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 3.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    254. }   
    255. .avatar:nth-of-type(8):before {   
    256.   -webkit-animation: bounce 3s 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    257.           animation: bounce 3s 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, colorchange 1s 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    258. }   
    259.   
    260. .image {   
    261.   position: absolute;   
    262.   top: 0;   
    263.   rightright: 0;   
    264.   bottombottom: 0;   
    265.   left: 0;   
    266.   margin: auto;   
    267.   height: 220px;   
    268.   width: 220px;   
    269. }   
    270. .image img {   
    271.   position: relative;   
    272.   height: 220px;   
    273.   width: 220px;   
    274.   border-radius: 50%;   
    275.   z-index: 1;   
    276. }   
    277. .image:before {   
    278.   position: absolute;   
    279.   top: 0;   
    280.   rightright: 0;   
    281.   bottombottom: 0;   
    282.   left: 0;   
    283.   margin: auto;   
    284.   content: '';   
    285.   height: 100%;   
    286.   width: 100%;   
    287.   background: #f9fff7;   
    288.   border: 3px solid #e7f5d1;   
    289.   border-radius: 50%;   
    290.   -webkit-animation: pulse 1s 1.4s ease-out;   
    291.           animation: pulse 1s 1.4s ease-out;   
    292.   -webkit-animation-iteration-count: 3;   
    293.           animation-iteration-count: 3;   
    294. }   
    295. .image .smiley {   
    296.   position: absolute;   
    297.   top: -8px;   
    298.   rightright: -8px;   
    299.   height: 64px;   
    300.   width: 64px;   
    301.   background: #b5e763;   
    302.   border-radius: 50%;   
    303.   border: 5px solid white;   
    304.   -webkit-animation: bounce 5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    305.           animation: bounce 5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    306.   -webkit-transform-origin: center;   
    307.       -ms-transform-origin: center;   
    308.           transform-origin: center;   
    309.   z-index: 1;   
    310. }   
    311. .image .smiley svg {   
    312.   position: absolute;   
    313.   top: 0;   
    314.   rightright: 0;   
    315.   bottombottom: 0;   
    316.   left: 0;   
    317.   margin: auto;   
    318.   -webkit-animation: bounce 5s 0.075s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    319.           animation: bounce 5s 0.075s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;   
    320. }   
    321.   
    322. @-webkit-keyframes bounce {   
    323.   0% {   
    324.     -webkit-transform: scale(0);   
    325.             transform: scale(0);   
    326.   }   
    327.   5% {   
    328.     -webkit-transform: scale(1.5);   
    329.             transform: scale(1.5);   
    330.   }   
    331.   10%, 100% {   
    332.     -webkit-transform: scale(1);   
    333.             transform: scale(1);   
    334.   }   
    335. }   
    336.   
    337. @keyframes bounce {   
    338.   0% {   
    339.     -webkit-transform: scale(0);   
    340.             transform: scale(0);   
    341.   }   
    342.   5% {   
    343.     -webkit-transform: scale(1.5);   
    344.             transform: scale(1.5);   
    345.   }   
    346.   10%, 100% {   
    347.     -webkit-transform: scale(1);   
    348.             transform: scale(1);   
    349.   }   
    350. }   
    351. @-webkit-keyframes pulse {   
    352.   0% {   
    353.     -webkit-transform: scale(0.1, 0.1);   
    354.             transform: scale(0.1, 0.1);   
    355.     opacity: 0.0;   
    356.   }   
    357.   50% {   
    358.     opacity: 1.0;   
    359.   }   
    360.   100% {   
    361.     -webkit-transform: scale(3);   
    362.             transform: scale(3);   
    363.     opacity: 0.0;   
    364.   }   
    365. }   
    366. @keyframes pulse {   
    367.   0% {   
    368.     -webkit-transform: scale(0.1, 0.1);   
    369.             transform: scale(0.1, 0.1);   
    370.     opacity: 0.0;   
    371.   }   
    372.   50% {   
    373.     opacity: 1.0;   
    374.   }   
    375.   100% {   
    376.     -webkit-transform: scale(3);   
    377.             transform: scale(3);   
    378.     opacity: 0.0;   
    379.   }   
    380. }   
    381. @-webkit-keyframes colorchange {   
    382.   0% {   
    383.     background: #bec4bc;   
    384.   }   
    385.   100% {   
    386.     background: #b5e763;   
    387.   }   
    388. }   
    389. @keyframes colorchange {   
    390.   0% {   
    391.     background: #bec4bc;   
    392.   }   
    393.   100% {   
    394.     background: #b5e763;   
    395.   }   
    396. }   
    397. .avatar:nth-of-type(1) {   
    398.   background-image: url("128.jpg");   
    399. }   
    400.   
    401. .avatar:nth-of-type(2) {   
    402.   background-image: url("rasagy.jpg");   
    403. }   
    404.   
    405. .avatar:nth-of-type(3) {   
    406.   background-image: url("geeftvorm.jpg");   
    407. }   
    408.   
    409. .avatar:nth-of-type(4) {   
    410.   background-image: url("VinThomas.jpg");   
    411. }   
    412.   
    413. .avatar:nth-of-type(5) {   
    414.   background-image: url("ladylexy.jpg");   
    415. }   
    416.   
    417. .avatar:nth-of-type(6) {   
    418.   background-image: url("claudioguglieri.jpg");   
    419. }   
    420.   
    421. .avatar:nth-of-type(7) {   
    422.   background-image: url("jina.jpg");   
    423. }   
    424.   
    425. .avatar:nth-of-type(8) {   
    426.   background-image: url("peterme.jpg");   
    427. }  

    　　好了以上就是今天介绍的html5和css3动画排列人物头像代码演示，谢谢阅读，希望能帮到大家，请继续关注脚本之家，我们会努力分享更多优秀的文章。

    上一篇：HTML5中drawImage用法分析
    下一篇：2014年圣诞节倒计时网页的制作过程
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    一款利用html5和css3动画排列人物头像的实例演示 一款,利用,html5,和,css3,动画,