zoukankan      html  css  js  c++  java
  • css3动画属性详解 与超酷例子

    我们用到的css3动画属性有animation和transform,transform主要针对动画瞬间,animation则针对动画的流程。

    首先transform的值有

    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 个值的 4x4 矩阵。  
    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 转换元素定义透视视图。  

    animation的值有

    animation: name duration timing-function delay iteration-count direction fill-mode play-state;这是简写
    animation-name 指定要绑定到选择器的关键帧的名称
    animation-duration
    动画指定需要多少秒或毫秒完成
    animation-timing-function 设置动画将如何完成一个周期
    animation-delay 设置动画在启动前的延迟间隔。
    animation-iteration-count 定义动画的播放次数。
    animation-direction 指定是否应该轮流反向播放动画。
    animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
    animation-play-state 指定动画是否正在运行或已暂停。
    initial 设置属性为其默认值
    inherit 从父元素继承属性
    下面是一个简单的纯css3写出来的动画效果
    图片选择自己喜欢的就好

    <!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; 100%;height: 100%;}
    a{text-decoration: none;color: #fff;}
    .flower{ 250px;height: 250px;position: relative;float: left;margin: 10px 50px;}
    .picture img{border:solid 10px; border-radius: 50%;border- 10px; 250px;height: 250px;overflow: hidden;border-color: #fff;}
    .cover{ 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;}

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

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

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

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

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

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

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

    .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>

  • 相关阅读:
    第二个周六——3.9
    女王节,很开心——3.8
    女生节——3.7
    尴尬的一批——3.6
    周二——3.5
    周一——3.4
    Java基本语法_循环练习系列(二)——万年历
    Java基本语法_循环练习系列(一)——模拟双色球
    《剩女郎》的艺术魅力
    剩女郎剧评
  • 原文地址:https://www.cnblogs.com/gongyijie/p/7886818.html
Copyright © 2011-2022 走看看