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 wobble {
          from {
            -webkit-transform: none;
            transform: none;
          }
        
          15% {
            -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
            transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
          }
        
          30% {
            -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
            transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
          }
        
          45% {
            -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
            transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
          }
        
          60% {
            -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
            transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
          }
        
          75% {
            -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
            transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
          }
        
          to {
            -webkit-transform: none;
            transform: none;
          }
        }    
        @keyframes wobble {
          from {
            -webkit-transform: none;
            transform: none;
          }
        
          15% {
            -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
            transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
          }
        
          30% {
            -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
            transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
          }
        
          45% {
            -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
            transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
          }
        
          60% {
            -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
            transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
          }
        
          75% {
            -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
            transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
          }
        
          to {
            -webkit-transform: none;
            transform: none;
          }
        }
        
        .wobble {
          -webkit-animation-name: wobble;
          animation-name: wobble;
        }
    </style>
    </head>
    <body>
        <div class="element animated wobble">wobble</div>
    </body>
    </html>
    View Code

  • 相关阅读:
    atoi (String to Integer) leetcode
    按层逆遍历一棵树,使用满二叉树存储
    unix网络编程-配置unp.h头文件
    ListView系列(七)——Adapter内的onItemClick监听器四个arg参数
    Windows系统下安装VirtualBox,系统找不到指定路径的做法
    Android Fragment完全解析,关于碎片你所需知道的一切
    【Android开源框架列表】
    fragment报错
    2013 年开源中国 10 大热门 Java 开源项目
    【移动开发】Android中三种超实用的滑屏方式汇总(ViewPager、ViewFlipper、ViewFlow)
  • 原文地址:https://www.cnblogs.com/LindaLiu/p/6336747.html
Copyright © 2011-2022 走看看