编纂自身的代码库,与超酷例子

编排本身的代码库:CSS3 常用动画的贯彻

2017/08/16 · CSS ·
动画

原文出处: 守候你   

我们用到的css3动画属性有animation和transform,transform主要针对动画弹指间,animation则针对动画的流水生产线。

先是说说包容性的标题吗,首要说说IE浏览器的包容性。IE10+。

二个动态小导航栏(美观的,用C3)(不注重js,点击小图切换大的背景图)

<!DOCTYPE HTML>
<htmllang=”en-US”>
    <head>
        <meta charset=”UTF-8″>
     <title>CSS3 Full Background Slider </title>
        <style type=”text/css”>
            @importurl(“”);
           
@importurl(“”);
            html,body {
            height: 100%;
            }
            /*设置背景图片全屏显示,并且居中*/
            img.bg{
            min-height: 100%;
            min-width: 1024px;
            width: 100%;
            height: auto !important;
            height: 100%;
            position: fixed;
            top: 0;
            left: 50%;
            z-index:1;
              -webkit-transform: translateX(-50%);
              -moz-transform: translateX(-50%);
              -o-transform: translateX(-50%);
              -ms-transform: translateX(-50%);
            }
            /*安装背景图片从左向右移入展现的卡通片效果*/
            /* Slide Left */

            @-webkit-keyframes ‘slideLeft’ {
             0% { left: -500px; }
             100% { left: 0; }
            }
            @-moz-keyframes ‘slideLeft’ {
             0% { left: -500px; }
             100% { left: 0; }
            }
            @-o-keyframes ‘slideLeft’ {
             0% { left: -500px; }
             100% { left: 0; }
            }
            @-ms-keyframes ‘slideLeft’ {
             0% { left: -500px; }
             100% { left: 0; }
            }
            @keyframes ‘slideLeft’ {
             0% { left: -500px; }
             100% { left: 0; }
            }
            /*设置背景图像从尾部向顶部移入的卡通效果*/
             /* Slide Bottom */

            @-webkit-keyframes ‘slideBottom’ {
             0% { top: 350px; }
             100% { top: 0; }
            }
            @-moz-keyframes ‘slideBottom’ {
             0% { top: 350px; }
             100% { top: 0; }
            }
            @-ms-keyframes ‘slideBottom’ {
             0% { top: 350px; }
             100% { top: 0; }
            }
            @-o-keyframes ‘slideBottom’ {
编纂自身的代码库,与超酷例子。             0% { top: 350px; }
             100% { top: 0; }
            }
            @keyframes ‘slideBottom’ {
             0% { top: 350px; }
             100% { top: 0; }
            }
            /*设置背景图片由小到大放大动画效果*/
            /* Zoom In */

            @-webkit-keyframes ‘zoomIn’ {
             0% { -webkit-transform: scale(0.1); }
             100% { -webkit-transform: none; }
            }
            @-moz-keyframes ‘zoomIn’ {
             0% { -moz-transform: scale(0.1); }
             100% { -moz-transform: none; }
            }
            @-ms-keyframes ‘zoomIn’ {
             0% { -ms-transform: scale(0.1); }
             100% { -ms-transform: none; }
            }
            @-o-keyframes ‘zoomIn’ {
             0% { -o-transform: scale(0.1); }
             100% { -o-transform: none; }
            }
            @keyframes ‘zoomIn’ {
             0% { transform: scale(0.1); }
             100% { transform: none; }
            }
            /*安装背景图像由大到小减弱动画效果*/
            /* Zoom Out */

            @-webkit-keyframes ‘zoomOut’ {
             0% { -webkit-transform: scale(2); }
             100% { -webkit-transform: none; }
            }
            @-moz-keyframes ‘zoomOut’ {
             0% { -moz-transform: scale(2); }
             100% { -moz-transform: none; }
            }
            @-ms-keyframes ‘zoomOut’ {
             0% { -ms-transform: scale(2); }
             100% { -ms-transform: none; }
            }
            @-o-keyframes ‘zoomOut’ {
             0% { -o-transform: scale(2); }
             100% { -o-transform: none; }
            }
            @keyframes ‘zoomOut’ {
             0% { transform: scale(2); }
             100% { transform: none; }
            }
            /*背景图像旋转出现动画效果*/
            /* Rotate */

            @-webkit-keyframes ‘rotate’ {
             0% { -webkit-transform: rotate(-360deg) scale(0.1); }
             100% { -webkit-transform: none; }
            }
            @-moz-keyframes ‘rotate’ {
             0% { -moz-transform: rotate(-360deg) scale(0.1); }
             100% { -moz-transform: none; }
            }
            @-ms-keyframes ‘rotate’ {
             0% { -ms-transform: rotate(-360deg) scale(0.1); }
             100% { -ms-transform: none; }
            }
            @-o-keyframes ‘rotate’ {
             0% { -o-transform: rotate(-360deg) scale(0.1); }
             100% { -o-transform: none; }
            }
            @keyframes ‘rotate’ {
             0% { transform: rotate(-360deg) scale(0.1); }
             100% { transform: none; }
            }
            /*设置背景图像不显得动画效果*/
            @-webkit-keyframes ‘notTarget’ {
             0% { z-index: 75; }
             100% { z-index: 75; }
            }
            @-moz-keyframes ‘notTarget’ {
             0% { z-index: 75; }
             100% { z-index: 75; }
            }
            @-ms-keyframes ‘notTarget’ {
             0% { z-index: 75; }
             100% { z-index: 75; }
            }
            @-o-keyframes ‘notTarget’ {
             0% { z-index: 75; }
             100% { z-index: 75; }
            }
            @keyframes ‘notTarget’ {
             0% { z-index: 75; }
             100% { z-index: 75; }
            }

            .slider {
            position: absolute;
            width: 100%;
            text-align: center;
            z-index: 9999;
            bottom: 100px;
            }
            .slider li {
            display: inline-block;
            width: 172px;
            height: 133px;
            margin-right: 15px;
            }
            .slider a {
            display: inline-block;
            width: 170px;
            padding-top: 70px;
            position: relative;
            cursor: pointer;
            border: 2px solid #fff;
            border-radius: 5px;
            vertical-align: top;
            color: #fff;
            text-decoration: none;
            font-size: 22px;
            font-family: ‘Yesteryear’, cursive;
            text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8),-2px -2px
1px rgba(0, 0, 0, 0.3),-3px -3px 1px rgba(0, 0, 0, 0.3);
            }
            /*设置区别列表的背景观*/
            .slider li:nth-of-type(1){
            background-color: #02646e;
            }
            .slider li:nth-of-type(2){
            background-color: #eb0837;
            }
            .slider li:nth-of-type(3){
            background-color: #67b374;
            }   
            .slider li:nth-of-type(4){
            background-color: #e6674a;
            }   
            .slider li:nth-of-type(5){
            background-color: #e61061;
            }
            /*设置缩略图形状*/
            a::after{
            content:””;
            display: block;
            height: 120px;
            width: 120px;
            border: 5px solid #fff;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            margin-left: -60px;
            z-index: 9999;
            top: -80px;
            }
            /*安装缩略图背景图像*/
            li:nth-of-type(1) a::after{
            background:
url()
no-repeat center;
            }
            li:nth-of-type(2) a::after{
            background:
url()
no-repeat center;
            }
            li:nth-of-type(3) a::after{
            background:
url()
no-repeat center;
            }
            li:nth-of-type(4) a::after{
            background:
url()
no-repeat center;
            }
            li:nth-of-type(5) a::after{
            background:
url()
no-repeat center;
            }
            /*给缩略图添加蒙板效应*/
            a::before{
            content:””;
            display: block;
            height: 120px;
            width: 120px;
            border: 5px solid #fff;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            margin-left: -60px;
            z-index: 99999;
            top: -80px;
            background: rgba(0,0,0,0.3);
            }
            /*鼠标悬浮时,修改缩略图蒙板反射率*/
            a:hover:before{
            opacity:0;
            }
            /*点击综略图,切换背景图*/
            /*背景图从左向右出现*/
            .slideLeft:target{
             z-index: 100;
             -webkit-animation-name: slideLeft;
             -webkit-animation-duration: 1s;
             -webkit-animation-iteration-count: 1;
             -moz-animation-name: slideLeft;
             -moz-animation-duration: 1s;
             -moz-animation-iteration-count: 1;
             -ms-animation-name: slideLeft;
             -ms-animation-duration: 1s;
             -ms-animation-iteration-count: 1;
             -o-animation-name: slideLeft;
             -o-animation-duration: 1s;
             -o-animation-iteration-count: 1;
             animation-name: slideLeft;
             animation-duration: 1s;
             animation-iteration-count: 1;
            }
            /*背景图从下向上现身*/
            .slideBottom:target{
             z-index: 100;

             -webkit-animation-name: slideBottom;
             -webkit-animation-duration: 1s;
             -webkit-animation-iteration-count: 1;
             -moz-animation-name: slideBottom;
             -moz-animation-duration: 1s;
             -moz-animation-iteration-count: 1;
             -ms-animation-name: slideBottom;
             -ms-animation-duration: 1s;
             -ms-animation-iteration-count: 1;
             -o-animation-name: slideBottom;
             -o-animation-duration: 1s;
             -o-animation-iteration-count: 1;
            animation-name: slideBottom;
             animation-duration: 1s;
             animation-iteration-count: 1;
            }
            /*背景图由小到大出现*/
            .zoomIn:target{
             z-index: 100;
             -webkit-animation-name: zoomIn;
             -webkit-animation-duration: 1s;
             -webkit-animation-iteration-count: 1;
             -moz-animation-name: zoomIn;
             -moz-animation-duration: 1s;
             -moz-animation-iteration-count: 1;
             -ms-animation-name: zoomIn;
             -ms-animation-duration: 1s;
             -ms-animation-iteration-count: 1;
             -o-animation-name: zoomIn;
             -o-animation-duration: 1s;
             -o-animation-iteration-count: 1;
             animation-name: zoomIn;
             animation-duration: 1s;
             animation-iteration-count: 1;
            }

            /*背景图由大到小出现*/
            .zoomOut:target{
             z-index: 100;
             -webkit-animation-name: zoomOut;
             -webkit-animation-duration: 1s;
             -webkit-animation-iteration-count: 1;
             -moz-animation-name: zoomOut;
             -moz-animation-duration: 1s;
             -moz-animation-iteration-count: 1;
             -ms-animation-name: zoomOut;
             -ms-animation-duration: 1s;
             -ms-animation-iteration-count: 1;
             -o-animation-name: zoomOut;
             -o-animation-duration: 1s;
             -o-animation-iteration-count: 1;
             animation-name: zoomOut;
             animation-duration: 1s;
             animation-iteration-count: 1;
            }

            /*背景图旋转出现*/
            .rotate:target{
             z-index: 100;
             -webkit-animation-name: rotate;
             -webkit-animation-duration: 1s;
             -webkit-animation-iteration-count: 1;
             -moz-animation-name: rotate;
             -moz-animation-duration: 1s;
             -moz-animation-iteration-count: 1;
             -ms-animation-name: rotate;
             -ms-animation-duration: 1s;
             -ms-animation-iteration-count: 1;
             -o-animation-name: rotate;
             -o-animation-duration: 1s;
             -o-animation-iteration-count: 1;
             animation-name: rotate;
             animation-duration: 1s;
             animation-iteration-count: 1;
            }
            /*安装不显得的背景图层级*/
            /* Not Target */

            .bg:not(:target){
             -webkit-animation-name: notTarget;
             -webkit-animation-duration: 1s;
             -webkit-animation-iteration-count: 1;
             -moz-animation-name: notTarget;
             -moz-animation-duration: 1s;
             -moz-animation-iteration-count: 1;
             -ms-animation-name: notTarget;
             -ms-animation-duration: 1s;
             -ms-animation-iteration-count: 1;
             -o-animation-name: notTarget;
             -o-animation-duration: 1s;
             -o-animation-iteration-count: 1;
             animation-name: notTarget;
             animation-duration: 1s;
             animation-iteration-count: 1;
            }
        </style>
    </head>
    <body>
        <div class=”slider”>
            <ul class=”clearfix”>
             <li><a href=”#bg1″>Hipster Fashion Haircut
</a></li>
          <li><a href=”#bg2″>Cloud Computing Services
…</a></li>
          <li><a href=”#bg3″>My haire is sooo
fantastic!</a></li>
          <li><a href=”#bg4″>Eat healthy &
excersice!</a></li>
          <li><a href=”#bg5″>Lips so kissable I could die
…</a></li>
         </ul>
        </div>
        <img
src=””
alt=”” class=”bg slideLeft” id=”bg1″ />
        <img
src=””
alt=”” class=”bg slideBottom” id=”bg2″ />
        <img
src=””
alt=”” class=”bg zoomIn” id=”bg3″ />
        <img
src=””
alt=”” class=”bg zoomOut” id=”bg4″ />
        <img
src=””
alt=”” class=”bg rotate” id=”bg5″ />
    </body>
</html>

 

1.前言

在月尾的时候,发了CSS3热身实战–过渡与动画(完成炫酷下拉,手风琴,无缝滚动)。js的代码库也发过三回,两篇小说。在此之前也写了css3的热身实战,既然热身完了,是时候初始封装css3的代码库了,比较起js的代码库,css3的代码库的逻辑性就进一步简便易行了!能够说假如打上注释和一张效果图就足以让大家通晓了内部的原理了!
自作者写代码库的时候,动画效果主假使参考了多少个开源项目,nec,hover.css,animate.css这八个门类的身分万分的高,提议大家去探听。
源码已经嵌入github下边了,大家能够去看,也欢迎大家star一下!ec-css。

自家提议那八个库并不是叫大家去拿人家的代码,稍微修改一下,可能直接拷贝到自个儿的品种上,然后固然得自个儿的品种。笔者是让大家去看别人的代码,学习人家的落到实处情势如故动画片效果,然后再用本人的点子贯彻,当然假设把外人的体系,增加和删除改查到改头换面的程度,这么些作者个人觉得可以说是协调的类型了!强调一点,不要直接复制外人的代码,放到本人的项目上,然后正是本人开发的,这是不爱抚外人的收获,对自个儿的技术水平提高的协助也较少。小编写小说,即便也会提交代码,不过本人的目标是提供我们参考的,希望给让我们学习到知识依旧发散思维,写出更好的著述。以前也说过,我写文章的目的是授人以渔,不是授人以鱼

首先transform的值有

效率凸显的css代码:

 

声明

1.底下将会看出很七个近乎美高梅开户网址 1诸如此类的矩形,都以span标签,样式都是交给的css

span{ cursor: pointer; height: 40px; line-height: 40px; text-align:
center; display: inline-block; color: #333; background: #ccc;
min-width: 80px; padding: 0 10px; margin: 10px; }

1
2
3
4
5
6
7
8
9
10
11
12
span{
        cursor: pointer;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: inline-block;
        color: #333;
        background: #ccc;
        min-width: 80px;
        padding: 0 10px;
        margin: 10px;
    }

2.有关class命超格局,l代表left,r代表right,t代表top,b代表bottom,c代表center,m代表middle。切记

小说相比长,可是说得正是两点,大家看得也应有会快捷
1.写出一部分hover动画和预设动画的周转效果,并且贴出代码
2.发觉多少个卡通组成,和增加无限动画,反向动画,会有不同的效力,并且一而再研究,看下能还是不可能研商出不同的事物!

none 定义不进行转换。  
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。  
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4×4 矩阵。  
translate(x,y) 定义 2D 转换。  
translate3d(x,y,z) 定义 3D 转换。  
translateX(x) 定义转换,只是用 X 轴的值。  
translateY(y) 定义转换,只是用 Y 轴的值。  
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。  
scale(x,y) 定义 2D 缩放转换。  
scale3d(x,y,z) 定义 3D 缩放转换。  
scaleX(x) 通过设置 X 轴的值来定义缩放转换。  
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。  
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。  
rotate(angle) 定义 2D 旋转,在参数中规定角度。  
rotate3d(x,y,z,angle) 定义 3D 旋转。  
rotateX(angle) 定义沿着 X 轴的 3D 旋转。  
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。  
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。  
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。  
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。  
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。  
perspective(n) 为 3D 转换元素定义透视视图。  

.button {
margin: .4em;
padding: 1em;
cursor: pointer;
background: #e1e1e1;
text-decoration: none;
color: #666666;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

3D立体旋转导航栏(使用变形及动态效果)

<!doctype html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
 <title>制作3D旋转导航</title>
 <style>
        @import url(“”);
        /*引入本地字体文件*/
        @font-face {
            font-family: ‘sansationregular’;
            src:
url(”);
            src:
url(”)
format(”),
           
url(”)
format(‘woff’),
           
url(”)
format(‘truetype’),
           
url(”)
format(‘svg’);
            font-weight: normal;
            font-style: normal;
            }
        body {
         background-color:#edecec;
        }
       
        /* basic menu styles */
        .nav-menu {
          display: block;
         background: #74adaa;
         width:950px;
         margin: 50px auto 150px;
        }
        .nav-menu > li {
          display: inline;
          float:left;   
         border-right:1px solid #94c0be;
        }
        .nav-menu > li:last-child {
          border-right: none;
        }
        .nav-menu li a {
          color: #fff;
         display: block;
         text-decoration: none;
          /*调用本地字体*/
         font-famliy: ‘sansationregular’;
          -webkit-font-smoothing: antialiased;
         -moz-font-smoothing: antialiased;
         font-smoothing: antialiased;
         text-transform: capitalize;
         overflow: visible;
         line-height: 20px;
         font-size: 20px;
         padding: 15px 30px 15px 31px;   
        }
       
       
        .three-d {
          /* 设置3D舞台布景 */
            perspective:200px;
            -o-perspective:200px;
         -webkit-perspective:200px;
         -moz-perspective:200px;
         -ms-perspective:200px;

          /*设置3D舞台布景过渡效果*/
            transition:all 0.7s linear;
            -o-transition:all 0.7s linear;
         -ms-transition:all 0.7s linear;
         -moz-transition:all 0.7s linear;
         -webkit-transition:all 0.7s linear;
          position: relative;
        }
       
        .three-d:not(.active):hover {
          cursor: pointer;
        }
       
        /*给不是眼前情形的3D舞台的悬浮与聚焦状态设置变形效果*/
        .three-d:not(.active):hover .three-d-box,
        .three-d:not(.active):focus .three-d-box {
        transform:translateZ(-25px) rotateX(90deg);
         -o-transform:translateZ(-25px) rotateX(90deg);
         -ms-transform:translateZ(-25px) rotateX(90deg);
         -moz-transform:translateZ(-25px) rotateX(90deg);
         -webkit-transform:translateZ(-25px) rotateX(90deg);   
       
        }
       
        .three-d-box {
          /*给3D舞莱比锡“.three-d-box”设置过渡与变形效果*/
            transform:translateZ(-25px);
         -o-transform:translateZ(-25px);
         -ms-transform:translateZ(-25px);
         -moz-transform:translateZ(-25px);
         -webkit-transform:translateZ(-25px);

         transition:all .3s ease-out;
         -o-transition:all .3s ease-out;
         -ms-transition:all .3s ease-out;
         -moz-transition:all .3s ease-out;
         -webkit-transition:all .3s ease-out;
           
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-pointer-events: none;
            -moz-pointer-events: none;
            -ms-pointer-events: none;
            -o-pointer-events: none;
            pointer-events: none;
            position: absolute;
                top: 0;
             left: 0;
         display: block;
         width: 100%;
         height: 100%;
        }
       
        /*给导航设置3D前,与3D后变形效果*/
        .front {
         transform:rotateX(0deg) translateZ(25px);
         -ms-transform:rotateX(0deg) translateZ(25px);
         -o-transform:rotateX(0deg) translateZ(25px);
         -moz-transform:rotateX(0deg) translateZ(25px);
         -webkit-transform:rotateX(0deg) translateZ(25px);
         }
       
        .back {
         transform:rotateX(-90deg) translateZ(25px);
         -ms-transform:rotateX(-90deg) translateZ(25px);
         -o-transform:rotateX(-90deg) translateZ(25px);
         -moz-transform:rotateX(-90deg) translateZ(25px);
         -webkit-transform:rotateX(-90deg) translateZ(25px);
          color: #FFE7C4;
        }
       
        .front, .back {
          display: block;
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
         background: #74adaa;
         padding: 15px 30px 15px 31px; 
         color: white;
         -webkit-pointer-events: none;
          -moz-pointer-events: none;
          -ms-pointer-events: none;
          -o-pointer-events: none;
          pointer-events: none;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
        }
        /*安装导航当前处境与悬浮状态下的背景效果*/
        .nav-menu li .active .front,
        .nav-menu li .active .back,
        .nav-menu li a:hover .front,
        .nav-menu li a:hover .back {
            background-color: #51938F;
         background-size: 5px 5px;
         background-position: 0 0, 30px 30px;
         background-image: -webit-linear-gradient(45deg, #478480 25%,
transparent 25%, transparent 75%, #478480 75%, #478480),
linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%,
#478480 75%, #478480);
     background-image: -moz-linear-gradient(45deg, #478480 25%,
transparent 25%, transparent 75%, #478480 75%, #478480),
linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%,
#478480 75%, #478480);
    background-image: -ms-linear-gradient(45deg, #478480 25%,
transparent 25%, transparent 75%, #478480 75%, #478480),
linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%,
#478480 75%, #478480);
     background-image: -o-linear-gradient(45deg, #478480 25%,
transparent 25%, transparent 75%, #478480 75%, #478480),
linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%,
#478480 75%, #478480);
     background-image: linear-gradient(45deg, #478480 25%,
transparent 25%, transparent 75%, #478480 75%, #478480),
linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%,
#478480 75%, #478480);
         /*background-image: -webkit-linear-gradient(45deg,#434238
25%,transparent 25%,transparent 75%,#434238
75%,#434238),-ms-linear-gradient(45deg,#34238 25%,transparent
25%,transparent 75%,#434238
75%,#434238),-moz-linear-gradient(45deg,#434238 25%,transparent
25%,transparent 75%,#434238
75%,#434238),-o-linear-gradient(45deg,#434238 25%,transparent
25%,transparent 75%,#434238
75%,#434238),linear-gradient(45deg,#434238 25%,transparent
25%,transparent 75%,#434238 75%,#434238);*/
        }
        .nav-menu ul {
          position: absolute;
         text-align: left;
         line-height: 40px;
         font-size: 14px;
         width: 200px;
         -webkit-transition: all 0.3s ease-in;
          -moz-transition: all 0.3s ease-in;
          -ms-transition: all 0.3s ease-in;
          -o-transition: all 0.3s ease-in;
          transition: all 0.3s ease-in;
          -webkit-transform-origin: 0px 0px;
          -moz-transform-origin: 0px 0px;
          -ms-transform-origin: 0px 0px;
          -o-transform-origin: 0px 0px;
          transform-origin: 0px 0px;
          -webkit-transform: rotateX(-90deg);
          -moz-transform: rotateX(-90deg);
          -ms-transform: rotateX(-90deg);
          -o-transform: rotateX(-90deg);
          transform: rotateX(-90deg);
          -webkit-backface-visibility: hidden;
          -moz-backface-visibility: hidden;
          -ms-backface-visibility: hidden;
          -o-backface-visibility: hidden;
         backface-visibility: hidden;
        }
        /*展现下拉领航菜单,并其安装一个变形效果*/
        .nav-menu > li:hover ul {
            display: block;
   -webkit-transform: rotateX(0deg);
   -moz-transform: rotateX(0deg);
   -ms-transform: rotateX(0deg);
   -o-transform: rotateX(0deg);
   transform: rotateX(0deg);     
         }
 </style>
</head>
<body>
 <div id=”nav”>
  <ul class=”nav-menu clearfix unstyled”>
   <li><a href=”#” class=”three-d active”>
    Home
    <span class=”three-d-box”><span
class=”front”>Home</span><span
class=”back”>Home</span></span>
   </a></li>
   <li><a href=”#” class=”three-d”>
    Services
    <span class=”three-d-box”><span
class=”front”>Services</span><span
class=”back”>Services</span></span>
   </a></li>
   <li><a href=”#” class=”three-d”>
    Products
    <span class=”three-d-box”><span
class=”front”>Products</span><span
class=”back”>Products</span></span>
   </a></li>
   <li><a href=”#” class=”three-d”>
    About
    <span class=”three-d-box”><span
class=”front”>About</span><span
class=”back”>About</span></span>
   </a></li>
   <li><a href=”#” class=”three-d”>
    Contact
    <span class=”three-d-box”><span
class=”front”>Contact</span><span
class=”back”>Contact</span></span>
   </a></li>
   <li><a href=”#” class=”three-d”>
    Blog
    <span class=”three-d-box”><span
class=”front”>Blog</span><span
class=”back”>Blog</span></span></a>
    <ul class=”clearfix unstyled drop-menu”>
     <li><a href=”#” class=”three-d”>
       Html5
       <span class=”three-d-box”><span
class=”front”>Html5</span><span
class=”back”>Html5</span></span>
     </a></li>
     <li><a href=”#” class=”three-d”>
      Css3
      <span class=”three-d-box”><span
class=”front”>Css3</span><span
class=”back”>Css3</span></span>
     </a></li>
     <li><a href=”#” class=”three-d”>
      JavaScript
      <span class=”three-d-box”><span
class=”front”>JavaScript</span><span
class=”back”>JavaScript</span></span>
     </a></li>
     <li><a href=”#” class=”three-d”>
       Videogames 
      <span class=”three-d-box”><span
class=”front”>Videogames</span><span
class=”back”>Videogames</span></span>
     </a></li>
     
    </ul>
   </li>
   <li><a href=”#” class=”three-d”>
    Shop On-line
    <span class=”three-d-box”><span class=”front”>Shop
On-line</span><span class=”back”>Shop
On-line</span></span>
   </a></li>
  </ul>
 </div>
</body>
</html>

2.hover动画

说了那么多,是时候进入正文了,

首先是hover动画,关于那些概念,小编表明下,正是鼠标移上去触发的动画,就是接触了鼠标的hover事件时能收看的卡通片!上面,依照体系,1个一个的写!

animation的值有

/* 2D TRANSITIONS */
/* Grow */
.grow {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover, .grow:focus, .grow:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

 

2-1.简约动画

animation: name duration timing-function delay iteration-count direction fill-mode play-state;这是简写

/* Shrink */
.shrink {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.shrink:hover, .shrink:focus, .shrink:active {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}

2-1-1尺寸变化

美高梅开户网址 2

html

<span class=”ech-big”>big</span> <span
class=”ech-small”>small</span>

1
2
<span class="ech-big">big</span>
<span class="ech-small">small</span>

css

.ech-big,.ech-small { transition: all .4s; } .ech-big:hover{ transform:
scale(1.2); } .ech-small:hover{ transform: scale(.9); }

1
2
3
4
5
6
7
8
9
.ech-big,.ech-small {
    transition: all .4s;
}
.ech-big:hover{
    transform: scale(1.2);
}
.ech-small:hover{
    transform: scale(.9);
}
animation-name 指定要绑定到选择器的关键帧的名称
animation-duration
动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
animation-iteration-count 定义动画的播放次数。
animation-direction 指定是否应该轮流反向播放动画。
animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
animation-play-state 指定动画是否正在运行或已暂停。
initial 设置属性为其默认值
inherit 从父元素继承属性

/* Pulse */
@-webkit-keyframes pulse {
25% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

2-1-2形态变化

美高梅开户网址 3

html

<span class=”ech-skew-l”>skew-l</span> <span
class=”ech-skew-r”>skew-r</span> <span
class=”ech-skew-l-t”>skew-l-t</span> <span
class=”ech-skew-r-t”>skew-r-t</span> <span
class=”ech-skew-l-b”>skew-l-b</span> <span
class=”ech-skew-r-b”>skew-r-b</span>

1
2
3
4
5
6
<span class="ech-skew-l">skew-l</span>
<span class="ech-skew-r">skew-r</span>
<span class="ech-skew-l-t">skew-l-t</span>
<span class="ech-skew-r-t">skew-r-t</span>
<span class="ech-skew-l-b">skew-l-b</span>
<span class="ech-skew-r-b">skew-r-b</span>

css

.ech-skew-l, .ech-skew-r, .ech-skew-l-t, .ech-skew-r-b, .ech-skew-l-b,
.ech-skew-r-t{ transition: all .4s; } .ech-skew-r-t, .ech-skew-l-t {
transform-origin: 0 100%; } .ech-skew-r-b, .ech-skew-l-b {
transform-origin: 100% 0; } .ech-skew-l:hover { transform: skew(-15deg);
} .ech-skew-r:hover { transform: skew(15deg); } .ech-skew-l-t:hover {
transform: skew(-15deg); } .ech-skew-r-t:hover { transform: skew(15deg);
} .ech-skew-l-b:hover { transform: skew(15deg); } .ech-skew-r-b:hover {
transform: skew(-15deg); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.ech-skew-l, .ech-skew-r, .ech-skew-l-t, .ech-skew-r-b, .ech-skew-l-b, .ech-skew-r-t{
    transition: all .4s;
}
.ech-skew-r-t, .ech-skew-l-t {
    transform-origin: 0 100%;
}
.ech-skew-r-b, .ech-skew-l-b {
    transform-origin: 100% 0;
}
.ech-skew-l:hover {
    transform: skew(-15deg);
}
.ech-skew-r:hover {
    transform: skew(15deg);
}
.ech-skew-l-t:hover {
    transform: skew(-15deg);
}
.ech-skew-r-t:hover {
    transform: skew(15deg);
}
.ech-skew-l-b:hover {
    transform: skew(15deg);
}
.ech-skew-r-b:hover {
    transform: skew(-15deg);
}
下面是一个简单的纯css3写出来的动画效果
图片选择自己喜欢的就好

75% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
}

2-1-3转悠角度变化

美高梅开户网址 4

html

<pre class=”lang:default decode:true”> <span
class=”ech-grow-rotate-l”>grow-rotate-l</span> <span
class=”ech-grow-rotate-r”>grow-rotate-r</span> <span
class=”ech-rotate5″>rotate5</span> <span
class=”ech-rotate15″>rotate15</span> <span
class=”ech-rotate30″>rotate30</span> <span
class=”ech-rotate60″>rotate60</span> <span
class=”ech-rotate90″>rotate90</span> <span
class=”ech-rotate180″>rotate180</span> <span
class=”ech-rotate360″>rotate360</span> <span
class=”ech-rotate-5″>rotate-5</span> <span
class=”ech-rotate-15″>rotate-15</span> <span
class=”ech-rotate-30″>rotate-30</span> <span
class=”ech-rotate-60″>rotate-60</span> <span
class=”ech-rotate-90″>rotate-90</span> <span
class=”ech-rotate-180″>rotate-180</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<pre class="lang:default decode:true">
<span class="ech-grow-rotate-l">grow-rotate-l</span>
<span class="ech-grow-rotate-r">grow-rotate-r</span>
<span class="ech-rotate5">rotate5</span>
<span class="ech-rotate15">rotate15</span>
<span class="ech-rotate30">rotate30</span>
<span class="ech-rotate60">rotate60</span>
<span class="ech-rotate90">rotate90</span>
<span class="ech-rotate180">rotate180</span>
<span class="ech-rotate360">rotate360</span>
<span class="ech-rotate-5">rotate-5</span>
<span class="ech-rotate-15">rotate-15</span>
<span class="ech-rotate-30">rotate-30</span>
<span class="ech-rotate-60">rotate-60</span>
<span class="ech-rotate-90">rotate-90</span>
<span class="ech-rotate-180">rotate-180</span>

css

.ech-grow-rotate-l,.ech-grow-rotate-r, .ech-rotate5, .ech-rotate15,
.ech-rotate30, .ech-rotate60, .ech-rotate90, .ech-rotate180,
.ech-rotate360, .ech-rotate-5,.ech-rotate-15, .ech-rotate-30,
.ech-rotate-60, .ech-rotate-90, .ech-rotate-180{ transition: all .4s; }
.ech-grow-rotate-l:hover { transform: scale(1.1) rotate(4deg); }
.ech-grow-rotate-r:hover { transform: scale(1.1) rotate(-4deg); }
.ech-rotate-5:hover { transform: rotate(-5deg); } .ech-rotate-15:hover {
transform: rotate(-15deg); } .ech-rotate-30:hover { transform:
rotate(-30deg); } .ech-rotate-60:hover { transform: rotate(-60deg); }
.ech-rotate-90:hover { transform: rotate(-90deg); }
.ech-rotate-180:hover { transform: rotate(-180deg); } .ech-rotate5:hover
{ transform: rotate(5deg); } .ech-rotate15:hover { transform:
rotate(15deg); } .ech-rotate30:hover { transform: rotate(30deg); }
.ech-rotate60:hover { transform: rotate(60deg); } .ech-rotate90:hover {
transform: rotate(90deg); } .ech-rotate180:hover { transform:
rotate(180deg); } .ech-rotate360:hover { transform: rotate(360deg); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
.ech-grow-rotate-l,.ech-grow-rotate-r, .ech-rotate5, .ech-rotate15, .ech-rotate30, .ech-rotate60, .ech-rotate90, .ech-rotate180, .ech-rotate360, .ech-rotate-5,.ech-rotate-15, .ech-rotate-30, .ech-rotate-60, .ech-rotate-90, .ech-rotate-180{
transition: all .4s;
}
.ech-grow-rotate-l:hover {
    transform: scale(1.1) rotate(4deg);
}
.ech-grow-rotate-r:hover {
    transform: scale(1.1) rotate(-4deg);
}
.ech-rotate-5:hover {
    transform: rotate(-5deg);
}
.ech-rotate-15:hover {
    transform: rotate(-15deg);
}
 
.ech-rotate-30:hover {
    transform: rotate(-30deg);
}
 
.ech-rotate-60:hover {
    transform: rotate(-60deg);
}
 
.ech-rotate-90:hover {
    transform: rotate(-90deg);
}
 
.ech-rotate-180:hover {
    transform: rotate(-180deg);
}
.ech-rotate5:hover {
    transform: rotate(5deg);
}
.ech-rotate15:hover {
    transform: rotate(15deg);
}
 
.ech-rotate30:hover {
    transform: rotate(30deg);
}
 
.ech-rotate60:hover {
    transform: rotate(60deg);
}
 
.ech-rotate90:hover {
    transform: rotate(90deg);
}
 
.ech-rotate180:hover {
    transform: rotate(180deg);
}
 
.ech-rotate360:hover {
    transform: rotate(360deg);
}

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>flower动画</title>
</head>
<style>
*{margin: 0;padding: 0;}
body,div{margin: 0;padding: 0;width: 100%;height: 100%;}
a{text-decoration: none;color: #fff;}
.flower{width: 250px;height: 250px;position: relative;float:
left;margin: 10px 50px;}
.picture img{border:solid 10px; border-radius: 50%;border-width:
10px;width: 250px;height: 250px;overflow: hidden;border-color: #fff;}
.cover{width: 250px;height: 250px;border-radius: 50%;color:
#000;position: absolute;}
.cover h2{padding: 95px 0 0 60px;color: #fff;}
.cover p{padding: 0 0 90px 90px;color: #fff;}
.yellow-flower .cover{top: 10px;left:10px;background: #92ab24;z-index:
-100;opacity: 0.7;}
.write-flower .cover{top: 10px;left:10px;background: #6192dc;z-index:
-100;opacity: 0.7;}
.green-flower .cover{top: 10px;left:10px;background: #dcbcb0;z-index:
-100;opacity: 0.7;}
.red-flower .cover{top: 10px;left:10px;background: #4ba2a7;z-index:
-100;opacity: 0.7;}
.pink-flower .cover{top: 10px;left:10px;background:#d88b8b;z-index:
-100;opacity: 0.7;}
.purple-flower .cover{top: 10px;left:10px;background: #da7685;z-index:
-100;opacity: 0.7;}
.blue-flower .cover{top: 10px;left:10px;background: #a74ba4;z-index:
-100;opacity: 0.7;}
.orange-flower .cover{top: 10px;left:10px;background: #7fda76;z-index:
-100;opacity: 0.7;}

@keyframes pulse {
25% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

2-1-四位移变化

美高梅开户网址 5

html

JavaScript

<span class=”ech-t”>up</span> <span
class=”ech-b”>bottom</span> <span
class=”ech-l”>left</span> <span
class=”ech-r”>right</span>

1
2
3
4
<span class="ech-t">up</span>
<span class="ech-b">bottom</span>
<span class="ech-l">left</span>
<span class="ech-r">right</span>

css

.ech-t,.ech-bottom,.ech-top,.ech-right{ transition: all .4s; }
.ech-t:hover { transform: translate3d(0, -10px, 0); } .ech-b:hover {
transform: translate3d(0, 10px, 0); } .ech-l:hover { transform:
translate3d(-10px, 0, 0); } .ech-r:hover { transform: translate3d(10px,
0, 0); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.ech-t,.ech-bottom,.ech-top,.ech-right{
    transition: all .4s;
}
.ech-t:hover {
    transform: translate3d(0, -10px, 0);
}
.ech-b:hover {
    transform: translate3d(0, 10px, 0);
}
.ech-l:hover {
    transform: translate3d(-10px, 0, 0);
}
.ech-r:hover {
    transform: translate3d(10px, 0, 0);
}

.yellow-flower:hover .cover{animation:scale 0.5s 1 linear;z-index: 1;}
.yellow-flower:hover .picture{animation:scale1 0.5s 1 linear;z-index:
1;}
@keyframes scale{
0%{transform:scale(0.2);opacity: 1;}
50%{opacity: 0.5;}
100%{transform:scale(1);opacity: 0.7;}
}
@keyframes scale1{
0%{transform:scale(1);}
100%{transform:scale(0);}
}

75% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
}

2-1-5边框变化

美高梅开户网址 6

html

JavaScript

<span class=”ech-border”>border</span> <span
class=”ech-border-in”>border-in</span>

1
2
<span class="ech-border">border</span>
<span class="ech-border-in">border-in</span>

css

.ech-border,.ech-border-in{ transition: all .4s; } .ech-border:hover {
box-shadow: 0 0 0 4px #09f, 0 0 1px transparent; } .ech-border-in:hover
{ box-shadow: inset 0 0 0 4px #09f, 0 0 1px transparent; }

1
2
3
4
5
6
7
8
9
10
.ech-border,.ech-border-in{
    transition: all .4s;
}
.ech-border:hover {
    box-shadow: 0 0 0 4px #09f, 0 0 1px transparent;
}
 
.ech-border-in:hover {
    box-shadow: inset 0 0 0 4px #09f, 0 0 1px transparent;
}

.write-flower:hover .cover{animation:translate 0.5s 1 linear;z-index:
1;}
@keyframes translate{
0%{opacity: 0;top: -110%;}
10%{}
100%{top:10px;opacity: 0.7;}
}

.pulse {
display: inline-block;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.pulse:hover, .pulse:focus, .pulse:active {
-webkit-animation-name: pulse;
animation-name: pulse;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}

2-1-6阴影变化

美高梅开户网址 7

(gif图看得效能太掉价了,大家能够去github下载看)

html

JavaScript

<span class=”ech-shadow”>shadow</span> <span
class=”ech-shadow-in”>shadow-in</span> <span
class=”ech-shadow-write”>shadow-write</span> <span
class=”ech-shadow-big”>shadow-big</span>

1
2
3
4
<span class="ech-shadow">shadow</span>
<span class="ech-shadow-in">shadow-in</span>
<span class="ech-shadow-write">shadow-write</span>
<span class="ech-shadow-big">shadow-big</span>

css

.ech-shadow,.ech-shadow-in,.ech-shadow-write,.ech-shadow-big{
transition: all .4s; } .ech-shadow:hover { box-shadow: 0 0 10px #333; }
.ech-shadow-in:hover { box-shadow: inset 0 0 10px #333; }
.ech-shadow-write:hover { box-shadow: inset 0 0 20px #fff; }
.ech-shadow-big:hover { box-shadow: 0 10px 10px -10px rgba(0, 0, 0,
0.5); transform: scale(1.1); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.ech-shadow,.ech-shadow-in,.ech-shadow-write,.ech-shadow-big{
    transition: all .4s;
}
.ech-shadow:hover {
    box-shadow: 0 0 10px #333;
}  
.ech-shadow-in:hover {
    box-shadow: inset 0 0 10px #333;
}
.ech-shadow-write:hover {
    box-shadow: inset 0 0 20px #fff;
}
.ech-shadow-big:hover {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
    transform: scale(1.1);
}

.green-flower:hover .cover{animation:skew 0.5s 1 linear;z-index: 1;}
@keyframes skew{
0%{opacity: 0;}
50%{transform:rotate3d(0,1,0,180deg);opacity: 1}
100%{opacity: 0.7;}
}

/* Pulse Grow */
@-webkit-keyframes pulse-grow {
to {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}

2-1-7反射率变化

美高梅开户网址 8

html

JavaScript

<span class=”ech-fade-out”>fade-out</span> <span
class=”ech-fade-in”>fade-in</span>

1
2
<span class="ech-fade-out">fade-out</span>
<span class="ech-fade-in">fade-in</span>

css

.ech-fade-out,.ech-fade-in{ transition: all .4s; } .ech-fade-out:hover {
opacity: .6; } .ech-fade-in { opacity: .5; } .ech-fade-in:hover {
opacity: 1; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.ech-fade-out,.ech-fade-in{
    transition: all .4s;
}
.ech-fade-out:hover {
    opacity: .6;
}
 
.ech-fade-in {
    opacity: .5;
}
 
.ech-fade-in:hover {
    opacity: 1;
}

.red-flower:hover .cover{animation:red 0.8s 1 linear;z-index: 1;}
@keyframes red{
0%{opacity: 1;}
35%{transform:translate(100%,0) rotate3d(0,1,0,90deg);transform-origin:0
0; transition:0.3s ease-in-out;}
65%{transform:translate(-10%,0) rotate3d(0,1,0,90deg);transform-origin:0
0; transition:0.3s ease-in-out;}
100%{opacity: 1;}
}

@keyframes pulse-grow {
to {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}

2-1-8圆角变化

.pink-flower:hover .cover{animation:pink 0.8s 1 linear;z-index: 1;}
.pink-flower:hover .picture{animation:pink1 0.8s 1 linear;z-index: 1;}
@keyframes pink{
0%{transform:scale(0.2);opacity: 1;}
50%{opacity: 0.5;transform:scale(1) rotate(360deg);}
100%{transform:scale(1) rotate(360deg);opacity: 0.7;}
}
@keyframes pink1{
10%{transform:scale(0.8) translate(50%,0) rotate(180deg);}
20%{transform:scale(0.6) translate(150%,0) rotate(180deg);}
30%{transform:scale(0.4) translate(200%,0) rotate(180deg);}
40%{transform:scale(0.2) translate(250%,0) rotate(180deg);}
50%{transform:scale(0.05) translate(300%,0) rotate(180deg);}
60%{transform:scale(0.2) translate(-300%,0) rotate(180deg);}
70%{transform:scale(0.4) translate(-250%,0) rotate(180deg);}
80%{transform:scale(0.6) translate(-200%,0) rotate(180deg);}
90%{transform:scale(0.8) translate(-150%,0) rotate(180deg);}
100%{transform:scale(1) translate(-50%,0) rotate(180deg);}
}

.pulse-grow {
display: inline-block;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.pulse-grow:hover, .pulse-grow:focus, .pulse-grow:active {
-webkit-animation-name: pulse-grow;
animation-name: pulse-grow;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}

美高梅开户网址 9

.purple-flower:hover .cover{animation:purple 0.5s 1 linear;z-index:
1;}
.purple-flower:hover .picture{animation:purple1 0.5s 1 linear;z-index:
1;}
@keyframes purple{
0%{transform:scale(1.5);opacity: 0.2;}
20%{transform:scale(1.4);opacity: 0.3;}
40%{transform:scale(1.3);opacity: 0.4;}
60%{transform:scale(1.2);opacity: 0.5;}
80%{transform:scale(1.1);opacity: 0.6;}
100%{transform:scale(1);opacity: 1;}
}
@keyframes purple1{
0%{transform:scale(1);opacity: 1;}
20%{transform:scale(0.8);opacity: 0.8;}
40%{transform:scale(0.6);opacity: 0.6;}
60%{transform:scale(0.4);opacity: 0.5;}
80%{transform:scale(0.2);opacity: 0.3;}
100%{transform:scale(0);opacity: 0;}
}

/* Pulse Shrink */
@-webkit-keyframes pulse-shrink {
to {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
}

html

JavaScript

<span class=”ech-rectangle”>rectangle</span> <span
class=”ech-radius”>radius</span>

1
2
<span class="ech-rectangle">rectangle</span>
<span class="ech-radius">radius</span>

css

.ech-radius,.ech-rectangle{ transition: all .4s; } .ech-radius {
border-radius: 10px; } .ech-radius:hover { border-radius: 0; }
.ech-rectangle:hover { border-radius: 10px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.ech-radius,.ech-rectangle{
    transition: all .4s;
}
.ech-radius {
    border-radius: 10px;
}
 
.ech-radius:hover {
    border-radius: 0;
}
 
.ech-rectangle:hover {
    border-radius: 10px;
}

.blue-flower:hover .cover{animation:blue 0.8s 1 linear;z-index: 1;}
.blue-flower:hover .picture{animation:blue1 0.8s 1 linear;z-index: 1;}
@keyframes blue{
20%{transform:scale(0.2) translate(-300%,300%);opacity: 0;}
50%{transform:scale(0.3) translate(-200%,200%);opacity: 0.4}
70%{transform:scale(0.5) translate(0,0);opacity: 0.7}
100%{transform:scale(0.7) translate(0,0);opacity: 0.8}
}
@keyframes blue1{
20%{transform:scale(0.7) translate(0,0);opacity: 1}
50%{transform:scale(0.5) translate(0,0);opacity: 1}
70%{transform:scale(0.3) translate(250%,-250%);opacity: 0.4}
100%{transform:scale(0.2) translate(350%,-350%);opacity: 0;}
}

@keyframes pulse-shrink {
to {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
}

2-2.颜色动画效果

那有个别的卡通首倘使应用:before和:after实行落到实处的,所以,大家只要选取的时候,切记:before和:after没有被占据,不然会展现不健康

.orange-flower:hover .cover{animation:orange 0.5s 1 linear;z-index:
1;}
.orange-flower:hover .picture{animation:orange1 0.5s 1 linear;z-index:
1;}
@keyframes orange{
0%{transform:rotate(180deg);}
20%{transform:rotate(180deg) translate(10%,10%);opacity: 0.9;}
40%{transform:rotate(180deg) translate(20%,20%);opacity: 0.8;}
40%{transform:rotate(180deg) translate(30%,30%);opacity: 0.8;}
60%{transform:rotate(180deg) translate(20%,20%);opacity: 0.7;}
80%{transform:rotate(180deg) translate(10%,10%);opacity: 0.6;}
100%{transform:rotate(180deg) translate(0,0);opacity: 0;}
}
@keyframes orange1{
0%{transform:rotate(180deg);}
20%{transform:rotate(180deg) translate(-10%,-10%);opacity: 0.9;}
40%{transform:rotate(180deg) translate(-20%,-20%);opacity: 0.8;}
40%{transform:rotate(180deg) translate(-30%,-30%);opacity: 0.8;}
60%{transform:rotate(180deg) translate(-20%,-20%);opacity: 0.7;}
80%{transform:rotate(180deg) translate(-10%,-10%);opacity: 0.6;}
100%{transform:rotate(180deg) translate(0,0);opacity: 0;}
}
</style>
<body>
<div class=”content”>
<div class=”yellow-flower flower”>
<div class=”picture”>
<img src=”img/flash.jpg” alt=”图片不恐怕加载”>
</div>
<div class=”cover”>
<h2><a href=”#”>Come here</a></h2>
<p><a href=”#”>you can</a></p>
</div>
</div>
<div class=”write-flower flower”>
<div class=”picture”>
<img src=”img/flash7.jpg” alt=”图片无法加载”>
</div>
<div class=”cover”>
<h2>Come here</h2>
<p>you can</p>
</div>
</div>
<div class=”green-flower flower”>
<div class=”picture”>
<img src=”img/flash2.jpg” alt=”图片不能够加载”>
</div>
<div class=”cover”>
<h2>Come here</h2>
<p>you can</p>
</div>
</div>
<div class=”red-flower flower”>
<div class=”picture”>
<img src=”img/flash3.jpg” alt=”图片不可能加载”>
</div>
<div class=”cover”>
<h2>Come here</h2>
<p>you can</p>
</div>
</div>
<div class=”pink-flower flower”>
<div class=”picture”>
<img src=”img/flash4.jpg” alt=”图片不能加载”>
</div>
<div class=”cover”>
<h2>Come here</h2>
<p>you can</p>
</div>
</div>
<div class=”purple-flower flower”>
<div class=”picture”>
<img src=”img/flash5.jpg” alt=”图片不可能加载”>
</div>
<div class=”cover”>
<h2>Come here</h2>
<p>you can</p>
</div>
</div>
<div class=”blue-flower flower”>
<div class=”picture”>
<img src=”img/flash6.jpg” alt=”图片十分小概加载”>
</div>
<div class=”cover”>
<h2>Come here</h2>
<p>you can</p>
</div>
</div>
<div class=”orange-flower flower”>
<div class=”picture”>
<img src=”img/flash1.jpg” alt=”图片不能够加载”>
</div>
<div class=”cover”>
<h2>Come here</h2>
<p>you can</p>
</div>
</div>
</div>
</body>
</html>

.pulse-shrink {
display: inline-block;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.pulse-shrink:hover, .pulse-shrink:focus, .pulse-shrink:active {
-webkit-animation-name: pulse-shrink;
animation-name: pulse-shrink;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}

2-2-1.颜色块变化

美高梅开户网址 10

因为那块内容很像,小编就一大块一起说,大家看代码的时候要小心注意。看代码看不亮堂,直接在github下载,然后运转文件,边调节和测试边看效能!那样我们就很简单驾驭了!

html

JavaScript

<span class=”ech-fade”>fade</span> <span
class=”ech-fade-t”>fade-t</span> <span
class=”ech-fade-b”>fade-b</span> <span
class=”ech-fade-l”>fade-l</span> <span
class=”ech-fade-r”>fade-r</span> <span
class=”ech-bounce-t”>bounce-t</span> <span
class=”ech-bounce-b”>bounce-b</span> <span
class=”ech-bounce-l”>bounce-l</span> <span
class=”ech-bounce-r”>bounce-r</span> <span
class=”ech-fade-c-out”>fade-c-out</span> <span
class=”ech-fade-c-in”>fade-c-in</span> <span
class=”ech-fade-m-out”>fade-m-out</span> <span
class=”ech-fade-m-in”>fade-m-in</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
<span class="ech-fade">fade</span>
<span class="ech-fade-t">fade-t</span>
<span class="ech-fade-b">fade-b</span>
<span class="ech-fade-l">fade-l</span>
<span class="ech-fade-r">fade-r</span>
<span class="ech-bounce-t">bounce-t</span>
<span class="ech-bounce-b">bounce-b</span>
<span class="ech-bounce-l">bounce-l</span>
<span class="ech-bounce-r">bounce-r</span>
<span class="ech-fade-c-out">fade-c-out</span>
<span class="ech-fade-c-in">fade-c-in</span>
<span class="ech-fade-m-out">fade-m-out</span>
<span class="ech-fade-m-in">fade-m-in</span>

css

/*近年来因素设置相对稳定*/ .ech-fade, .ech-fade-t, .ech-fade-b,
.ech-fade-l, .ech-fade-r, .ech-fade-c-in, .ech-fade-m-in,
.ech-fade-m-out, .ech-fade-c-out, .ech-bounce-t, .ech-bounce-b,
.ech-bounce-r, .ech-bounce-l { position: relative; transition: all .3s;
z-index: 1; } /*眼前成分的:before和:after设置绝对定位*/
.ech-fade:before, .ech-fade-t:before, .ech-fade-b:before,
.ech-fade-l:before, .ech-fade-r:before, .ech-fade-c-in:before,
.ech-fade-m-in:before, .ech-fade-m-out:before, .ech-fade-c-in:after,
.ech-fade-m-in:after, .ech-fade-c-out:before { position: absolute;
transition: all .3s; content: “”; display: block; background: #09f;
z-index: -1; width: 100%; height: 100%; }
/*弹跳元素:before和:after设置相对定位和平运动动曲线*/
.ech-bounce-t:before, .ech-bounce-b:before, .ech-bounce-r:before,
.ech-bounce-l:before { transition: all .3s; transition-timing-function:
cubic-bezier(0.52, 1.7, 0.5, 0.4); position: absolute; content: “”;
display: block; background: #09f; z-index: -1; width: 100%; height:
100%; } /*背景颜色和文字变化*/ .ech-fade:before { top: 0; left: 0;
transform: scaleX(1); opacity: 0; } .ech-fade:hover:before { opacity: 1;
} /*颜色从左至右变化*/ .ech-fade-l:before, .ech-bounce-l:before { top:
0; right: 0; transform-origin: 0 50%; transform: scaleX(0); }
/*颜色从右至左变化*/ .ech-fade-r:before, .ech-bounce-r:before { top:
0; left: 0; transform-origin: 100% 50%; transform: scaleX(0); }
/*颜色从上往下转移*/ .ech-fade-t:before, .ech-bounce-t:before {
bottom: 0; left: 0; transform-origin: 50% 0; transform: scaleY(0); }
/*颜色从下往上转移*/ .ech-fade-b:before, .ech-bounce-b:before { top:
0; left: 0; transform-origin: 50% 100%; transform: scaleY(0); }
/*颜色垂直居中出去*/ .ech-fade-m-out:before { top: 0; bottom: 0; left:
0; margin: auto; transform: scaleY(0); } /*水平居中出去*/
.ech-fade-c-out:before { top: 0; right: 0; bottom: 0; left: 0; margin:
auto; transform: scaleX(0); } .ech-fade-c-out:hover:before { transform:
scaleX(1); } /*水平居中进入*/ .ech-fade-c-in:before { top: 0; left: 0;
transform-origin: 0 50%; transform: scaleX(0); } .ech-fade-c-in:after {
top: 0; right: 0; transform-origin: 100% 50%; transform: scaleX(0); }
/*垂直居中跻身*/ .ech-fade-m-in:before { top: 0; left: 0;
transform-origin: 50% 0; transform: scaleY(0); } .ech-fade-m-in:after {
bottom: 0; left: 0; transform-origin: 50% 100%; transform: scaleY(0); }
/*此时此刻成分文字颜色变化*/ .ech-fade:hover, .ech-fade-t:hover,
.ech-fade-b:hover, .ech-fade-l:hover, .ech-fade-r:hover,
.ech-fade-c-in:hover, .ech-fade-m-in:hover, .ech-fade-m-out:hover,
.ech-fade-c-out:hover, .ech-bounce-t:hover, .ech-bounce-b:hover,
.ech-bounce-r:hover, .ech-bounce-l:hover { color: #fff; }
/*垂直方向进入的:before变化(一半)*/ .ech-fade-m-in:hover:before,
.ech-fade-m-in:hover:after { transform: scaleY(.51); }
/*垂直方向进入的:before变化*/ .ech-fade-t:hover:before,
.ech-fade-b:hover:before, .ech-fade-m-out:hover:before,
.ech-bounce-b:hover:before, .ech-bounce-t:hover:before { transform:
scaleY(1); } /*水平方向进入的:before变化(一半)*/
.ech-fade-c-in:hover:before, .ech-fade-c-in:hover:after { transform:
scaleX(.51); } /*水平方向进入的:before变化*/ .ech-fade-l:hover:before,
.ech-fade-r:hover:before,.ech-fade-c-out:hover:before,
.ech-bounce-l:hover:before, .ech-bounce-r:hover:before { transform:
scaleX(1); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
/*当前元素设置相对定位*/
.ech-fade, .ech-fade-t, .ech-fade-b, .ech-fade-l, .ech-fade-r, .ech-fade-c-in, .ech-fade-m-in, .ech-fade-m-out, .ech-fade-c-out, .ech-bounce-t, .ech-bounce-b, .ech-bounce-r, .ech-bounce-l {
    position: relative;
    transition: all .3s;
    z-index: 1;
}
/*当前元素的:before和:after设置绝对定位*/
.ech-fade:before, .ech-fade-t:before, .ech-fade-b:before, .ech-fade-l:before, .ech-fade-r:before, .ech-fade-c-in:before, .ech-fade-m-in:before, .ech-fade-m-out:before, .ech-fade-c-in:after, .ech-fade-m-in:after, .ech-fade-c-out:before {
    position: absolute;
    transition: all .3s;
    content: "";
    display: block;
    background: #09f;
    z-index: -1;
    width: 100%;
    height: 100%;
}
/*弹跳元素:before和:after设置绝对定位和运动曲线*/
.ech-bounce-t:before, .ech-bounce-b:before, .ech-bounce-r:before, .ech-bounce-l:before {
    transition: all .3s;
    transition-timing-function: cubic-bezier(0.52, 1.7, 0.5, 0.4);
    position: absolute;
    content: "";
    display: block;
    background: #09f;
    z-index: -1;
    width: 100%;
    height: 100%;
}
 
/*背景颜色和文字变化*/
.ech-fade:before {
    top: 0;
    left: 0;
    transform: scaleX(1);
    opacity: 0;
}
 
.ech-fade:hover:before {
    opacity: 1;
}
 
/*颜色从左至右变化*/
.ech-fade-l:before, .ech-bounce-l:before {
    top: 0;
    right: 0;
    transform-origin: 0 50%;
    transform: scaleX(0);
}
/*颜色从右至左变化*/
.ech-fade-r:before, .ech-bounce-r:before {
    top: 0;
    left: 0;
    transform-origin: 100% 50%;
    transform: scaleX(0);
}
 
/*颜色从上往下变化*/
.ech-fade-t:before, .ech-bounce-t:before {
    bottom: 0;
    left: 0;
    transform-origin: 50% 0;
    transform: scaleY(0);
}
/*颜色从下往上变化*/
.ech-fade-b:before, .ech-bounce-b:before {
    top: 0;
    left: 0;
    transform-origin: 50% 100%;
    transform: scaleY(0);
}
 
/*颜色垂直居中出去*/
.ech-fade-m-out:before {
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transform: scaleY(0);
}
 
/*水平居中出去*/
.ech-fade-c-out:before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transform: scaleX(0);
}
 
.ech-fade-c-out:hover:before {
    transform: scaleX(1);
}
 
/*水平居中进来*/
.ech-fade-c-in:before {
    top: 0;
    left: 0;
    transform-origin: 0 50%;
    transform: scaleX(0);
}
 
.ech-fade-c-in:after {
    top: 0;
    right: 0;
    transform-origin: 100% 50%;
    transform: scaleX(0);
}
 
/*垂直居中进来*/
.ech-fade-m-in:before {
    top: 0;
    left: 0;
    transform-origin: 50% 0;
    transform: scaleY(0);
}
 
.ech-fade-m-in:after {
    bottom: 0;
    left: 0;
    transform-origin: 50% 100%;
    transform: scaleY(0);
}
/*当前元素文字颜色变化*/
.ech-fade:hover, .ech-fade-t:hover, .ech-fade-b:hover, .ech-fade-l:hover, .ech-fade-r:hover, .ech-fade-c-in:hover, .ech-fade-m-in:hover, .ech-fade-m-out:hover, .ech-fade-c-out:hover, .ech-bounce-t:hover, .ech-bounce-b:hover, .ech-bounce-r:hover, .ech-bounce-l:hover {
    color: #fff;
}
/*垂直方向进来的:before变化(一半)*/
.ech-fade-m-in:hover:before, .ech-fade-m-in:hover:after {
    transform: scaleY(.51);
}
/*垂直方向进来的:before变化*/
.ech-fade-t:hover:before, .ech-fade-b:hover:before, .ech-fade-m-out:hover:before, .ech-bounce-b:hover:before, .ech-bounce-t:hover:before {
    transform: scaleY(1);
}
/*水平方向进来的:before变化(一半)*/
.ech-fade-c-in:hover:before, .ech-fade-c-in:hover:after {
    transform: scaleX(.51);
}
/*水平方向进来的:before变化*/
.ech-fade-l:hover:before, .ech-fade-r:hover:before,.ech-fade-c-out:hover:before, .ech-bounce-l:hover:before, .ech-bounce-r:hover:before {
    transform: scaleX(1);
}

 

/* Push */
@-webkit-keyframes push {
50% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}

2-2-2.颜色上下划线变化

此地也是一大块一起说,看代码恐怕会更乱,所以大家看代码的时候要进一步小心注意。看代码看不清楚,直接在github下载,然后运转文件,边调节和测试边看成效!那样我们就很简单通晓了!

美高梅开户网址 11

html

JavaScript

<span class=”ech-overline-l”>overline-l</span> <span
class=”ech-overline-r”>overline-r</span> <span
class=”ech-underline-l”>underline-l</span> <span
class=”ech-underline-r”>underline-r</span> <span
class=”ech-underline-c”>underline-c</span> <span
class=”ech-underline-c-out”>underline-c-out</span> <span
class=”ech-overline-c”>overline-c</span> <span
class=”ech-overline-c-out”>overline-c-out</span>

1
2
3
4
5
6
7
8
<span class="ech-overline-l">overline-l</span>
<span class="ech-overline-r">overline-r</span>
<span class="ech-underline-l">underline-l</span>
<span class="ech-underline-r">underline-r</span>
<span class="ech-underline-c">underline-c</span>
<span class="ech-underline-c-out">underline-c-out</span>
<span class="ech-overline-c">overline-c</span>
<span class="ech-overline-c-out">overline-c-out</span>

css

/*上涂鸦和下划线变化 当前元素样式设置绝对固化*/ .ech-overline-r,
.ech-overline-l, .ech-underline-r, .ech-underline-l, .ech-underline-c,
.ech-overline-c, .ech-underline-c-out, .ech-overline-c-out{ position:
relative; transition: all .3s; z-index: 1; }
/*开头化:after:before大小和相对定位*/ .ech-overline-r:before,
.ech-overline-l:before, .ech-underline-l:before,
.ech-underline-r:before, .ech-underline-c:before,
.ech-overline-c:before, .ech-underline-c:after, .ech-overline-c:after,
.ech-underline-c-out:before, .ech-overline-c-out:before { position:
absolute; transition: all .3s; content: “”; display: block; background:
#09f; z-index: -1; height: 4px; width: 100%; transform: scaleX(0); }
/*上划拉 左右出来*/ .ech-overline-r:before { top: 0; left: 0;
transform-origin: 100% 50%; } .ech-overline-l:before { top: 0; right: 0;
transform-origin: 0 50%; } /*下划线 左右出来*/ .ech-underline-r:before
{ bottom: 0; left: 0; transform-origin: 100% 50%; }
.ech-underline-l:before { bottom: 0; right: 0; transform-origin: 0% 50%;
} /**上划拉 下划线 居中进入**/ .ech-overline-c:before { top: 0;
transform-origin: 0 50%; } .ech-overline-c:after { top: 0;
transform-origin: 100% 50%; } .ech-underline-c:before { bottom: 0;
transform-origin: 0 50%; } .ech-underline-c:after { bottom: 0;
transform-origin: 100% 50%; } .ech-overline-c:before,
.ech-underline-c:before { left: 0; } .ech-overline-c:after,
.ech-underline-c:after { right: 0; } /*上涂抹 下划线-居中出来 */
.ech-overline-c-out:before { top: 0; left: 0; right: 0; margin: auto; }
.ech-underline-c-out:before { bottom: 0; left: 0; right: 0; margin:
auto; } /*hover效果*/ .ech-overline-c:hover:after,
.ech-overline-c:hover:before, .ech-underline-c:hover:after,
.ech-underline-c:hover:before { transform: scaleX(.51); }
.ech-overline-l:hover:before, .ech-overline-r:hover:before,
.ech-underline-l:hover:before, .ech-underline-r:hover:before,
.ech-underline-c-out:hover:before, .ech-overline-c-out:hover:before {
transform: scaleX(1); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
/*上划线和下划线变化 当前元素样式设置相对定位*/
.ech-overline-r, .ech-overline-l, .ech-underline-r, .ech-underline-l, .ech-underline-c, .ech-overline-c, .ech-underline-c-out, .ech-overline-c-out{
    position: relative;
    transition: all .3s;
    z-index: 1;
}
/*初始化:after:before大小和绝对定位*/
.ech-overline-r:before, .ech-overline-l:before, .ech-underline-l:before, .ech-underline-r:before, .ech-underline-c:before, .ech-overline-c:before, .ech-underline-c:after, .ech-overline-c:after, .ech-underline-c-out:before, .ech-overline-c-out:before {
    position: absolute;
    transition: all .3s;
    content: "";
    display: block;
    background: #09f;
    z-index: -1;
    height: 4px;
    width: 100%;
    transform: scaleX(0);
}
 
/*上划线 左右出来*/
.ech-overline-r:before {
    top: 0;
    left: 0;
    transform-origin: 100% 50%;
}
 
.ech-overline-l:before {
    top: 0;
    right: 0;
    transform-origin: 0 50%;
}
 
/*下划线 左右出来*/
.ech-underline-r:before {
    bottom: 0;
    left: 0;
    transform-origin: 100% 50%;
 
}
 
.ech-underline-l:before {
    bottom: 0;
    right: 0;
    transform-origin: 0% 50%;
}
 
/**上划线 下划线 居中进来**/
.ech-overline-c:before {
    top: 0;
    transform-origin: 0 50%;
}
 
.ech-overline-c:after {
    top: 0;
    transform-origin: 100% 50%;
}
 
.ech-underline-c:before {
    bottom: 0;
    transform-origin: 0 50%;
}
 
.ech-underline-c:after {
    bottom: 0;
    transform-origin: 100% 50%;
}
 
.ech-overline-c:before, .ech-underline-c:before {
    left: 0;
}
 
.ech-overline-c:after, .ech-underline-c:after {
    right: 0;
}
 
/*上划线 下划线-居中出去 */
.ech-overline-c-out:before {
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}
 
.ech-underline-c-out:before {
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
/*hover效果*/
.ech-overline-c:hover:after, .ech-overline-c:hover:before, .ech-underline-c:hover:after, .ech-underline-c:hover:before {
    transform: scaleX(.51);
}
 
.ech-overline-l:hover:before, .ech-overline-r:hover:before, .ech-underline-l:hover:before, .ech-underline-r:hover:before, .ech-underline-c-out:hover:before, .ech-overline-c-out:hover:before {
    transform: scaleX(1);
}

100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}

2-2-3箭头动画

美高梅开户网址 12

html

JavaScript

<span class=”ech-arrow-l”>arrow-l</span> <span
class=”ech-arrow-r”>arrow-r</span> <span
class=”ech-arrow-t”>arrow-t</span> <span
class=”ech-arrow-b”>arrow-b</span> <span
class=”ech-arrow-l-move”>arrow-l</span> <span
class=”ech-arrow-r-move”>arrow-r</span> <span
class=”ech-arrow-t-move”>arrow-t</span> <span
class=”ech-arrow-b-move”>arrow-b</span>

1
2
3
4
5
6
7
8
<span class="ech-arrow-l">arrow-l</span>
<span class="ech-arrow-r">arrow-r</span>
<span class="ech-arrow-t">arrow-t</span>
<span class="ech-arrow-b">arrow-b</span>
<span class="ech-arrow-l-move">arrow-l</span>
<span class="ech-arrow-r-move">arrow-r</span>
<span class="ech-arrow-t-move">arrow-t</span>
<span class="ech-arrow-b-move">arrow-b</span>

css

.ech-arrow-l, .ech-arrow-r, .ech-arrow-t, .ech-arrow-b,
.ech-arrow-l-move, .ech-arrow-r-move, .ech-arrow-t-move,
.ech-arrow-b-move{ position: relative; transition: all .3s; z-index: 1;
} /*开端化箭头样式*/ .ech-arrow-l:before, .ech-arrow-r:before,
.ech-arrow-t:before, .ech-arrow-b:before, .ech-arrow-l-move:before,
.ech-arrow-r-move:before, .ech-arrow-t-move:before,
.ech-arrow-b-move:before { position: absolute; transition: all .3s;
content: “”; display: block; z-index: -1; border-style: solid; margin:
auto; width: 0; height: 0; } .ech-arrow-l:before,
.ech-arrow-l-move:before { left: 0; top: 0; bottom: 0; border-width:
10px 10px 10px 0; border-color: transparent #ccc transparent
transparent; } .ech-arrow-r:before, .ech-arrow-r-move:before { right: 0;
top: 0; bottom: 0; border-width: 10px 0 10px 10px; border-color:
transparent transparent transparent #ccc; } .ech-arrow-t:before,
.ech-arrow-t-move:before { left: 0; top: 0; right: 0; border-width: 0
10px 10px 10px; border-color: transparent transparent #ccc transparent;
} .ech-arrow-b:before, .ech-arrow-b-move:before { left: 0; bottom: 0;
right: 0; border-width: 10px 10px 0 10px; border-color: #ccc
transparent transparent transparent; } .ech-arrow-l-move,
.ech-arrow-r-move, .ech-arrow-t-move, .ech-arrow-b-move { transition:
transform .3s; } /*hover效果*/ .ech-arrow-l-move:hover { transform:
translateX(10px); } .ech-arrow-r-move:hover { transform:
translateX(-10px); } .ech-arrow-t-move:hover { transform:
translateY(10px); } .ech-arrow-b-move:hover { transform:
translateY(-10px); } .ech-arrow-l-move:hover:before,
.ech-arrow-l:hover:before { transform: translateX(-10px); }
.ech-arrow-r-move:hover:before, .ech-arrow-r:hover:before { transform:
translateX(10px); } .ech-arrow-t-move:hover:before,
.ech-arrow-t:hover:before { transform: translateY(-10px); }
.ech-arrow-b-move:hover:before, .ech-arrow-b:hover:before { transform:
translateY(10px); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
.ech-arrow-l, .ech-arrow-r, .ech-arrow-t, .ech-arrow-b, .ech-arrow-l-move, .ech-arrow-r-move, .ech-arrow-t-move, .ech-arrow-b-move{
    position: relative;
    transition: all .3s;
    z-index: 1;
}
/*初始化箭头样式*/
.ech-arrow-l:before, .ech-arrow-r:before, .ech-arrow-t:before, .ech-arrow-b:before, .ech-arrow-l-move:before, .ech-arrow-r-move:before, .ech-arrow-t-move:before, .ech-arrow-b-move:before {
    position: absolute;
    transition: all .3s;
    content: "";
    display: block;
    z-index: -1;
    border-style: solid;
    margin: auto;
    width: 0;
    height: 0;
}
 
.ech-arrow-l:before, .ech-arrow-l-move:before {
    left: 0;
    top: 0;
    bottom: 0;
    border-width: 10px 10px 10px 0;
    border-color: transparent #ccc transparent transparent;
}
 
.ech-arrow-r:before, .ech-arrow-r-move:before {
    right: 0;
    top: 0;
    bottom: 0;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #ccc;
}
 
.ech-arrow-t:before, .ech-arrow-t-move:before {
    left: 0;
    top: 0;
    right: 0;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #ccc transparent;
}
 
.ech-arrow-b:before, .ech-arrow-b-move:before {
    left: 0;
    bottom: 0;
    right: 0;
    border-width: 10px 10px 0 10px;
    border-color: #ccc transparent transparent transparent;
}
 
.ech-arrow-l-move, .ech-arrow-r-move, .ech-arrow-t-move, .ech-arrow-b-move {
    transition: transform .3s;
}
/*hover效果*/
.ech-arrow-l-move:hover {
    transform: translateX(10px);
}
 
.ech-arrow-r-move:hover {
    transform: translateX(-10px);
}
 
.ech-arrow-t-move:hover {
    transform: translateY(10px);
}
 
.ech-arrow-b-move:hover {
    transform: translateY(-10px);
}
 
.ech-arrow-l-move:hover:before, .ech-arrow-l:hover:before {
    transform: translateX(-10px);
}
 
.ech-arrow-r-move:hover:before, .ech-arrow-r:hover:before {
    transform: translateX(10px);
}
 
.ech-arrow-t-move:hover:before, .ech-arrow-t:hover:before {
    transform: translateY(-10px);
}
 
.ech-arrow-b-move:hover:before, .ech-arrow-b:hover:before {
    transform: translateY(10px);
}

@keyframes push {
50% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}

2-3较复杂动画

2-1和2-2的始末,都是选拔过渡完成效益,那么这一块便是运用动画来贯彻效益!区别即是hover的写法是充实一个动画,动画的包裹,难度就在于创新意识。

100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}

2-3-1闪光效果

美高梅开户网址 13

html

JavaScript

<span class=”ech-flash”>flash</span>

1
<span class="ech-flash">flash</span>

css

.ech-flash:hover { animation: flash .5s ease; } @keyframes flash { 0%,
50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } }

1
2
3
4
5
6
7
8
9
10
11
12
.ech-flash:hover {
    animation: flash .5s ease;
}
 
@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}

.push {
display: inline-block;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.push:hover, .push:focus, .push:active {
-webkit-animation-name: push;
animation-name: push;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

2-3-2闹钟振铃效果

美高梅开户网址 14

html

JavaScript

<span class=”ech-shake-time”>shake-time</span>

1
<span class="ech-shake-time">shake-time</span>

css

/*仿闹钟振铃效果*/ .ech-shake-time:hover { animation: shake-time 1s
ease; } @keyframes shake-time { 0% { transform: scale(1); } 10%, 20% {
transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform:
scale(1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.1)
rotate(-3deg); } 100% { transform: scale(1) rotate(0); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*仿闹钟振铃效果*/
.ech-shake-time:hover {
    animation: shake-time 1s ease;
}
 
@keyframes shake-time {
    0% {
        transform: scale(1);
    }
    10%, 20% {
        transform: scale(0.9) rotate(-3deg);
    }
    30%, 50%, 70%, 90% {
        transform: scale(1.1) rotate(3deg);
    }
    40%, 60%, 80% {
        transform: scale(1.1) rotate(-3deg);
    }
    100% {
        transform: scale(1) rotate(0);
    }
}

/* Pop */
@-webkit-keyframes pop {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}

2-3-3摇摆效果

美高梅开户网址 15

html

JavaScript

<span class=”ech-wobble-c”>wobble-c</span> <span
class=”ech-wobble-t”>wobble-t</span> <span
class=”ech-wobble-b”>wobble-b</span>

1
2
3
<span class="ech-wobble-c">wobble-c</span>
<span class="ech-wobble-t">wobble-t</span>
<span class="ech-wobble-b">wobble-b</span>

css

.ech-wobble-t, .ech-skew-r-t, .ech-skew-l-t { transform-origin: 0 100%;
} .ech-wobble-b, .ech-skew-r-b, .ech-skew-l-b { transform-origin: 100%
0; } .ech-wobble-c:hover, .ech-wobble-t:hover,.ech-wobble-b:hover {
animation: wobble-x 1s ease-in-out; } @keyframes wobble-x { 16.65% {
-webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% {
-webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% {
-webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% {
-webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% {
-webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% {
-webkit-transform: skew(0); transform: skew(0); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.ech-wobble-t, .ech-skew-r-t, .ech-skew-l-t {
    transform-origin: 0 100%;
}
 
.ech-wobble-b, .ech-skew-r-b, .ech-skew-l-b {
    transform-origin: 100% 0;
}
 
.ech-wobble-c:hover, .ech-wobble-t:hover,.ech-wobble-b:hover {
    animation: wobble-x 1s ease-in-out;
}
@keyframes wobble-x {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg);
    }
    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg);
    }
    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg);
    }
    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg);
    }
    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg);
    }
    100% {
        -webkit-transform: skew(0);
        transform: skew(0);
    }
}

100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}

2-3-4摇摆效果

美高梅开户网址 16

html

JavaScript

<span class=”ech-swing”>swing</span>

1
<span class="ech-swing">swing</span>

css

.ech-swing:hover { animation: swing .5s ease alternate; } @keyframes
swing { 20% { transform: rotate(15deg); } 40% { transform:
rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform:
rotate(-5deg); } 100% { transform: rotate(0); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.ech-swing:hover {
    animation: swing .5s ease alternate;
}
 
@keyframes swing {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0);
    }
}

@keyframes pop {
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}

2-3-5震荡效果

美高梅开户网址 17

html

JavaScript

<span class=”ech-shake”>shake</span>

1
<span class="ech-shake">shake</span>

css

.ech-shake:hover { animation: shake .5s ease; } @keyframes shake { 0%,
100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform:
translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.ech-shake:hover {
    animation: shake .5s ease;
}
 
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}

100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}

2-3-6弹跳效果

美高梅开户网址 18

html

JavaScript

<span class=”ech-bounce”>bounce</span>

1
<span class="ech-bounce">bounce</span>

css

.ech-bounce:hover { animation: bounce 1s ease; } @keyframes bounce { 0%,
20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform:
translateY(-30px); } 60% { transform: translateY(-15px); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.ech-bounce:hover {
    animation: bounce 1s ease;
}
 
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

.pop {
display: inline-block;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.pop:hover, .pop:focus, .pop:active {
-webkit-animation-name: pop;
animation-name: pop;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

3.预设动画

受限于篇幅的尺寸,我也不想分手两篇小说写。关于那么些预设动画,小编就简单来说一下,写一下,笔者直接给三个差不多的操作演示,和一体化的代码!反正写法这几个也是比较单纯,无非正是改三个类名而已。难的是卡通的有些编纂,那几个需求创新意识,大家可以上网参考。

美高梅开户网址 19

(不掌握为啥,gif截大图放不上来,就放了张小的,我们结果上边包车型地铁jpg一起看把,便是通过上面包车型地铁按钮,显示动画,我们也足以在github上边下载代码看下)

美高梅开户网址 20

(完整代码比较多,这里贴出,但是建议大家稍微看一下,过一下就好,因为这个只看代码是会懵逼的,要在浏览器打开文件,一看调试一边看,这样会很简单,很容易的明白)

html代码

JavaScript

<!DOCTYPE html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>demo</title> <link
rel=”stylesheet” href=”reset.css”> <link rel=”stylesheet”
href=”ec-css2.css”> <style> .big { width: 500px; height: 500px;
border: 1px solid #ccc; margin: 100px auto 0 auto; } #demo { width:
200px; height: 100px; margin: 200px auto; background: #09f; } .btn-box
{ margin: 0 auto 100px auto; max-width: 1200px; font-size: 0; } .btn-box
a { font-size: 16px; display: inline-block; height: 40px; line-height:
40px; padding: 0 6px; color: #333; background: #ccc; margin: 0 0 10px
10px; } .btn-box .cur{ background: #09f; color: #fff; } .an-type{
width: 500px; height: 100px; margin: 0 auto; } .an-type a{ font-size:
16px; display: inline-block; height: 40px; line-height: 40px; padding: 0
6px; color: #333; background: #ccc; margin: 0 10px 10px 0; } .an-type
.cur{ background: #09f; color: #fff; } </style> </head>
<body> <div class=”big”> <div class=””
id=”demo”></div> </div> <div class=”an-type”> <a
href=”javascripr:;” data-class=”ec-infinite”
id=”infinite”>infinite</a> <a href=”javascripr:;”
data-class=”ec-alternate” id=”alternate”>alternate</a> <a
href=”javascripr:;” id=”stop”>stop</a> </div> <div
class=”btn-box”> <a href=”javascripr:;” data-class=”ec-bounce”
class=”an-a”>bounce</a> <a href=”javascripr:;”
data-class=”ec-bounce-in-b” class=”an-a”>bounce-in-b</a> <a
href=”javascripr:;” data-class=”ec-bounce-in-l”
class=”an-a”>bounce-in-l</a> <a href=”javascripr:;”
data-class=”ec-bounce-in-t” class=”an-a”>bounce-in-t</a> <a
href=”javascripr:;” data-class=”ec-bounce-in-r”
class=”an-a”>bounce-in-r</a> <a href=”javascripr:;”
data-class=”ec-bounce-out-b” class=”an-a”>bounce-out-b</a>
<a href=”javascripr:;” data-class=”ec-bounce-out-l”
class=”an-a”>bounce-out-l</a> <a href=”javascripr:;”
data-class=”ec-bounce-out-t” class=”an-a”>bounce-out-t</a>
<a href=”javascripr:;” data-class=”ec-bounce-out-r”
class=”an-a”>bounce-out-r</a> <br/> <a
href=”javascripr:;” data-class=”ec-wobble”
class=”an-a”>wobble</a> <a href=”javascripr:;”
data-class=”ec-wobble-t” class=”an-a”>wobble-t</a> <a
href=”javascripr:;” data-class=”ec-wobble-b”
class=”an-a”>wobble-b</a> <br/> <a href=”javascripr:;”
data-class=”ec-fade-in” class=”an-a”>fade-in</a> <a
href=”javascripr:;” data-class=”ec-fade-in-t”
class=”an-a”>fade-in-t</a> <a href=”javascripr:;”
data-class=”ec-fade-in-b” class=”an-a”>fade-in-b</a> <a
href=”javascripr:;” data-class=”ec-fade-in-l”
class=”an-a”>fade-in-l</a> <a href=”javascripr:;”
data-class=”ec-fade-in-r” class=”an-a”>fade-in-r</a> <a
href=”javascripr:;” data-class=”ec-fade-out”
class=”an-a”>fade-out</a> <a href=”javascripr:;”
data-class=”ec-fade-out-t” class=”an-a”>fade-out-t</a> <a
href=”javascripr:;” data-class=”ec-fade-out-b”
class=”an-a”>fade-out-b</a> <a href=”javascripr:;”
data-class=”ec-fade-out-l” class=”an-a”>fade-out-l</a> <a
href=”javascripr:;” data-class=”ec-fade-out-r”
class=”an-a”>fade-out-r</a> <br/> <a
href=”javascripr:;” data-class=”ec-rotate-in”
class=”an-a”>rotate-in</a> <a href=”javascripr:;”
data-class=”ec-rotate-in-rb” class=”an-a”>rotate-in-rb</a>
<a href=”javascripr:;” data-class=”ec-rotate-in-rt”
class=”an-a”>rotate-in-rt</a> <a href=”javascripr:;”
data-class=”ec-rotate-in-lb” class=”an-a”>rotate-in-lb</a>
<a href=”javascripr:;” data-class=”ec-rotate-in-lt”
class=”an-a”>rotate-in-lt</a> <a href=”javascripr:;”
data-class=”ec-rotate-out” class=”an-a”>rotate-out</a> <a
href=”javascripr:;” data-class=”ec-rotate-out-rb”
class=”an-a”>rotate-out-rb</a> <a href=”javascripr:;”
data-class=”ec-rotate-out-rt” class=”an-a”>rotate-out-rt</a>
<a href=”javascripr:;” data-class=”ec-rotate-out-lb”
class=”an-a”>rotate-out-lb</a> <a href=”javascripr:;”
data-class=”ec-rotate-out-lt” class=”an-a”>rotate-out-lt</a>
<br/> <a href=”javascripr:;” data-class=”ec-flip-in-x”
class=”an-a”>flip-in-x</a> <a href=”javascripr:;”
data-class=”ec-flip-in-y” class=”an-a”>flip-in-y</a> <a
href=”javascripr:;” data-class=”ec-flip-out-x”
class=”an-a”>flip-out-x</a> <a href=”javascripr:;”
data-class=”ec-flip-out-y” class=”an-a”>flip-out-y</a>
<br/> <a href=”javascripr:;” data-class=”ec-light-speed-in”
class=”an-a”>light-speed-in</a> <a href=”javascripr:;”
data-class=”ec-light-speed-out”
class=”an-a”>light-speed-out</a> <br/> <a
href=”javascripr:;” data-class=”ec-shake-time”
class=”an-a”>shake-time</a> <a href=”javascripr:;”
data-class=”ec-flash” class=”an-a”>flash</a> <a
href=”javascripr:;” data-class=”ec-rubber-band”
class=”an-a”>rubber-band</a> <a href=”javascripr:;”
data-class=”ec-rubber-band-fast”
class=”an-a”>rubber-band-fast</a> <a href=”javascripr:;”
data-class=”ec-swing” class=”an-a”>swing</a> <a
href=”javascripr:;” data-class=”ec-shake”
class=”an-a”>shake</a> <a href=”javascripr:;”
data-class=”ec-pulse-shrink” class=”an-a”>pulse-shrink</a>
<a href=”javascripr:;” data-class=”ec-pulse”
class=”an-a”>pulse</a> </div> </body> <script
src=”ec-do.js”></script> <script type=”text/javascript”>
window.onload = function () { var oDivDemo =
document.getElementById(“demo”), oDivBox =
document.getElementsByClassName(“btn-box”)[0],
oAan=oDivBox.getElementsByTagName(“a”),
oInfinite=document.getElementById(“infinite”),_infinite=false,
oAlternate=document.getElementById(“alternate”),_alternate=false,
oStop=document.getElementById(“stop”);
oStop.addEventListener(“click”,function(){ oDivDemo.className=””;
_infinite=false; _alternate=false; ecDo.removeClass(oInfinite,”cur”);
ecDo.removeClass(oAlternate,”cur”); ecDo.removeClass(oAan,”cur”); })
oInfinite.addEventListener(“click”,function(){ _infinite=!_infinite;
if(_infinite){ ecDo.addClass(oInfinite,”cur”)
ecDo.addClass(oDivDemo,”ec-infinite”); } else{
ecDo.removeClass(oInfinite,”cur”)
ecDo.removeClass(oDivDemo,”ec-infinite”); } })
oAlternate.addEventListener(“click”,function(){
_alternate=!_alternate; if(_alternate){
ecDo.addClass(oAlternate,”cur”) ecDo.addClass(oDivDemo,”ec-alternate”);
} else{ ecDo.removeClass(oAlternate,”cur”)
ecDo.removeClass(oDivDemo,”ec-alternate”); } })
oDivBox.addEventListener(“click”, function (e) { var e = e ||
window.event; var target = e.target || e.srcElement, _class = “”; if
(target.nodeName.toLowerCase() === ‘a’) { ecDo.addClass(target,”cur”);
ecDo.removeClass(ecDo.siblings(target,”a”),”cur”) _class
=target.getAttribute(“data-class”); oDivDemo.className = “”;
setTimeout(function () { ecDo.addClass(oDivDemo,_class);
if(_infinite){ ecDo.addClass(oDivDemo,”ec-infinite”); } else{
ecDo.removeClass(oDivDemo,”ec-infinite”); } if(_alternate){
ecDo.addClass(oDivDemo,”ec-alternate”); } else{
ecDo.removeClass(oDivDemo,”ec-alternate”); } }, 50) } }) }
</script> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="ec-css2.css">
    <style>
        .big {
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            margin: 100px auto 0 auto;
        }
 
        #demo {
            width: 200px;
            height: 100px;
            margin: 200px auto;
            background: #09f;
        }
 
        .btn-box {
            margin: 0 auto 100px auto;
            max-width: 1200px;
            font-size: 0;
        }
 
        .btn-box a {
            font-size: 16px;
            display: inline-block;
            height: 40px;
            line-height: 40px;
            padding: 0 6px;
            color: #333;
            background: #ccc;
            margin: 0 0 10px 10px;
        }
        .btn-box .cur{
            background: #09f;
            color: #fff;
        }
        .an-type{
            width: 500px;
            height: 100px;
            margin: 0 auto;
        }
        .an-type a{
            font-size: 16px;
            display: inline-block;
            height: 40px;
            line-height: 40px;
            padding: 0 6px;
            color: #333;
            background: #ccc;
            margin: 0 10px 10px 0;
        }
        .an-type .cur{
            background: #09f;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="big">
    <div class="" id="demo"></div>
</div>
<div class="an-type">
    <a href="javascripr:;" data-class="ec-infinite" id="infinite">infinite</a>
    <a href="javascripr:;" data-class="ec-alternate" id="alternate">alternate</a>
    <a href="javascripr:;" id="stop">stop</a>
</div>
<div class="btn-box">
    <a href="javascripr:;" data-class="ec-bounce" class="an-a">bounce</a>
    <a href="javascripr:;" data-class="ec-bounce-in-b" class="an-a">bounce-in-b</a>
    <a href="javascripr:;" data-class="ec-bounce-in-l" class="an-a">bounce-in-l</a>
    <a href="javascripr:;" data-class="ec-bounce-in-t" class="an-a">bounce-in-t</a>
    <a href="javascripr:;" data-class="ec-bounce-in-r" class="an-a">bounce-in-r</a>
    <a href="javascripr:;" data-class="ec-bounce-out-b" class="an-a">bounce-out-b</a>
    <a href="javascripr:;" data-class="ec-bounce-out-l" class="an-a">bounce-out-l</a>
    <a href="javascripr:;" data-class="ec-bounce-out-t" class="an-a">bounce-out-t</a>
    <a href="javascripr:;" data-class="ec-bounce-out-r" class="an-a">bounce-out-r</a>
    <br/>
    <a href="javascripr:;" data-class="ec-wobble" class="an-a">wobble</a>
    <a href="javascripr:;" data-class="ec-wobble-t" class="an-a">wobble-t</a>
    <a href="javascripr:;" data-class="ec-wobble-b" class="an-a">wobble-b</a>
    <br/>
    <a href="javascripr:;" data-class="ec-fade-in" class="an-a">fade-in</a>
    <a href="javascripr:;" data-class="ec-fade-in-t" class="an-a">fade-in-t</a>
    <a href="javascripr:;" data-class="ec-fade-in-b" class="an-a">fade-in-b</a>
    <a href="javascripr:;" data-class="ec-fade-in-l" class="an-a">fade-in-l</a>
    <a href="javascripr:;" data-class="ec-fade-in-r" class="an-a">fade-in-r</a>
    <a href="javascripr:;" data-class="ec-fade-out" class="an-a">fade-out</a>
    <a href="javascripr:;" data-class="ec-fade-out-t" class="an-a">fade-out-t</a>
    <a href="javascripr:;" data-class="ec-fade-out-b" class="an-a">fade-out-b</a>
    <a href="javascripr:;" data-class="ec-fade-out-l" class="an-a">fade-out-l</a>
    <a href="javascripr:;" data-class="ec-fade-out-r" class="an-a">fade-out-r</a>
    <br/>
    <a href="javascripr:;" data-class="ec-rotate-in" class="an-a">rotate-in</a>
    <a href="javascripr:;" data-class="ec-rotate-in-rb" class="an-a">rotate-in-rb</a>
    <a href="javascripr:;" data-class="ec-rotate-in-rt" class="an-a">rotate-in-rt</a>
    <a href="javascripr:;" data-class="ec-rotate-in-lb" class="an-a">rotate-in-lb</a>
    <a href="javascripr:;" data-class="ec-rotate-in-lt" class="an-a">rotate-in-lt</a>
    <a href="javascripr:;" data-class="ec-rotate-out" class="an-a">rotate-out</a>
    <a href="javascripr:;" data-class="ec-rotate-out-rb" class="an-a">rotate-out-rb</a>
    <a href="javascripr:;" data-class="ec-rotate-out-rt" class="an-a">rotate-out-rt</a>
    <a href="javascripr:;" data-class="ec-rotate-out-lb" class="an-a">rotate-out-lb</a>
    <a href="javascripr:;" data-class="ec-rotate-out-lt" class="an-a">rotate-out-lt</a>
    <br/>
    <a href="javascripr:;" data-class="ec-flip-in-x" class="an-a">flip-in-x</a>
    <a href="javascripr:;" data-class="ec-flip-in-y" class="an-a">flip-in-y</a>
    <a href="javascripr:;" data-class="ec-flip-out-x" class="an-a">flip-out-x</a>
    <a href="javascripr:;" data-class="ec-flip-out-y" class="an-a">flip-out-y</a>
    <br/>
    <a href="javascripr:;" data-class="ec-light-speed-in" class="an-a">light-speed-in</a>
    <a href="javascripr:;" data-class="ec-light-speed-out" class="an-a">light-speed-out</a>
    <br/>
    <a href="javascripr:;" data-class="ec-shake-time" class="an-a">shake-time</a>
    <a href="javascripr:;" data-class="ec-flash" class="an-a">flash</a>
    <a href="javascripr:;" data-class="ec-rubber-band" class="an-a">rubber-band</a>
    <a href="javascripr:;" data-class="ec-rubber-band-fast" class="an-a">rubber-band-fast</a>
    <a href="javascripr:;" data-class="ec-swing" class="an-a">swing</a>
    <a href="javascripr:;" data-class="ec-shake" class="an-a">shake</a>
    <a href="javascripr:;" data-class="ec-pulse-shrink" class="an-a">pulse-shrink</a>
    <a href="javascripr:;" data-class="ec-pulse" class="an-a">pulse</a>
</div>
</body>
<script src="ec-do.js"></script>
<script type="text/javascript">
    window.onload = function () {
        var oDivDemo = document.getElementById("demo"),
        oDivBox = document.getElementsByClassName("btn-box")[0],
        oAan=oDivBox.getElementsByTagName("a"),
        oInfinite=document.getElementById("infinite"),_infinite=false,
        oAlternate=document.getElementById("alternate"),_alternate=false,
        oStop=document.getElementById("stop");
        oStop.addEventListener("click",function(){
            oDivDemo.className="";
            _infinite=false;
            _alternate=false;
            ecDo.removeClass(oInfinite,"cur");
            ecDo.removeClass(oAlternate,"cur");
            ecDo.removeClass(oAan,"cur");
        })
        oInfinite.addEventListener("click",function(){
            _infinite=!_infinite;
            if(_infinite){
                ecDo.addClass(oInfinite,"cur")
                ecDo.addClass(oDivDemo,"ec-infinite");
            }
            else{
                ecDo.removeClass(oInfinite,"cur")
                ecDo.removeClass(oDivDemo,"ec-infinite");
            }
        })
        oAlternate.addEventListener("click",function(){
            _alternate=!_alternate;
            if(_alternate){
                ecDo.addClass(oAlternate,"cur")
                ecDo.addClass(oDivDemo,"ec-alternate");
            }
            else{
                ecDo.removeClass(oAlternate,"cur")
                ecDo.removeClass(oDivDemo,"ec-alternate");
            }
        })
        oDivBox.addEventListener("click", function (e) {
            var e = e || window.event;
            var target = e.target || e.srcElement, _class = "";
            if (target.nodeName.toLowerCase() === ‘a’) {
                ecDo.addClass(target,"cur");
                ecDo.removeClass(ecDo.siblings(target,"a"),"cur")
                _class =target.getAttribute("data-class");
                oDivDemo.className = "";
                setTimeout(function () {
                    ecDo.addClass(oDivDemo,_class);
                    if(_infinite){
                        ecDo.addClass(oDivDemo,"ec-infinite");
                    }
                    else{
                        ecDo.removeClass(oDivDemo,"ec-infinite");
                    }
                    if(_alternate){
                        ecDo.addClass(oDivDemo,"ec-alternate");
                    }
                    else{
                        ecDo.removeClass(oDivDemo,"ec-alternate");
                    }
                }, 50)
            }
        })
    }
</script>
</html>

css

/*动画效果*/ .ec-bounce-in-l { animation: bounce-in-l 1s ease; }
@keyframes bounce-in-l { 0%, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(.215, .61, .355, 1) } 0% {
opacity: 0; transform: translate3d(-3000px, 0, 0) } 60% { opacity: 1;
transform: translate3d(25px, 0, 0) } 75% { transform: translate3d(-10px,
0, 0) } 90% { transform: translate3d(5px, 0, 0) } to {
-webkit-transform: none; transform: none } } .ec-bounce-in-r {
animation: bounce-in-r 1s ease; } @keyframes bounce-in-r { 0%, 60%, 75%,
90%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1) }
0% { opacity: 0; transform: translate3d(3000px, 0, 0) } 60% { opacity:
1; transform: translate3d(-25px, 0, 0) } 75% { transform:
translate3d(10px, 0, 0) } 90% { transform: translate3d(-5px, 0, 0) } to
{ -webkit-transform: none; transform: none } } .ec-bounce-in-b{
animation: bounce-in-b 1s; } .ec-bounce-in-t{ animation: bounce-in-t 1s;
} @keyframes bounce-in-t { from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
0% { opacity: 0; transform: translate3d(0, -3000px, 0); } 60% { opacity:
1; transform: translate3d(0, 25px, 0); } 75% { transform: translate3d(0,
-10px, 0); } 90% { transform: translate3d(0, 5px, 0); } to { transform:
none; } } @keyframes bounce-in-b{ from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
0% { opacity: 0; transform: translate3d(0, 3000px, 0); } 60% { opacity:
1; transform: translate3d(0, -25px, 0); } 75% { transform:
translate3d(0, 10px, 0); } 90% { transform: translate3d(0, -5px, 0); }
to { transform: none; } } @keyframes bounce-out-b { 20% { transform:
translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; transform:
translate3d(0, -20px, 0); } to { opacity: 0; transform: translate3d(0,
2000px, 0); } } .ec-bounce-out-b { animation: bounce-out-b 1s; }
@keyframes bounce-out-l { 20% { opacity: 1; transform: translate3d(20px,
0, 0); } to { opacity: 0; transform: translate3d(-2000px, 0, 0); } }
.ec-bounce-out-l { animation: bounce-out-l 1s; } @keyframes bounce-out-r
{ 20% { opacity: 1; transform: translate3d(-20px, 0, 0); } to { opacity:
0; transform: translate3d(2000px, 0, 0); } } .ec-bounce-out-r {
animation: bounce-out-r 1s; } @keyframes bounce-out-t { 20% { transform:
translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; transform:
translate3d(0, 20px, 0); } to { opacity: 0; transform: translate3d(0,
-2000px, 0); } } .ec-bounce-out-t { animation: bounce-out-t 1s; }
/*心跳效果*/ .ec-pulse { animation: pulse 1s linear; }
.ec-pulse-shrink { animation: pulse .5s linear; } @keyframes pulse { 25%
{ transform: scale(1.1); } 75% { transform: scale(0.9); } } .ec-flash {
animation: flash .5s ease; } /*摇摆*/ .ec-swing { animation: swing .5s
ease; } @keyframes swing { 20% { transform: rotate(15deg); } 40% {
transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% {
transform: rotate(-5deg); } 100% { transform: rotate(0); } } /*摇摆*/
.ec-wobble-t{ transform-origin: 0 100%; } .ec-wobble-b{
transform-origin: 100% 0; } .ec-wobble,.ec-wobble-t,.ec-wobble-b {
animation: wobblex 1s ease-in-out; } @keyframes wobblex { 16.65% {
-webkit-transform: skew(-12deg); transform: skew(-12deg); } 33.3% {
-webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% {
-webkit-transform: skew(-6deg); transform: skew(-6deg); } 66.6% {
-webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% {
-webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% {
-webkit-transform: skew(0); transform: skew(0); } } /*闪烁*/
@keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0;
} } .ec-rubber-band { animation: rubber-band 1s; } .ec-rubber-band-fast
{ animation: rubber-band .5s; } @keyframes rubber-band { from {
transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1);
} 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform:
scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(.95, 1.05, 1); } 75%
{ transform: scale3d(1.05, .95, 1); } to { transform: scale3d(1, 1, 1);
} } /*仿闹钟振铃效果*/ .ec-shake-time{ animation: shake-time 1s ease;
} @keyframes shake-time { 0% { transform: scale(1); } 10%, 20% {
transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform:
scale(1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.1)
rotate(-3deg); } 100% { transform: scale(1) rotate(0); } }
/*弹跳变化*/ .ec-bounce{ animation: bounce 1s ease; } @keyframes
bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% {
transform: translateY(-30px); } 60% { transform: translateY(-15px); } }
/*震动*/ .ec-shake { animation: shake .5s ease; } @keyframes shake {
0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% {
transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform:
translateX(10px); } } /*折射率进入*/ @keyframes fade-in { from {
opacity: 0; } to { opacity: 1; } } .ec-fade-in { animation: fade-in 1s;
} @keyframes ec-fade-in-b { from { opacity: 0; transform: translate3d(0,
-100%, 0); } to { opacity: 1; transform: none; } } .ec-fade-in-b {
animation: ec-fade-in-b 1s; } @keyframes ec-fade-in-l { from { opacity:
0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform:
none; } } .ec-fade-in-l { animation: ec-fade-in-l 1s; } @keyframes
ec-fade-in-r { from { opacity: 0; transform: translate3d(100%, 0, 0); }
to { opacity: 1; transform: none; } } .ec-fade-in-r { animation:
ec-fade-in-r 1s; } @keyframes ec-fade-in-t { from { opacity: 0;
transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none;
} } .ec-fade-in-t { animation: ec-fade-in-t 1s; } @keyframes ec-fade-out
{ from { opacity: 1; } to { opacity: 0; } } .ec-fade-out { animation:
ec-fade-out 1s; } @keyframes ec-fade-out-b { from { opacity: 1; } to {
opacity: 0; transform: translate3d(0, 100%, 0); } } .ec-fade-out-b {
animation: ec-fade-out-b 1s; } @keyframes ec-fade-out-l { from {
opacity: 1; } to { opacity: 0; transform: translate3d(-100%, 0, 0); } }
.ec-fade-out-l { animation: ec-fade-out-l 1s; } @keyframes ec-fade-out-r
{ from { opacity: 1; } to { opacity: 0; transform: translate3d(100%, 0,
0); } } .ec-fade-out-r { animation: ec-fade-out-r 1s; } @keyframes
ec-fade-out-t { from { opacity: 1; } to { opacity: 0; transform:
translate3d(0, -100%, 0); } } .ec-fade-out-t { animation: ec-fade-out-t
1s; } /*旋转进出*/ @keyframes rotate-in{
0%{opacity:0;transform:rotate(-200deg);}
100%{opacity:1;transform:rotate(0);} } .ec-rotate-in { animation:
rotate-in 1s; } @keyframes rotate-in-lt{ 0%{transform-origin:left
bottom;transform:rotate(-90deg);opacity:0;} 100%{transform-origin:left
bottom;transform:rotate(0);opacity:1;} } .ec-rotate-in-lt { animation:
rotate-in-lt 1s; } @keyframes rotate-in-lb{ 0%{transform-origin:left
bottom;transform:rotate(90deg);opacity:0;} 100%{transform-origin:left
bottom;transform:rotate(0);opacity:1;} } .ec-rotate-in-lb { animation:
rotate-in-lb 1s; } @keyframes rotate-in-rt{ 0%{transform-origin:right
bottom;transform:rotate(90deg);opacity:0;} 100%{transform-origin:right
bottom;transform:rotate(0);opacity:1;} } .ec-rotate-in-rt { animation:
rotate-in-rt 1s; } @keyframes rotate-in-rb{ 0%{transform-origin:right
bottom;transform:rotate(-90deg);opacity:0;} 100%{transform-origin:right
bottom;transform:rotate(0);opacity:1;} } .ec-rotate-in-rb { animation:
rotate-in-rb 1s; } .ec-rotate-out { animation: rotate-out 1s; }
@keyframes rotate-out{ 0%{transform-origin:center
center;transform:rotate(0);opacity:1;} 100%{transform-origin:center
center;transform:rotate(200deg);opacity:0;} } .ec-rotate-out-lt {
animation: rotate-out-lt 1s; } @keyframes rotate-out-lt{
0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;} }
.ec-rotate-out-lb { animation: rotate-out-lb 1s; } @keyframes
rotate-out-lb{ 0%{transform-origin:left
bottom;transform:rotate(0);opacity:1;} 100%{transform-origin:left
bottom;transform:rotate(90deg);opacity:0;} } .ec-rotate-out-rt {
animation: rotate-out-rt 1s; } @keyframes rotate-out-rt{
0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;} }
.ec-rotate-out-rb { animation: rotate-out-rb 1s; } @keyframes
rotate-out-rb{ 0%{transform-origin:right
bottom;transform:rotate(0);opacity:1;} 100%{transform-origin:right
bottom;transform:rotate(-90deg);opacity:0;} } /*反过来进出*/ @keyframes
flip-in-x { from { transform: perspective(400px) rotate3d(1, 0, 0,
90deg); animation-timing-function: ease-in; opacity: 0; } 40% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
animation-timing-function: ease-in; } 60% { transform:
perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% {
transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to {
transform: perspective(400px); } } .ec-flip-in-x { animation: flip-in-x
1s; } @keyframes flip-in-y { from { transform: perspective(400px)
rotate3d(0, 1, 0, 90deg); animation-timing-function: ease-in; opacity:
0; } 40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
animation-timing-function: ease-in; } 60% { transform:
perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% {
transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to {
transform: perspective(400px); } } .ec-flip-in-y { animation: flip-in-y
1s; } @keyframes flip-out-x { from { transform: perspective(400px); }
30% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity:
1; } to { transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0; } } .ec-flip-out-x { animation: flip-out-x 1s; } @keyframes
flip-out-y { from { transform: perspective(400px); } 30% { transform:
perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to {
transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } }
.ec-flip-out-y { animation: flip-out-y 1s; } @keyframes light-speed-in {
from { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; }
60% { transform: skewX(20deg); opacity: 1; } 80% { transform:
skewX(-5deg); opacity: 1; } to { transform: none; opacity: 1; } }
.ec-light-speed-in { animation: light-speed-in 1s ease-out; } @keyframes
light-speed-out { from { opacity: 1; } to { transform: translate3d(100%,
0, 0) skewX(30deg); opacity: 0; } } .ec-light-speed-out { animation:
light-speed-out ease-in 1s; } /*极端次数执行动画*/ .ec-infinite{
animation-iteration-count: infinite; } .ec-alternate {
animation-direction: alternate; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
/*动画效果*/
.ec-bounce-in-l {
    animation: bounce-in-l 1s ease;
}
@keyframes bounce-in-l {
    0%, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0)
    }
    75% {
        transform: translate3d(-10px, 0, 0)
    }
    90% {
        transform: translate3d(5px, 0, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}
.ec-bounce-in-r {
    animation: bounce-in-r 1s ease;
}
@keyframes bounce-in-r {
    0%, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(3000px, 0, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0)
    }
    75% {
        transform: translate3d(10px, 0, 0)
    }
    90% {
        transform: translate3d(-5px, 0, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}
.ec-bounce-in-b{
    animation: bounce-in-b 1s;
}
.ec-bounce-in-t{
    animation: bounce-in-t 1s;
}
@keyframes bounce-in-t {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
 
    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);
    }
 
    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);
    }
 
    75% {
        transform: translate3d(0, -10px, 0);
    }
 
    90% {
        transform: translate3d(0, 5px, 0);
    }
 
    to {
        transform: none;
    }
}
@keyframes bounce-in-b{
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
 
    0% {
        opacity: 0;
        transform: translate3d(0, 3000px, 0);
    }
 
    60% {
        opacity: 1;
        transform: translate3d(0, -25px, 0);
    }
 
    75% {
        transform: translate3d(0, 10px, 0);
    }
 
    90% {
        transform: translate3d(0, -5px, 0);
    }
 
    to {
        transform: none;
    }
}
@keyframes bounce-out-b {
    20% {
        transform: translate3d(0, 10px, 0);
    }
 
    40%, 45% {
        opacity: 1;
        transform: translate3d(0, -20px, 0);
    }
 
    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0);
    }
}
 
.ec-bounce-out-b {
    animation: bounce-out-b 1s;
}
 
@keyframes bounce-out-l {
    20% {
        opacity: 1;
        transform: translate3d(20px, 0, 0);
    }
 
    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0);
    }
}
 
.ec-bounce-out-l {
    animation: bounce-out-l 1s;
}
 
@keyframes bounce-out-r {
    20% {
        opacity: 1;
        transform: translate3d(-20px, 0, 0);
    }
 
    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0);
    }
}
 
.ec-bounce-out-r {
    animation: bounce-out-r 1s;
}
 
@keyframes bounce-out-t {
    20% {
        transform: translate3d(0, -10px, 0);
    }
 
    40%, 45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0);
    }
 
    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0);
    }
}
 
.ec-bounce-out-t {
    animation: bounce-out-t 1s;
}
 
/*心跳效果*/
.ec-pulse {
    animation: pulse 1s linear;
}
.ec-pulse-shrink {
    animation: pulse .5s linear;
}
@keyframes pulse {
    25% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(0.9);
    }
}
.ec-flash {
    animation: flash .5s ease;
}
/*摇摆*/
.ec-swing {
    animation: swing .5s ease;
}
@keyframes swing {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0);
    }
}
/*摇摆*/
.ec-wobble-t{
    transform-origin: 0 100%;
}
 
.ec-wobble-b{
    transform-origin: 100% 0;
}
 
.ec-wobble,.ec-wobble-t,.ec-wobble-b {
    animation: wobblex 1s ease-in-out;
}
 
@keyframes wobblex {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg);
    }
    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg);
    }
    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg);
    }
    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg);
    }
    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg);
    }
    100% {
        -webkit-transform: skew(0);
        transform: skew(0);
    }
}
/*闪烁*/
@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}
.ec-rubber-band {
    animation: rubber-band 1s;
}
.ec-rubber-band-fast {
    animation: rubber-band .5s;
}
@keyframes rubber-band {
    from {
        transform: scale3d(1, 1, 1);
    }
 
    30% {
        transform: scale3d(1.25, 0.75, 1);
    }
 
    40% {
        transform: scale3d(0.75, 1.25, 1);
    }
 
    50% {
        transform: scale3d(1.15, 0.85, 1);
    }
 
    65% {
        transform: scale3d(.95, 1.05, 1);
    }
 
    75% {
        transform: scale3d(1.05, .95, 1);
    }
 
    to {
        transform: scale3d(1, 1, 1);
    }
}
/*仿闹钟振铃效果*/
.ec-shake-time{
    animation: shake-time 1s ease;
}
 
@keyframes shake-time {
    0% {
        transform: scale(1);
    }
    10%, 20% {
        transform: scale(0.9) rotate(-3deg);
    }
    30%, 50%, 70%, 90% {
        transform: scale(1.1) rotate(3deg);
    }
    40%, 60%, 80% {
        transform: scale(1.1) rotate(-3deg);
    }
    100% {
        transform: scale(1) rotate(0);
    }
}
 
/*弹跳变化*/
.ec-bounce{
    animation: bounce 1s ease;
}
 
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}
 
/*震动*/
.ec-shake {
    animation: shake .5s ease;
}
 
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}
/*透明度进入*/
@keyframes fade-in {
    from {
        opacity: 0;
    }
 
    to {
        opacity: 1;
    }
}
 
.ec-fade-in {
    animation: fade-in 1s;
}
 
@keyframes ec-fade-in-b {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
 
    to {
        opacity: 1;
        transform: none;
    }
}
 
.ec-fade-in-b {
    animation: ec-fade-in-b 1s;
}
 
@keyframes ec-fade-in-l {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
 
    to {
        opacity: 1;
        transform: none;
    }
}
 
.ec-fade-in-l {
    animation: ec-fade-in-l 1s;
}
 
@keyframes ec-fade-in-r {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
 
    to {
        opacity: 1;
        transform: none;
    }
}
 
.ec-fade-in-r {
    animation: ec-fade-in-r 1s;
}
 
@keyframes ec-fade-in-t {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
 
    to {
        opacity: 1;
        transform: none;
    }
}
 
.ec-fade-in-t {
    animation: ec-fade-in-t 1s;
}
 
@keyframes ec-fade-out {
    from {
        opacity: 1;
    }
 
    to {
        opacity: 0;
    }
}
 
.ec-fade-out {
    animation: ec-fade-out 1s;
}
 
@keyframes ec-fade-out-b {
    from {
        opacity: 1;
    }
 
    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
}
 
.ec-fade-out-b {
    animation: ec-fade-out-b 1s;
}
 
@keyframes ec-fade-out-l {
    from {
        opacity: 1;
    }
 
    to {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
}
 
.ec-fade-out-l {
    animation: ec-fade-out-l 1s;
}
 
 
@keyframes ec-fade-out-r {
    from {
        opacity: 1;
    }
 
    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
}
 
.ec-fade-out-r {
    animation: ec-fade-out-r 1s;
}
 
@keyframes ec-fade-out-t {
    from {
        opacity: 1;
    }
 
    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
}
 
.ec-fade-out-t {
    animation: ec-fade-out-t 1s;
}
/*旋转进出*/
@keyframes rotate-in{
    0%{opacity:0;transform:rotate(-200deg);}
    100%{opacity:1;transform:rotate(0);}
}
.ec-rotate-in {
    animation: rotate-in 1s;
}
@keyframes rotate-in-lt{
    0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
    100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-lt {
    animation: rotate-in-lt 1s;
}
@keyframes rotate-in-lb{
    0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
    100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-lb {
    animation: rotate-in-lb 1s;
}
@keyframes rotate-in-rt{
    0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
    100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-rt {
    animation: rotate-in-rt 1s;
}
@keyframes rotate-in-rb{
    0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
    100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-rb {
    animation: rotate-in-rb 1s;
}
 
.ec-rotate-out {
    animation: rotate-out 1s;
}
@keyframes rotate-out{
    0%{transform-origin:center center;transform:rotate(0);opacity:1;}
    100%{transform-origin:center center;transform:rotate(200deg);opacity:0;}
}
.ec-rotate-out-lt {
    animation: rotate-out-lt 1s;
}
@keyframes rotate-out-lt{
    0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
    100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
}
.ec-rotate-out-lb {
    animation: rotate-out-lb 1s;
}
@keyframes rotate-out-lb{
    0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
    100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
}
.ec-rotate-out-rt {
    animation: rotate-out-rt 1s;
}
@keyframes rotate-out-rt{
    0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
    100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
}
.ec-rotate-out-rb {
    animation: rotate-out-rb 1s;
}
@keyframes rotate-out-rb{
    0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
    100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
}
/*翻转进出*/
@keyframes flip-in-x {
    from {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }
 
    40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        animation-timing-function: ease-in;
    }
 
    60% {
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }
 
    80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
 
    to {
        transform: perspective(400px);
    }
}
 
.ec-flip-in-x {
    animation: flip-in-x 1s;
}
 
@keyframes flip-in-y {
    from {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }
 
    40% {
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        animation-timing-function: ease-in;
    }
 
    60% {
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }
 
    80% {
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }
 
    to {
        transform: perspective(400px);
    }
}
 
.ec-flip-in-y {
    animation: flip-in-y 1s;
}
 
@keyframes flip-out-x {
    from {
        transform: perspective(400px);
    }
 
    30% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }
 
    to {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}
 
.ec-flip-out-x {
    animation: flip-out-x 1s;
}
 
@keyframes flip-out-y {
    from {
        transform: perspective(400px);
    }
 
    30% {
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }
 
    to {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}
 
.ec-flip-out-y {
    animation: flip-out-y 1s;
}
 
@keyframes light-speed-in {
    from {
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }
 
    60% {
        transform: skewX(20deg);
        opacity: 1;
    }
 
    80% {
        transform: skewX(-5deg);
        opacity: 1;
    }
 
    to {
        transform: none;
        opacity: 1;
    }
}
 
.ec-light-speed-in {
    animation: light-speed-in 1s ease-out;
}
 
@keyframes light-speed-out {
    from {
        opacity: 1;
    }
 
    to {
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}
 
.ec-light-speed-out {
    animation: light-speed-out ease-in 1s;
}
/*无限次数执行动画*/
.ec-infinite{
    animation-iteration-count: infinite;
}
 
.ec-alternate {
    animation-direction: alternate;
}

/* Rotate */
.rotate {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.rotate:hover, .rotate:focus, .rotate:active {
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}

4.未知探索

好了,说完了hover动画和预设动画,作者付出的时候,发现了如此有个别妙趣横生的东西,作者也准备继续商量,也建议我们玩下,说不定曾几何时做出了高大的东西!如下边包车型客车栗子!

下边说的卡通,不分hover动画和预设动画,大家留意

/* Grow Rotate */
.grow-rotate {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow-rotate:hover, .grow-rotate:focus, .grow-rotate:active {
-webkit-transform: scale(1.1) rotate(4deg);
transform: scale(1.1) rotate(4deg);
}

4-1.极端执行动画

八个平凡的卡通片,加上无限执行,一般会产出很和气的效益,

美高梅开户网址 21

而是某些时候的机能适得其反

美高梅开户网址 22

/* Float */
.float {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.float:hover, .float:focus, .float:active {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}

4-2.反向动画

在4-1的底子上,加上海大学势执行动画,也会有不等同的职能

没加反向动画效果
美高梅开户网址 23

累加反向动画效果

美高梅开户网址 24

/* Sink */
.sink {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.sink:hover, .sink:focus, .sink:active {
-webkit-transform: translateY(5px);
transform: translateY(5px);
}

4-3.组成效应

黑影效果和其他功用的组成,(gif看不出阴影效果,哎。。)
美高梅开户网址 25

下面的多少个的板栗
css代码不变,差距是html代码,多加了一部分类名
美高梅开户网址 26

上边多少个是自笔者在支付时候发现的板栗,这几个笔者会继续探讨,也期待大家能研讨,钻探出什么样好玩的功力,可能动画片写法,欢迎分享!

/* Hover */
@-webkit-keyframes hover {
50% {
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}

5.鸡肋抉择

在写css3代码库的时候,我也意识封装css3的三个鸡肋情状。

1.css3的效率太过分灵活,各样,封装相当简单出现众口难调的情状,以及各种品种的效能说不定出现效果大概,但便是不等同,那样就是说封装的库并不吻合用在项目上。

2.还有一些在乎,css3功用基本上每3个门类都以有使用,并且是常用,可是经常项目要用到的css3效果最多也就13个,而且也简单,手写一点也不慢得以兑现,根本没须求去引1个插件或许库。

不过最后笔者或许坚韧不拔写下去了,原因如下

1.要是项目支付,对动画片效果的渴求基本不会完成尤其的严苛的程度,小编完全能够多引二个文本,增添本身的费用作用,压缩过后的文件可能只有10K左右,能够承受。

2.尽管在品种用不上,我也能够看成是练手,学习的效能。借使之后项目需求动画效果,就算动画效果跟自家封装的差异等,作者也能够望着来进展修改。

3.纵然开发的时候没利用上那些库,万一略拉动画,笔者写过,可是忘了怎么写,也得以回头看怎么落到实处!

4.假设开发的时候,不清楚放什么效益好,那些库,也能起到一定的参考意义!

5.今后多写多少个,说不定起到一个分流思维的效劳,写了那些效应,想到了另一些效果怎么写,恐怕想到还有哪些作用能够写,那几个也是那多少个好的1个结实和获得!

100% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
}

6.小结

好了,css3的代码库封装到此地就大多了,尽管您能看完全篇,你早正是勇士了,表明你很有耐心,看完登时通晓,那些对于豪门来说难题相当小,终究不是哪些逻辑性强的代码。小编想要的效应就算都落到实处了,然而以往肯定也是要修改完善的(至少看源码的话,笔者自个儿看得都有点乱,不过临时之间又不知底该如若重新整建,就先放上去了)。话说回来,通过以上的案例,希望能帮到大家,最雅观便是能起到分散思维的作用,正是通过自作者的案例,能让我们清楚其他的局地卡通咋做,只怕想到有何雅观动画效果。web前端这一行,最根本的正是多练,大家除了看外人的体系,博客之外,一定要多练,多写,那样前进才会更快,知识才会记得更牢。
最终,如若我们以为自个儿哪里写得不得了或许写错了,欢迎提议。有怎么着好的想法,随时给你宝贵的建议小编!项目小编也置于github下面了!有亟待的能够去看下,star下ec-css!

1 赞 9 收藏
评论

美高梅开户网址 27

@keyframes hover {
50% {
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}

100% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
}

.hover {
display: inline-block;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hover:hover, .hover:focus, .hover:active {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
-webkit-animation-name: hover;
animation-name: hover;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}

/* Hang */
@-webkit-keyframes hang {
50% {
-webkit-transform: translateY(3px);
transform: translateY(3px);
}

100% {
-webkit-transform: translateY(6px);
transform: translateY(6px);
}
}

@keyframes hang {
50% {
-webkit-transform: translateY(3px);
transform: translateY(3px);
}

100% {
-webkit-transform: translateY(6px);
transform: translateY(6px);
}
}

.hang {
display: inline-block;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hang:hover, .hang:focus, .hang:active {
-webkit-transform: translateY(6px);
transform: translateY(6px);
-webkit-animation-name: hang;
animation-name: hang;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}

/* Skew */
.skew {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.skew:hover, .skew:focus, .skew:active {
-webkit-transform: skew(-10deg);
transform: skew(-10deg);
}

/* Skew Forward */
.skew-forward {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.skew-forward:hover, .skew-forward:focus, .skew-forward:active {
-webkit-transform: skew(-10deg);
transform: skew(-10deg);
}

/* Skew Backward */
.skew-backward {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.skew-backward:hover, .skew-backward:focus, .skew-backward:active {
-webkit-transform: skew(10deg);
transform: skew(10deg);
}

/* Wobble Vertical */
@-webkit-keyframes wobble-vertical {
16.65% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}

33.3% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}

49.95% {
-webkit-transform: translateY(4px);
transform: translateY(4px);
}

66.6% {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}

83.25% {
-webkit-transform: translateY(1px);
transform: translateY(1px);
}

100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}

@keyframes wobble-vertical {
16.65% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}

33.3% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}

49.95% {
-webkit-transform: translateY(4px);
transform: translateY(4px);
}

66.6% {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}

83.25% {
-webkit-transform: translateY(1px);
transform: translateY(1px);
}

100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}

.wobble-vertical {
display: inline-block;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-vertical:hover, .wobble-vertical:focus, .wobble-vertical:active
{
-webkit-animation-name: wobble-vertical;
animation-name: wobble-vertical;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

/* Wobble Horizontal */
@-webkit-keyframes wobble-horizontal {
16.65% {
-webkit-transform: translateX(8px);
transform: translateX(8px);
}

33.3% {
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}

49.95% {
-webkit-transform: translateX(4px);
transform: translateX(4px);
}

66.6% {
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
}

83.25% {
-webkit-transform: translateX(1px);
transform: translateX(1px);
}

100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}

@keyframes wobble-horizontal {
16.65% {
-webkit-transform: translateX(8px);
transform: translateX(8px);
}

33.3% {
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}

49.95% {
-webkit-transform: translateX(4px);
transform: translateX(4px);
}

66.6% {
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
}

83.25% {
-webkit-transform: translateX(1px);
transform: translateX(1px);
}

100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}

.wobble-horizontal {
display: inline-block;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-horizontal:hover, .wobble-horizontal:focus,
.wobble-horizontal:active {
-webkit-animation-name: wobble-horizontal;
animation-name: wobble-horizontal;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

/* Wobble To Bottom Right */
@-webkit-keyframes wobble-to-bottom-right {
16.65% {
-webkit-transform: translate(8px, 8px);
transform: translate(8px, 8px);
}

33.3% {
-webkit-transform: translate(-6px, -6px);
transform: translate(-6px, -6px);
}

49.95% {
-webkit-transform: translate(4px, 4px);
transform: translate(4px, 4px);
}

66.6% {
-webkit-transform: translate(-2px, -2px);
transform: translate(-2px, -2px);
}

83.25% {
-webkit-transform: translate(1px, 1px);
transform: translate(1px, 1px);
}

100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}

@keyframes wobble-to-bottom-right {
16.65% {
-webkit-transform: translate(8px, 8px);
transform: translate(8px, 8px);
}

33.3% {
-webkit-transform: translate(-6px, -6px);
transform: translate(-6px, -6px);
}

49.95% {
-webkit-transform: translate(4px, 4px);
transform: translate(4px, 4px);
}

66.6% {
-webkit-transform: translate(-2px, -2px);
transform: translate(-2px, -2px);
}

83.25% {
-webkit-transform: translate(1px, 1px);
transform: translate(1px, 1px);
}

100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}

.wobble-to-bottom-right {
display: inline-block;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-to-bottom-right:hover, .wobble-to-bottom-right:focus,
.wobble-to-bottom-right:active {
-webkit-animation-name: wobble-to-bottom-right;
animation-name: wobble-to-bottom-right;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

/* Wobble To Top Right */
@-webkit-keyframes wobble-to-top-right {
16.65% {
-webkit-transform: translate(8px, -8px);
transform: translate(8px, -8px);
}

33.3% {
-webkit-transform: translate(-6px, 6px);
transform: translate(-6px, 6px);
}

49.95% {
-webkit-transform: translate(4px, -4px);
transform: translate(4px, -4px);
}

66.6% {
-webkit-transform: translate(-2px, 2px);
transform: translate(-2px, 2px);
}

83.25% {
-webkit-transform: translate(1px, -1px);
transform: translate(1px, -1px);
}

100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}

@keyframes wobble-to-top-right {
16.65% {
-webkit-transform: translate(8px, -8px);
transform: translate(8px, -8px);
}

33.3% {
-webkit-transform: translate(-6px, 6px);
transform: translate(-6px, 6px);
}

49.95% {
-webkit-transform: translate(4px, -4px);
transform: translate(4px, -4px);
}

66.6% {
-webkit-transform: translate(-2px, 2px);
transform: translate(-2px, 2px);
}

83.25% {
-webkit-transform: translate(1px, -1px);
transform: translate(1px, -1px);
}

100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}

.wobble-to-top-right {
display: inline-block;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-to-top-right:hover, .wobble-to-top-right:focus,
.wobble-to-top-right:active {
-webkit-animation-name: wobble-to-top-right;
animation-name: wobble-to-top-right;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

/* Wobble Top */
@-webkit-keyframes wobble-top {
16.65% {
-webkit-transform: skew(-12deg);
transform: skew(-12deg);
}

33.3% {
-webkit-transform: skew(10deg);
transform: skew(10deg);
}

49.95% {
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}

66.6% {
-webkit-transform: skew(4deg);
transform: skew(4deg);
}

83.25% {
-webkit-transform: skew(-2deg);
transform: skew(-2deg);
}

100% {
-webkit-transform: skew(0);
transform: skew(0);
}
}

@keyframes wobble-top {
16.65% {
-webkit-transform: skew(-12deg);
transform: skew(-12deg);
}

33.3% {
-webkit-transform: skew(10deg);
transform: skew(10deg);
}

49.95% {
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}

66.6% {
-webkit-transform: skew(4deg);
transform: skew(4deg);
}

83.25% {
-webkit-transform: skew(-2deg);
transform: skew(-2deg);
}

100% {
-webkit-transform: skew(0);
transform: skew(0);
}
}

.wobble-top {
display: inline-block;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-top:hover, .wobble-top:focus, .wobble-top:active {
-webkit-animation-name: wobble-top;
animation-name: wobble-top;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

/* Wobble Bottom */
@-webkit-keyframes wobble-bottom {
16.65% {
-webkit-transform: skew(-12deg);
transform: skew(-12deg);
}

33.3% {
-webkit-transform: skew(10deg);
transform: skew(10deg);
}

49.95% {
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}

66.6% {
-webkit-transform: skew(4deg);
transform: skew(4deg);
}

83.25% {
-webkit-transform: skew(-2deg);
transform: skew(-2deg);
}

100% {
-webkit-transform: skew(0);
transform: skew(0);
}
}

@keyframes wobble-bottom {
16.65% {
-webkit-transform: skew(-12deg);
transform: skew(-12deg);
}

33.3% {
-webkit-transform: skew(10deg);
transform: skew(10deg);
}

49.95% {
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}

66.6% {
-webkit-transform: skew(4deg);
transform: skew(4deg);
}

83.25% {
-webkit-transform: skew(-2deg);
transform: skew(-2deg);
}

100% {
-webkit-transform: skew(0);
transform: skew(0);
}
}

.wobble-bottom {
display: inline-block;
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-bottom:hover, .wobble-bottom:focus, .wobble-bottom:active {
-webkit-animation-name: wobble-bottom;
animation-name: wobble-bottom;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

/* Wobble Skew */
@-webkit-keyframes wobble-skew {
16.65% {
-webkit-transform: skew(-12deg);
transform: skew(-12deg);
}

33.3% {
-webkit-transform: skew(10deg);
transform: skew(10deg);
}

49.95% {
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}

66.6% {
-webkit-transform: skew(4deg);
transform: skew(4deg);
}

83.25% {
-webkit-transform: skew(-2deg);
transform: skew(-2deg);
}

100% {
-webkit-transform: skew(0);
transform: skew(0);
}
}

@keyframes wobble-skew {
16.65% {
-webkit-transform: skew(-12deg);
transform: skew(-12deg);
}

33.3% {
-webkit-transform: skew(10deg);
transform: skew(10deg);
}

49.95% {
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}

66.6% {
-webkit-transform: skew(4deg);
transform: skew(4deg);
}

83.25% {
-webkit-transform: skew(-2deg);
transform: skew(-2deg);
}

100% {
-webkit-transform: skew(0);
transform: skew(0);
}
}

.wobble-skew {
display: inline-block;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-skew:hover, .wobble-skew:focus, .wobble-skew:active {
-webkit-animation-name: wobble-skew;
animation-name: wobble-skew;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

/* Buzz */
@-webkit-keyframes buzz {
50% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}

100% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
}

@keyframes buzz {
50% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}

100% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
}

.buzz {
display: inline-block;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.buzz:hover, .buzz:focus, .buzz:active {
-webkit-animation-name: buzz;
animation-name: buzz;
-webkit-animation-duration: 0.15s;
animation-duration: 0.15s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}

/* Buzz Out */
@-webkit-keyframes buzz-out {
10% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}

20% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}

30% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}

40% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}

50% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}

60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}

70% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}

80% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}

90% {
-webkit-transform: translateX(1px) rotate(0);
transform: translateX(1px) rotate(0);
}

100% {
-webkit-transform: translateX(-1px) rotate(0);
transform: translateX(-1px) rotate(0);
}
}

@keyframes buzz-out {
10% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}

20% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}

30% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}

40% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}

50% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}

60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}

70% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}

80% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}

90% {
-webkit-transform: translateX(1px) rotate(0);
transform: translateX(1px) rotate(0);
}

100% {
-webkit-transform: translateX(-1px) rotate(0);
transform: translateX(-1px) rotate(0);
}
}

.buzz-out {
display: inline-block;
美高梅开户网址,-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.buzz-out:hover, .buzz-out:focus, .buzz-out:active {
-webkit-animation-name: buzz-out;
animation-name: buzz-out;
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

/* BORDER TRANSITIONS */
/* Border Fade */
.border-fade {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0);
/* Hack to improve aliasing on mobile/tablet devices */
}
.border-fade:hover, .border-fade:focus, .border-fade:active {
box-shadow: inset 0 0 0 4px #666666, 0 0 1px rgba(0, 0, 0, 0);
/* Hack to improve aliasing on mobile/tablet devices */
}

/* Hollow */
.hollow {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: background;
transition-property: background;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0);
/* Hack to improve aliasing on mobile/tablet devices */
}
.hollow:hover, .hollow:focus, .hollow:active {
background: none;
}

/* Trim */
.trim {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.trim:before {
content: ”;
position: absolute;
border: white solid 4px;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
opacity: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: opacity;
transition-property: opacity;
}
.trim:hover:before, .trim:focus:before, .trim:active:before {
opacity: 1;
}

/* Outline Outward */
.outline-outward {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.outline-outward:before {
content: ”;
position: absolute;
border: #e1e1e1 solid 4px;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: top, right, bottom, left;
transition-property: top, right, bottom, left;
}
.outline-outward:hover:before, .outline-outward:focus:before,
.outline-outward:active:before {
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
}

/* Outline Inward */
.outline-inward {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.outline-inward:before {
pointer-events: none;
content: ”;
position: absolute;
border: #e1e1e1 solid 4px;
top: -16px;
right: -16px;
bottom: -16px;
left: -16px;
opacity: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: top, right, bottom, left;
transition-property: top, right, bottom, left;
}
.outline-inward:hover:before, .outline-inward:focus:before,
.outline-inward:active:before {
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
opacity: 1;
}

/* Round Corners */
.round-corners {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: border-radius;
transition-property: border-radius;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.round-corners:hover, .round-corners:focus, .round-corners:active {
border-radius: 1em;
}

/* SHADOW/GLOW TRANSITIONS */
/* Glow */
.glow {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.glow:hover, .glow:focus, .glow:active {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

/* Box Shadow Outset */
.box-shadow-outset {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.box-shadow-outset:hover, .box-shadow-outset:focus,
.box-shadow-outset:active {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}

/* Box Shadow Inset */
.box-shadow-inset {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
/* Hack to improve aliasing on mobile/tablet devices */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.box-shadow-inset:hover, .box-shadow-inset:focus,
.box-shadow-inset:active {
box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0,
0);
/* Hack to improve aliasing on mobile/tablet devices */
}

/* Float Shadow */
.float-shadow {
display: inline-block;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.float-shadow:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: ”;
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%,
rgba(0, 0, 0, 0) 80%);
/* W3C */
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform, opacity;
transition-property: transform, opacity;
}
.float-shadow:hover, .float-shadow:focus, .float-shadow:active {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
/* move the element up by 5px */
}
.float-shadow:hover:before, .float-shadow:focus:before,
.float-shadow:active:before {
opacity: 1;
-webkit-transform: translateY(5px);
transform: translateY(5px);
/* move the element down by 5px (it will stay in place because it’s
attached to the element that also moves up 5px) */
}

/* Hover Shadow */
@-webkit-keyframes hover {
50% {
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}

100% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
}

@keyframes hover {
50% {
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}

100% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
}

@-webkit-keyframes hover-shadow {
0% {
-webkit-transform: translateY(6px);
transform: translateY(6px);
opacity: .4;
}

50% {
-webkit-transform: translateY(3px);
transform: translateY(3px);
opacity: 1;
}

100% {
-webkit-transform: translateY(6px);
transform: translateY(6px);
opacity: .4;
}
}

@keyframes hover-shadow {
0% {
-webkit-transform: translateY(6px);
transform: translateY(6px);
opacity: .4;
}

50% {
-webkit-transform: translateY(3px);
transform: translateY(3px);
opacity: 1;
}

100% {
-webkit-transform: translateY(6px);
transform: translateY(6px);
opacity: .4;
}
}

.hover-shadow {
display: inline-block;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hover-shadow:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: ”;
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%,
rgba(0, 0, 0, 0) 80%);
/* W3C */
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform, opacity;
transition-property: transform, opacity;
}
.hover-shadow:hover, .hover-shadow:focus, .hover-shadow:active {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
-webkit-animation-name: hover;
animation-name: hover;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
.hover-shadow:hover:before, .hover-shadow:focus:before,
.hover-shadow:active:before {
opacity: .4;
-webkit-transform: translateY(6px);
transform: translateY(6px);
-webkit-animation-name: hover-shadow;
animation-name: hover-shadow;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}

/* Shadow Radial */
.shadow-radial {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.shadow-radial:before, .shadow-radial:after {
pointer-events: none;
position: absolute;
content: ”;
left: 0;
width: 100%;
box-sizing: border-box;
background-repeat: no-repeat;
height: 5px;
opacity: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: opacity;
transition-property: opacity;
}
.shadow-radial:before {
bottom: 100%;
background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%,
rgba(0, 0, 0, 0) 80%);
}
.shadow-radial:after {
top: 100%;
background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%,
rgba(0, 0, 0, 0) 80%);
}
.shadow-radial:hover:before, .shadow-radial:focus:before,
.shadow-radial:active:before, .shadow-radial:hover:after,
.shadow-radial:focus:after, .shadow-radial:active:after {
opacity: 1;
}

/* SPEECH BUBBLES */
/* Bubble Top */
.bubble-top {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-top:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: ”;
border-style: solid;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: top;
transition-property: top;
left: calc(50% – 10px);
top: 0;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #e1e1e1 transparent;
}
.bubble-top:hover:before, .bubble-top:focus:before,
.bubble-top:active:before {
top: -10px;
}

/* Bubble Right */
.bubble-right {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-right:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: ”;
border-style: solid;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: right;
transition-property: right;
top: calc(50% – 10px);
right: 0;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #e1e1e1;
}
.bubble-right:hover:before, .bubble-right:focus:before,
.bubble-right:active:before {
right: -10px;
}

/* Bubble Bottom */
.bubble-bottom {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-bottom:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: ”;
border-style: solid;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: bottom;
transition-property: bottom;
left: calc(50% – 10px);
bottom: 0;
border-width: 10px 10px 0 10px;
border-color: #e1e1e1 transparent transparent transparent;
}
.bubble-bottom:hover:before, .bubble-bottom:focus:before,
.bubble-bottom:active:before {
bottom: -10px;
}

/* Bubble Left */
.bubble-left {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-left:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: ”;
border-style: solid;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: left;
transition-property: left;
top: calc(50% – 10px);
left: 0;
border-width: 10px 10px 10px 0;
border-color: transparent #e1e1e1 transparent transparent;
}
.bubble-left:hover:before, .bubble-left:focus:before,
.bubble-left:active:before {
left: -10px;
}

/* Bubble Float Top */
.bubble-float-top {
display: inline-block;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-float-top:before {
position: absolute;
z-index: -1;
content: ”;
left: calc(50% – 10px);
top: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #e1e1e1 transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: top;
transition-property: top;
}
.bubble-float-top:hover, .bubble-float-top:focus,
.bubble-float-top:active {
-webkit-transform: translateY(5px) translateZ(0);
transform: translateY(5px) translateZ(0);
}
.bubble-float-top:hover:before, .bubble-float-top:focus:before,
.bubble-float-top:active:before {
top: -10px;
}

/* Bubble Float Right */
.bubble-float-right {
display: inline-block;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-float-right:before {
position: absolute;
z-index: -1;
top: calc(50% – 10px);
right: 0;
content: ”;
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #e1e1e1;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: right;
transition-property: right;
}
.bubble-float-right:hover, .bubble-float-right:focus,
.bubble-float-right:active {
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
.bubble-float-right:hover:before, .bubble-float-right:focus:before,
.bubble-float-right:active:before {
right: -10px;
}

/* Bubble Float Bottom */
.bubble-float-bottom {
display: inline-block;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-float-bottom:before {
position: absolute;
z-index: -1;
content: ”;
left: calc(50% – 10px);
bottom: 0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #e1e1e1 transparent transparent transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: bottom;
transition-property: bottom;
}
.bubble-float-bottom:hover, .bubble-float-bottom:focus,
.bubble-float-bottom:active {
-webkit-transform: translateY(-5px) translateZ(0);
transform: translateY(-5px) translateZ(0);
}
.bubble-float-bottom:hover:before, .bubble-float-bottom:focus:before,
.bubble-float-bottom:active:before {
bottom: -10px;
}

/* Bubble Float Left */
.bubble-float-left {
display: inline-block;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-float-left:before {
position: absolute;
z-index: -1;
content: ”;
top: calc(50% – 10px);
left: 0;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #e1e1e1 transparent transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: left;
transition-property: left;
}
.bubble-float-left:hover, .bubble-float-left:focus,
.bubble-float-left:active {
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
.bubble-float-left:hover:before, .bubble-float-left:focus:before,
.bubble-float-left:active:before {
left: -10px;
}

/* CURLS */
/* Curl Top Left */
.curl-top-left {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.curl-top-left:before {
pointer-events: none;
position: absolute;
content: ”;
height: 0;
width: 0;
top: 0;
left: 0;
background: white;
/* IE9 */
background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc
56%, white 80%);
filter:
progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#ffffff’,
endColorstr=’#000000′);
/*For IE7-8-9*/
z-index: 1000;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: width, height;
transition-property: width, height;
}
.curl-top-left:hover:before, .curl-top-left:focus:before,
.curl-top-left:active:before {
width: 25px;
height: 25px;
}

/* Curl Top Right */
.curl-top-right {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.curl-top-right:before {
pointer-events: none;
position: absolute;
content: ”;
height: 0;
width: 0;
top: 0;
right: 0;
background: white;
/* IE9 */
background: linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc
56%, white 80%);
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: width, height;
transition-property: width, height;
}
.curl-top-right:hover:before, .curl-top-right:focus:before,
.curl-top-right:active:before {
width: 25px;
height: 25px;
}

/* Curl Bottom Right */
.curl-bottom-right {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.curl-bottom-right:before {
pointer-events: none;
position: absolute;
content: ”;
height: 0;
width: 0;
bottom: 0;
right: 0;
background: white;
/* IE9 */
background: linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc
56%, white 80%);
box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: width, height;
transition-property: width, height;
}
.curl-bottom-right:hover:before, .curl-bottom-right:focus:before,
.curl-bottom-right:active:before {
width: 25px;
height: 25px;
}

/* Curl Bottom Left */
.curl-bottom-left {
display: inline-block;
position: relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.curl-bottom-left:before {
pointer-events: none;
position: absolute;
content: ”;
height: 0;
width: 0;
bottom: 0;
left: 0;
background: white;
/* IE9 */
background: linear-gradient(45deg, white 45%, #aaaaaa 50%, #cccccc
56%, white 80%);
box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: width, height;
transition-property: width, height;
}
.curl-bottom-left:hover:before, .curl-bottom-left:focus:before,
.curl-bottom-left:active:before {
width: 25px;
height: 25px;
}

 

html代码:

<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”utf-8″>
<meta name=”renderer” content=”webkit”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge, chrome=1″>
<meta http-equiv=”Access-Control-Allow-Origin” content=”*”>
<meta name=”viewport”
content=”width=device-width,initial-scale=1,user-scalable=no”>
<meta name=”format-detection”
content=”telephone=no,email=no,date=no,address=no”>
<meta name=”keywords” content=””>
<meta name=”description” content=””>
<title>css3Hover</title>

<style type=”text/css”>
/* demo 样式 */
body {
margin: 0 auto;
max-width: 800px;
padding: 20px;
font-family: sans-serif;
color: #333;
line-height: 140%;
}
img {
border: none;
}
#effects {
margin-top: 5em;
}
h1 {
text-align: center;
font-size: 4em;
}
h2 {
margin-top: 2em;
}
</style>

<link rel=”stylesheet” type=”text/css” href=”css3Hover.css”>

<!– SCRIPT BEGIN –>

<script type=”text/javascript”
src=”;

<!– SCRIPT END –>

</head>
<body>
<h1> Hover.css </h1>

<div id=”effects”>

<h2>2D Transforms</h2>

<a href=”#” class=”button grow”>Grow</a>
<a href=”#” class=”button shrink”>Shrink</a>
<a href=”#” class=”button pulse”>Pulse</a>
<a href=”#” class=”button pulse-grow”>Pulse Grow</a>
<a href=”#” class=”button pulse-shrink”>Pulse Shrink</a>
<a href=”#” class=”button push”>Push</a>
<a href=”#” class=”button pop”>Pop</a>
<a href=”#” class=”button rotate”>Rotate</a>
<a href=”#” class=”button grow-rotate”>Grow Rotate</a>
<a href=”#” class=”button float”>Float</a>
<a href=”#” class=”button sink”>Sink</a>
<a href=”#” class=”button hover”>Hover</a>
<a href=”#” class=”button hang”>Hang</a>
<a href=”#” class=”button skew”>Skew</a>
<a href=”#” class=”button skew-forward”>Skew Forward</a>
<a href=”#” class=”button skew-backward”>Skew
Backward</a>
<a href=”#” class=”button wobble-horizontal”>Wobble
Horizontal</a>
<a href=”#” class=”button wobble-vertical”>Wobble
Vertical</a>
<a href=”#” class=”button wobble-to-bottom-right”>Wobble To
Bottom Right</a>
<a href=”#” class=”button wobble-to-top-right”>Wobble To Top
Right</a>
<a href=”#” class=”button wobble-top”>Wobble Top</a>
<a href=”#” class=”button wobble-bottom”>Wobble
Bottom</a>
<a href=”#” class=”button wobble-skew”>Wobble Skew</a>
<a href=”#” class=”button buzz”>Buzz</a>
<a href=”#” class=”button buzz-out”>Buzz Out</a>

<h2>Border Transitions</h2>

<a href=”#” class=”button border-fade”>Border Fade</a>
<a href=”#” class=”button hollow”>Hollow</a>
<a href=”#” class=”button trim”>Trim</a>
<a href=”#” class=”button outline-outward”>Outline
Outward</a>
<a href=”#” class=”button outline-inward”>Outline
Inward</a>
<a href=”#” class=”button round-corners”>Round Corners</a>

<h2>Shadow and Glow Transitions</h2>

<a href=”#” class=”button glow”>Glow</a>
<a href=”#” class=”button box-shadow-outset”>Box Shadow
Outset</a>
<a href=”#” class=”button box-shadow-inset”>Box Shadow
Inset</a>
<a href=”#” class=”button float-shadow”>Float Shadow</a>
<a href=”#” class=”button hover-shadow”>Hover Shadow</a>
<a href=”#” class=”button shadow-radial”>Shadow Radial</a>

<h2>Speech Bubbles</h2>

<a href=”#” class=”button bubble-top”>Bubble Top</a>
<a href=”#” class=”button bubble-right”>Bubble Right</a>
<a href=”#” class=”button bubble-bottom”>Bubble
Bottom</a>
<a href=”#” class=”button bubble-left”>Bubble Left</a>
<a href=”#” class=”button bubble-float-top”>Bubble Float
Top</a>
<a href=”#” class=”button bubble-float-right”>Bubble Float
Right</a>
<a href=”#” class=”button bubble-float-bottom”>Bubble Float
Bottom</a>
<a href=”#” class=”button bubble-float-left”>Bubble Float
Left</a>

<h2>Curls</h2>

<a href=”#” class=”button curl-top-left”>Curl Top
Left</a>
<a href=”#” class=”button curl-top-right”>Curl Top
Right</a>
<a href=”#” class=”button curl-bottom-right”>Curl Bottom
Right</a>
<a href=”#” class=”button curl-bottom-left”>Curl Bottom
Left</a>

</div>
</body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图