zoukankan      html  css  js  c++  java
  • CSS3 脉冲效果

    不回头看,去过自己另外的生活。


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>CSS3-闪光-效果</title>
    <style>
        .element{
          color: #f35626;
          background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          -webkit-animation: hue 60s infinite linear;
          margin-bottom: 1.5rem;
          font-size: 3rem;
          font-weight: 100;
          line-height: 1;
          letter-spacing: -.05em;
        }
        .animated {
          -webkit-animation-duration: 3s;
          animation-duration: 3s;
          -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
        }
    @-webkit-keyframes pulse {
      from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
    
      50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
      }
    
      to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
    }
    
    @keyframes pulse {
      from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
    
      50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
      }
    
      to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
    }
    
    .pulse {
      -webkit-animation-name: pulse;
      animation-name: pulse;
    }
    </style>
    </head>
    <body>
        <div class="element animated pulse">pulse</div>
    </body>
    </html>
    View Code

  • 相关阅读:
    ssh日常优化使用
    Python模块学习
    Python模块学习
    Python模块学习
    利用Python进行端口扫描
    利用Python 发送邮件
    FastDFS分布式文件系统
    Python自动化运维
    Python自动化运维
    网络结构解读之inception系列一:Network in Network
  • 原文地址:https://www.cnblogs.com/LindaLiu/p/6336622.html
Copyright © 2011-2022 走看看