如何利用html5和css3动画排列人物头像

本篇内容介绍了“如何利用html5和css3动画排列人物头像”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

禹城ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18982081108（备注：SSL证书合作）期待与您的合作！

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

如何利用html5和css3动画排列人物头像

实现的代码。

html代码：

XML/HTML Code复制内容到剪贴板

  1.   

  2.           

  3.               

  4.               

  5.                   

  6.                       

  7.             

  

  •         

    •   

  •           

  •           

  •           

  •           

  •           

  •           

  •           

  •           

  •           

  •           

  •           

  •           

  •           

  •           

  •           

  •           

  •     

    •   

    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和css3动画排列人物头像
    分享地址：http://cdiso.cn/article/gseccs.html

    其他资讯

    联系小谭

    企业微信号
    友情链接： 成都展柜定制   成都云主机   成都名片印刷   php空间   亮美家   成都服务器托管   德阳定制网站建设   LED显示屏   高端定制网站建设   成都小谭网创广告   

    123ABC 成都网站建设，成都定制网站建设——全心全意建网站公司