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;
    }
    

      

  • 相关阅读:
    JUC 1
    给定一个随机数生成器randm(),获得randn()
    堆与优先队列
    集合与映射
    二分搜索树
    链表
    栈与队列
    PostgreSQL ALTER TABLE 命令
    postgresql修改自增序列
    SQL 删除重复行,只保留一条记录
  • 原文地址:https://www.cnblogs.com/hyh123/p/5446406.html
Copyright © 2011-2022 走看看