• CSS3 闪光效果


    你想做那个遗世独立的人,我知道。


     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="UTF-8">
     5 <title>CSS3-闪光-效果</title>
     6 <style>
     7     .element{
     8       color: #f35626;
     9       background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
    10       -webkit-background-clip: text;
    11       -webkit-text-fill-color: transparent;
    12       -webkit-animation: hue 60s infinite linear;
    13       margin-bottom: 1.5rem;
    14       font-size: 3rem;
    15       font-weight: 100;
    16       line-height: 1;
    17       letter-spacing: -.05em;
    18     }
    19     .animated {
    20       -webkit-animation-duration: 3s;
    21       animation-duration: 3s;
    22       -webkit-animation-fill-mode: both;
    23       animation-fill-mode: both;
    24     }
    25     @-webkit-keyframes flash {
    26       from, 50%, to {
    27         opacity: 1;
    28       }
    29     
    30       25%, 75% {
    31         opacity: 0;
    32       }
    33     }    
    34     @keyframes flash {
    35       from, 50%, to {
    36         opacity: 1;
    37       }
    38     
    39       25%, 75% {
    40         opacity: 0;
    41       }
    42     }    
    43     .flash {
    44       -webkit-animation-name: flash;
    45       animation-name: flash;
    46     }
    47 </style>
    48 </head>
    49 <body>
    50     <div class="element animated flash">flash</div>
    51 </body>
    52 </html>
    View Code

     

  • 相关阅读:
    Ubuntu12下未知驱动器处理
    Octopress博客设置
    Windows下搭建Octopress博客
    在Asp.Net中使用JQueryEasyUI
    SQL查询将列转换成字符串(for xml path)
    IIS7上传出现乱码问题解决
    SqlServer开发利器—SQL Prompt5
    读《打造FaceBook》
    在VS2010中使用Git【图文】
    怎样提高开发效率
  • 原文地址:https://www.cnblogs.com/LindaLiu/p/6336571.html
Copyright © 2020-2023  润新知