宜宾网站建设公司

纯CSS3怎么打造好看的加载动画效果

本篇内容介绍了“纯CSS3怎么打造好看的加载动画效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

成都创新互联主要从事网站建设、做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务全南,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

纯css3打造的一款非常炫的加载图。用在需要一定时间加载的地方非常合适。代码非常简单。没有用任何javascript代码。纯css3实现。先上效果图：

纯CSS3怎么打造好看的加载动画效果

实现代码如下：

html代码：

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

  1.   

  2.          

  3.        

  

  •          

  •              

  •              

  •        

    •   

  •    

    •   

    CSS代码：

    CSS Code复制内容到剪贴板

    1. body {   

    2.     padding:0;   

    3.     margin:0;      

    4.     background-color: #2a4e66;   

    5.   overflow: hidden;   

    6. }   

    7.   

    8. .content {   

    9.     width:100%;   

    10.     height:100%;   

    11.     top:0;   

    12.     rightright:0;   

    13.     bottombottom:0;   

    14.     left:0;   

    15.     position:absolute;   

    16. }   

    17.   

    18. .rotate {   

    19.     position: absolute;   

    20.     top: 50%;   

    21.     left: 50%;   

    22.     margin: -93px 0 0 -93px;   

    23.     background: transparent;   

    24.     width: 186px;   

    25.     height: 186px;   

    26.     border-radius: 50%;   

    27.     z-index: 20;   

    28. }   

    29.   

    30. .rotate:after {   

    31.     content: '';       

    32.     position: absolute;   

    33.     box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff;   

    34.     width: 186px;   

    35.     height: 186px;   

    36.     border-radius: 50%;   

    37.     z-index: 10;   

    38. }   

    39.   

    40. span.triangle.base {   

    41.     position: absolute;   

    42.     width: 0;    

    43.     height: 0;   

    44.     margin: 46px 0 0 13px;   

    45.     border-left: 80px solid transparent;   

    46.     border-right: 80px solid transparent;                  

    47.     border-top: 140px solid #eeeeee;   

    48.     transform-origin: 50% 50%;   

    49.     z-index: 20;   

    50. }   

    51.   

    52. span.triangle.no1 {   

    53.     position: absolute;   

    54.     margin: 46px 0 0 13px;   

    55.     width: 0;    

    56.     height: 0;    

    57.     border-left: 80px solid transparent;   

    58.     border-right: 80px solid transparent;                  

    59.     border-bottom: 140px solid #eeeeee;   

    60.     transform-origin: 0 100%;   

    61.     z-index: 20;   

    62. }   

    63.   

    64. span.triangle.no2 {   

    65.     position: absolute;   

    66.     margin: 46px 0 0 13px;   

    67.     width: 0;    

    68.     height: 0;    

    69.     border-left: 80px solid transparent;   

    70.     border-right: 80px solid transparent;                  

    71.     border-bottom: 140px solid #eeeeee;   

    72.     transform-origin: 100% 100%;   

    73.     z-index: 20;   

    74. }   

    75.   

    76. span.triangle.no3 {   

    77.     position: absolute;   

    78.     margin: 46px 0 0 13px;   

    79.     width: 0;    

    80.     height: 0;    

    81.     border-left: 80px solid transparent;   

    82.     border-right: 80px solid transparent;                  

    83.     border-bottom: 140px solid #eeeeee;   

    84.     transform-origin: 50% 100%;   

    85.     z-index: 20;   

    86. }   

    87.   

    88. /* Animation */  

    89.   

    90. .rotate {   

    91.     -webkit-animation: rotateTriangle 3s linear infinite;   

    92.     animation: rotateTriangle 3s linear infinite;   

    93. }   

    94.   

    95. @-webkit-keyframes rotateTriangle {   

    96.     from { -webkit-transform: rotate(0deg); }   

    97.     to { -webkit-transform: rotate(60deg); }   

    98. }   

    99. @keyframes rotateTriangle {   

    100.     from { transform: rotate(0deg); }   

    101.     to { transform: rotate(60deg); }   

    102. }   

    103.   

    104. .rotate:after {   

    105.     -webkit-animation: glowAnimation 3s ease infinite;   

    106.     animation: glowAnimation 3s ease infinite;   

    107. }   

    108.   

    109. @-webkit-keyframes glowAnimation {         

    110.     0% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }   

    111.     10% { box-shadow: 0 0 80px #ffffff, 0 0 20px #ffffff, 0 0 2px #ffffff, inset 0 0 4px #ffffff, inset 0 0 8px #ffffff; }   

    112.     100% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }   

    113. }   

    114. @keyframes glowAnimation {   

    115.     0% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }   

    116.     10% { box-shadow: 0 0 80px #ffffff, 0 0 20px #ffffff, 0 0 2px #ffffff, inset 0 0 4px #ffffff, inset 0 0 8px #ffffff; }   

    117.     100% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }   

    118. }   

    119.   

    120. span.triangle.base {   

    121.     -webkit-animation: scaleTriangleBase 3s linear infinite;   

    122.     animation: scaleTriangleBase 3s linear infinite;   

    123. }   

    124.   

    125. @-webkit-keyframes scaleTriangleBase {   

    126.     from { -webkit-transform: translate(0px,-11px) scale(0.5); }   

    127.     to { -webkit-transform: translate(0px,0px) scale(1); }   

    128.     }   

    129. @keyframes scaleTriangleBase {   

    130.     from { transform: translate(0px,-11px) scale(0.5); }   

    131.     to { transform: translate(0px,0px) scale(1); }   

    132. }   

    133.   

    134. span.triangle.no1 {   

    135.     -webkit-animation: scaleTriangleOne 3s linear infinite;   

    136.     animation: scaleTriangleOne 3s linear infinite;   

    137. }   

    138.   

    139. @-webkit-keyframes scaleTriangleOne {   

    140.     from { -webkit-transform: translate(0px,-46px) scale(0.5); }   

    141.     to { -webkit-transform: translate(-80px,0px) scale(0); }   

    142. }   

    143. @keyframes scaleTriangleOne {   

    144.     from { transform: translate(0px,-46px) scale(0.5); }   

    145.     to { transform: translate(-80px,0px) scale(0); }   

    146. }   

    147.   

    148. span.triangle.no2 {   

    149.     -webkit-animation: scaleTriangleTwo 3s linear infinite;   

    150.     animation: scaleTriangleTwo 3s linear infinite;   

    151. }   

    152.   

    153. @-webkit-keyframes scaleTriangleTwo {   

    154.     from { -webkit-transform: translate(0px,-46px) scale(0.5); }   

    155.     to { -webkit-transform: translate(80px,0px) scale(0); }   

    156. }   

    157. @keyframes scaleTriangleTwo {   

    158.     from { transform: translate(0px,-46px) scale(0.5); }   

    159.     to { transform: translate(80px,0px) scale(0); }   

    160. }   

    161.   

    162. span.triangle.no3 {   

    163.     -webkit-animation: scaleTriangleThree 3s linear infinite;   

    164.     animation: scaleTriangleThree 3s linear infinite;   

    165. }   

    166.   

    167. @-webkit-keyframes scaleTriangleThree {   

    168.     from { -webkit-transform: translate(0px,-116px) scale(0.5); }   

    169.     to { -webkit-transform: translate(0px,-280px) scale(0); }   

    170. }   

    171. @keyframes scaleTriangleThree {   

    172.     from { transform: translate(0px,-116px) scale(0.5); }   

    173.     to { transform: translate(0px,-280px) scale(0); }   

    174. }  

    “纯CSS3怎么打造好看的加载动画效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！


    本文名称：纯CSS3怎么打造好看的加载动画效果
    URL分享：http://ybzwz.com/article/jcioso.html

    其他资讯