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

  • 相关阅读:
    c# 时间操作
    JAVA file文件操作
    HttpServletRequest 转换成MultipartHttpServletRequest
    【日常笔记】java spring 注解读取文件
    【日常笔记】mybatis 处理 in 语句的使用
    购物车小程序
    Python中的r+和a+
    markdown基本语法
    markdown箭头的处理
    markdown中如何插入公式
  • 原文地址:https://www.cnblogs.com/LindaLiu/p/6336622.html
Copyright © 2011-2022 走看看