zoukankan      html  css  js  c++  java
  • css3 文字闪动效果

    <div id="container">
    这里查看“<span class="blink">闪烁效果</span>”,ENjoy!
    </div>

    /* 定义keyframe动画,命名为blink */
    
    @keyframes blink{
      0%{opacity: 1;}
      50%{opacity: 1;}
      50.01%{opacity: 0;} /* 注意这里定义50.01%立刻透明度为0,可以设置闪烁效果 */
      100%{opacity: 0;} 
    }
    
    /* 添加兼容性前缀 */
    
    @-webkit-keyframes blink {
        0% { opacity: 1; }
        50% { opacity: 1; }
        50.01% { opacity: 0; }
        100% { opacity: 0; }
    }
    
    @-moz-keyframes blink {
        0% { opacity: 1; }
        50% { opacity: 1; }
        50.01% { opacity: 0; }
        100% { opacity: 0; }
    }
    
    @-ms-keyframes blink {
        0% { opacity: 1; }
        50% { opacity: 1; }
        50.01% { opacity: 0; }
        100% { opacity: 0; }
    }
    
    @-o-keyframes blink {
        0% { opacity: 1; }
        50% { opacity: 1; }
        50.01% { opacity: 0; }
        100% { opacity: 0; }
    }
    
    /* 定义blink类*/
    .blink{
        animation: blink .75s linear infinite;  
        /* 其它浏览器兼容性前缀 */
        -webkit-animation: blink .75s linear infinite;
        -moz-animation: blink .75s linear infinite;
        -ms-animation: blink .75s linear infinite;
        -o-animation: blink .75s linear infinite;
        color: #dd4814;
    }
    

      

  • 相关阅读:
    *1408素数回文数的个数
    *1406单词替换
    1404我家的门牌号
    1402Vigenère密码(Noip2012提高组第1题)
    1401机器翻译(Noip2010提高组第1题)
    AcWing
    模板
    The 2019 Asia Nanchang First Round Online Programming Contest
    模板
    模板
  • 原文地址:https://www.cnblogs.com/hyh123/p/5446406.html
Copyright © 2011-2022 走看看