图像和文字化教育程,css3动画成效小结

By admin in 4858美高梅 on 2019年5月5日

正文最初发布于博客园,并在GitHub上不停立异前者的层层文章。招待在GitHub上关注自身,一同入门和进阶前端。

以下是本文。

CSS3中的调换属性:transform
CSS3中的渐变效果:transition

css三动画效率小结

css3动画效率小结

前言

本文重要内容:

  • 过渡:transition

  • 2D 转换 transform

  • 3D 转换 transform

  • 动画:animation

七.一 CSS三的更改类型


注:transform的包容性如下

  • IE10、Firefox、Opera支持transform属性;
  • IE玖援助代表的-ms-transform属性,仅适用于贰D调换;
  • Safari和Chrome援救代表的-webkit-transform属性;
  • Opera只支持2D转换;

css三的卡通效果有以下二种:

  一、transition(过度属性)

  二、animation(动画属性)

  叁、transform(二D/3D转变属性)

css3的卡通片效果有以下二种:

  一、transition(过度属性)

  二、animation(动画属性)

  3、transform(2D/3D调换属性)

过渡:transition

transition的中文意思是过渡。过渡是CSS三中兼有颠覆性的一个特色,能够兑现要素今非昔比意况间的平整对接(补间动画),常常用来构建动画效果。

  • 补间动画:自动完毕从初步状态到终止意况的的过渡。不用管中间的地方。

  • 帧动画:通过一帧一帧的镜头依据固定顺序和进程播放。如电影胶片。

参考链接:补间动画基础

transition 包罗以下属性:

  • transition-property: all;
    假诺指望保有的本性都发生过渡,就应用all。

  • transition-duration: 1s; 过渡的持续时间。

  • transition-timing-function: linear; 运动曲线。属性值能够是:

    • linear 线性
    • ease 减速
    • ease-in 加速
    • ease-out 减速
    • ease-in-out 先加快后减速
  • transition-delay: 1s; 过渡延迟。多久后再施行那一个过渡动画。

上边的伍脾天性也可以写成汇总品质

    transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;

    transition: all 3s linear 0s;

其中,transition-property其一天性是尤为要求留意的,分歧的属性值有不一样的风貌。大家来演示一下。

万一设置
transition-property: width,意思是只让盒子的宽度在变化时举办连接。效果如下:

4858美高梅 1

假使设置
transition-property: all,意思是让盒子的富有属性(包罗宽度、背景象等)在变化时都进展交接。效果如下:

4858美高梅 2

7.①.一 rotate旋转变换

  1. 最不难易行的2D筋斗

div{
    transfrom: rotate(7deg);
    -ms-transform: rotate(7deg);    /*IE9*/
    -moz-transform: rotate(7deg);   /*Firefox*/
    -webkit-transform: rotate(7deg);/*safari和Chrome*/
    -o-transform: rotate(7deg);     /*Opera*/
}

rotateX, rotateY, rotateZ: rotateZ相当于rotate
万一要在其余向量上旋转,能够选取rotate三d(x, y, z,
deg),xyz的值创设三个维度向量,deg则是旋转角度。

上面逐1进行介绍小编的接头:

上边逐一进行介绍笔者的知晓:

案例:Samsung商品详细情况

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 过渡</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #eeeeee;
        }

        .content {
            width: 800px;
            height: 320px;
            padding-left: 20px;
            margin: 80px auto;
        }

        .item {
            width: 230px;
            height: 300px;
            text-align: center;
            margin-right: 20px;
            background-color: #FFF;
            float: left;
            position: relative;
            top: 0;
            overflow: hidden; /* 让溢出的内容隐藏起来。意思是让下方的橙色方形先躲起来 */
            transition: all .5s; /* 从最初到鼠标悬停时的过渡 */
        }

        .item img {
            margin-top: 30px;
        }

        .item .desc {
            position: absolute;
            left: 0;
            bottom: -80px;
            width: 100%;
            height: 80px;
            background-color: #ff6700;
            transition: all .5s;
        }

        /* 鼠标悬停时,让 item 整体往上移动5px,且加一点阴影 */
        .item:hover {
            top: -5px;
            box-shadow: 0 0 15px #AAA;
        }

        /* 鼠标悬停时,让下方的橙色方形现身 */
        .item:hover .desc {
            bottom: 0;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="item">
        <img src="./images/1.png" alt="4858美高梅 3">
    </div>

    <div class="item">
        <img src="./images/2.png" alt="4858美高梅 4">

    </div>
    <div class="item">
        <img src="./images/3.jpg" alt="4858美高梅 5">

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

功用如下:

4858美高梅 6

动画效果视频的可比差,但真实体验仍是能够的。

工程文件:

  • 201八-0二-0八-BlackBerry商品详细情况过渡

七.一.二 skew扭曲调换

div{
    transform: skew(20deg, 10deg);    /*在X轴方向偏转20°,Y轴方向偏转10°*/
}

注意:skew没有3D和skewZ选项

1、transition:<过渡性质名称> <过渡时间> <过渡方式>

  如-webkit-transition:color 1s;

等同于:

  -webkit-transition-property:color;

  -webkit-transition-duration:1s;

多个天性的衔接效果能够这么写:

  方法1:-webkit-transition:<属性1>
<时间1> ,<属性2> <时间2> ,。。。

  方法2:

      -webkit-transition:<属性1>
<时间1>;

      -webkit-transition:<属性2>
<时间2>;

 

transition-timing-function属性值有五个:

  ease:缓慢初叶,缓慢甘休

  liner:匀速

  ease-in:缓慢开始

  ease-out:缓慢截至

  ease-in-out:缓慢初阶,缓慢结束(和ease稍有分别)

实例:

 

4858美高梅 74858美高梅 8

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition过渡效果</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #box{
            width: 200px;
            height: 200px;
            background-color: chocolate;
            position: relative;
            left: 0px;
            top: 0px;
            transition: top 5s ease,left 5s ease ;
            -moz-transition: top 5s ease,left 5s ease ; /* Firefox 4 */
            -webkit-transition: top 5s ease,left 5s ease ; /* Safari and Chrome */
            -o-transition: top 5s ease,left 5s ease ; /* Opera */
        }
        .btn{
            width: 512px;
            margin: 0 auto;
            border: 2px solid #e3e3e3;
            border-radius: 5px;
            padding: 10px;

        }
        .btn button{
            width: 80px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            margin-right: 20px;
        }
        button:last-child{
            margin-right: 0px;
        }
    </style>
    <script>
        window.onload=function(){
            var e1 = document.getElementById("e1");
            var e2 = document.getElementById("e2");
            var e3 = document.getElementById("e3");
            var e4 = document.getElementById("e4");
            var e5 = document.getElementById("e5");
            var box = document.getElementById("box");
            e1.onclick=function(){
                box.style.left = 1000+"px";
                box.style.top = 100+"px";
                box.style.transitionTimingFunction="ease";
            };
            e2.onclick=function(){
                box.style.right = 0+"px";
                box.style.top = 0+"px";
                box.style.transitionTimingFunction="liner";
            };
            e3.onclick=function(){
                box.style.right = 1000+"px";
                box.style.top = 100+"px";
                box.style.transitionTimingFunction="ease-in";
            };
            e4.onclick=function(){
                box.style.left = 0+"px";
                box.style.top = 0+"px";
                box.style.transitionTimingFunction="ease-out";
            };
            e5.onclick=function(){
                box.style.left = 1000+"px";
                box.style.top = 100+"px";
                box.style.transitionTimingFunction="ease-in-out";
            };

        }
    </script>
</head>
<body>
    <div id="box"></div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <hr>
    <br>
    <br>
    <br>
    <div class="btn">
        <button id="e1">ease</button>
        <button id="e2">liner</button>
        <button id="e3">ease-in</button>
        <button id="e4">ease-out</button>
        <button id="e5">ease-in-out</button>
    </div>
</body>
</html>

transition过渡效果Code

 

壹、transition:<过渡性质名称> <过渡时间> <过渡方式>

  如-webkit-transition:color 1s;

等同于:

  -webkit-transition-property:color;

  -webkit-transition-duration:1s;

四个天性的连结效果能够那样写:

  方法1:-webkit-transition:<属性1>
<时间1> ,<属性2> <时间2> ,。。。

  方法2:

      -webkit-transition:<属性1>
<时间1>;

      -webkit-transition:<属性2>
<时间2>;

 

transition-timing-function属性值有多少个:

图像和文字化教育程,css3动画成效小结。  ease:缓慢开头,缓慢截止

  liner:匀速

  ease-in:缓慢起始

  ease-out:缓慢停止

  ease-in-out:缓慢先河,缓慢截至(和ease稍有分别)

实例:

 

4858美高梅 94858美高梅 10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition过渡效果</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #box{
            width: 200px;
            height: 200px;
            background-color: chocolate;
            position: relative;
            left: 0px;
            top: 0px;
            transition: top 5s ease,left 5s ease ;
            -moz-transition: top 5s ease,left 5s ease ; /* Firefox 4 */
            -webkit-transition: top 5s ease,left 5s ease ; /* Safari and Chrome */
            -o-transition: top 5s ease,left 5s ease ; /* Opera */
        }
        .btn{
            width: 512px;
            margin: 0 auto;
            border: 2px solid #e3e3e3;
            border-radius: 5px;
            padding: 10px;

        }
        .btn button{
            width: 80px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            margin-right: 20px;
        }
        button:last-child{
            margin-right: 0px;
        }
    </style>
    <script>
        window.onload=function(){
            var e1 = document.getElementById("e1");
            var e2 = document.getElementById("e2");
            var e3 = document.getElementById("e3");
            var e4 = document.getElementById("e4");
            var e5 = document.getElementById("e5");
            var box = document.getElementById("box");
            e1.onclick=function(){
                box.style.left = 1000+"px";
                box.style.top = 100+"px";
                box.style.transitionTimingFunction="ease";
            };
            e2.onclick=function(){
                box.style.right = 0+"px";
                box.style.top = 0+"px";
                box.style.transitionTimingFunction="liner";
            };
            e3.onclick=function(){
                box.style.right = 1000+"px";
                box.style.top = 100+"px";
                box.style.transitionTimingFunction="ease-in";
            };
            e4.onclick=function(){
                box.style.left = 0+"px";
                box.style.top = 0+"px";
                box.style.transitionTimingFunction="ease-out";
            };
            e5.onclick=function(){
                box.style.left = 1000+"px";
                box.style.top = 100+"px";
                box.style.transitionTimingFunction="ease-in-out";
            };

        }
    </script>
</head>
<body>
    <div id="box"></div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <hr>
    <br>
    <br>
    <br>
    <div class="btn">
        <button id="e1">ease</button>
        <button id="e2">liner</button>
        <button id="e3">ease-in</button>
        <button id="e4">ease-out</button>
        <button id="e5">ease-in-out</button>
    </div>
</body>
</html>

transition过渡效果Code

 

2D 转换

转换是 CSS三中兼有颠覆性的三个特色,能够实现要素的位移、旋转、变形、缩放,以至协助矩阵格局。

转移再同盟过渡和卡通片,能够取代大量初期只好靠 Flash 才能够完毕的效劳。

4858美高梅 ,在 CSS3 当中,通过 transform 转换到完毕 贰D 调换可能 3D 转变。

  • 二D调换包蕴:缩放、移动、旋转。

大家1一来教学。

柒.1.三 scale比例缩放

div{
    transform: scale(1.1, 1.1);
}

注:可以行使scaleX, scaleY, scaleZ进行单1方向上的缩放。

贰、动画属性animation

  animation:
name duration timing-function delay iteration-count direction;

描述

animation-name

规定需要绑定到选择器的 keyframe 名称。。

animation-duration

规定完成动画所花费的时间,以秒或毫秒计。

animation-timing-function

规定动画的速度曲线。

animation-delay

规定在动画开始之前的延迟。

animation-iteration-count

规定动画应该播放的次数。

animation-direction

规定是否应该轮流反向播放动画。

  注释:Internet
Explorer 9 以及更早的本子不援助 animation 属性。

  @keyframes
animationname {keyframes-selector {css-styles;}}

描述

animationname

必需。定义动画的名称。

keyframes-selector

必需。动画时长的百分比。

合法的值:

  • 0-100%
  • from(与 0% 相同)
  • to(与 100% 相同)

css-styles

必需。一个或多个合法的 CSS 样式属性。

  以百分比来规定改变产生的年月,可能经过重点词
“from” 和 “to”,等价于 0% 和 百分百。

  0%
是卡通片的初阶时间,百分百 动画的利落时间。

 例如:

  animation:mymove
5s infinite;

  @keyframes
mymove{

    from{ top:0px;
}

    to{ top:200px;
}

  }

仍是能够这么写:

  @keyframes
mymove{

    0%{ top:0px;
}

    25%{
top:200px; }

    50%{
top:100px; }

    75%{
top:200px; }

    100%{ top:0px;
}

  }

 案例:

4858美高梅 114858美高梅 12

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>

<p><b>注释:</b>本例在 Internet Explorer 中无效。</p>

<div></div>

</body>
</html>

css3的animation效果code

 

二、动画属性animation

  animation:
name duration timing-function delay iteration-count direction;

描述

animation-name

规定需要绑定到选择器的 keyframe 名称。。

animation-duration

规定完成动画所花费的时间,以秒或毫秒计。

animation-timing-function

规定动画的速度曲线。

animation-delay

规定在动画开始之前的延迟。

animation-iteration-count

规定动画应该播放的次数。

animation-direction

规定是否应该轮流反向播放动画。

  注释:Internet
Explorer 九 以及更早的版本不支持 animation 属性。

  @keyframes
animationname {keyframes-selector {css-styles;}}

描述

animationname

必需。定义动画的名称。

keyframes-selector

必需。动画时长的百分比。

合法的值:

  • 0-100%
  • from(与 0% 相同)
  • to(与 100% 相同)

css-styles

必需。一个或多个合法的 CSS 样式属性。

  以百分比来规定改造发生的时刻,可能经过重视词
“from” 和 “to”,等价于 0% 和 百分百。

  0%
是动画的早先时间,百分百 动画的终止时间。

 例如:

  animation:mymove
5s infinite;

  @keyframes
mymove{

    from{ top:0px;
}

    to{ top:200px;
}

  }

还足以这么写:

  @keyframes
mymove{

    0%{ top:0px;
}

    25%{
top:200px; }

    50%{
top:100px; }

    75%{
top:200px; }

    100%{ top:0px;
}

  }

 案例:

4858美高梅 134858美高梅 14

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>

<p><b>注释:</b>本例在 Internet Explorer 中无效。</p>

<div></div>

</body>
</html>

css3的animation效果code

 

1、缩放:scale

格式:

    transform: scale(x, y);

    transform: scale(2, 0.5);

参数解释:
x:表示水平方向的缩放倍数。y:表示垂直方向的缩放倍数。纵然只写三个值就是等比例缩放。

取值:大于1表示放大,小于一象征裁减。不可能为百分比。

格式比如:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 1000px;
            margin: 100px auto;
        }

        .box div {
            width: 300px;
            height: 150px;
            background-color: pink;
            float: left;
            margin-right: 15px;
            color: white;
            text-align: center;
            font: 400 30px/150px “宋体”;

        }

        .box .box2 {
            background-color: green;
            transition: all 1s;
        }

        .box .box2:hover {
            /*width: 500px;*/
            /*height: 400px;*/
            background-color: yellowgreen;

            /* transform:  css3中用于做变换的属性
                scale(x,y):缩放 */
            transform: scale(2, 0.5);
        }

    </style>
</head>
<body>
<div class="box">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</div>

</body>
</html>

效果:

4858美高梅 15

上海体育场地能够看出,给 box一 设置 二D 转变,并不会把兄弟成分挤走。

7.一.4 translate位移转变

div{
    transform: translate(100px, 20px);  /*在x方向移动100px,Y方向移动20px*/
}

注:能够使用translateX, translateY, translateZ实行单一方向上的位移。

3、设置3D场景(即transform)

    -webkit-perspective:800;(单位为像素)–即三维物体距离显示屏的距离。

    -webkit-perspective-origin:八分之四四分之二;(这些天性代表了人眼观望的视界。四分之二12分之5为X轴、Y轴相应的岗位,即显示器的正中心。)

   4858美高梅 16

  使用transform属性调解成分:-webkit-transform-style:-webkit-perserve-三d;(那么些天性是报告浏览器我们是在1个三个维度空间中对成分进行操作)

  (一)、translate(移动距离)

    translateX(x
px)

    translateY(y
px)

    translateZ(z
px)

  (二)、rotate(旋转角度)

    rotateX(x
deg)

    rotateY(y
deg)

    rotateZ(z
deg)

 

   4858美高梅 17

  transform:rotate(45deg)

    rotateX:向显示屏上一侧向内转悠为正方向。

    rotateY:向荧屏竖直向下为正方向。

    rotateZ:向荧屏外为正方向。

  三个div块,左边沿向显示器内转悠4五deg,即应设置为:Transform:rotateY(4五deg)。

实例:

 

4858美高梅 184858美高梅 19

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform3D转换效果</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #box{
            width: 200px;
            height: 200px;
            background-color: chocolate;
            position: relative;
            left: 0px;
            top: 0px;
            perspective:800px;
            perspective-origin:50% 50%;
            transform-style: preserve-3d;
            transform-origin:0% 100%;//以Y轴为旋转中心
        }
        p{
            margin:20px 520px;
        }
        .btn{
            width: 300px;
            margin: 0 auto;
            border: 2px solid #e3e3e3;
            border-radius: 5px;
            padding: 10px;

        }
        .btn button{
            width: 80px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            margin-right: 20px;
        }
        button:last-child{
            margin-right: 0px;
        }
    </style>
    <script>
        window.onload=function(){
            var tx = document.getElementById("tx");
            var ty = document.getElementById("ty");
            var tz = document.getElementById("tz");
            var rx = document.getElementById("rx");
            var ry = document.getElementById("ry");
            var rz = document.getElementById("rz");
            var box = document.getElementById("box");
            tx.onclick=function(){
                box.style.transform = "translateX(500px)";
            };
            ty.onclick=function(){
                box.style.transform = "translateY(400px)"
            };
            rx.onclick=function(){
                box.style.transform = "rotateX(30deg)"
            };
            ry.onclick=function(){
                box.style.transform = "rotateY(30deg)"
            };
            rz.onclick=function(){
                box.style.transform = "rotateZ(30deg)"
            };
        }
    </script>
</head>
<body>
    <div id="box"></div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <hr>
    <br>
    <br>
    <br>
    <p>translate(移动距离)</p>
    <div class="btn">
        <button id="tx">translateX</button>
        <button id="ty">translateY</button>
    </div>
    <p>rotate(旋转角度)</p>
    <div class="btn">
        <button id="rx">rotateX</button>
        <button id="ry">rotateY</button>
        <button id="rz">rotateZ</button>
    </div>
</body>
</html>

transform3D转换职能code

 

 

  使用transform-origin属性调解旋转中央。暗中认可旋转中央点为div盒子的正宗旨。

  那个旋转中央是足以转移的:

    X轴:left、center、right.

    Y轴:top、center、bottom.

    Z轴:length
px(多个长度值)。

 

 

3、设置3D场景(即transform)

    -webkit-perspective:800;(单位为像素)–即三维物体距离荧屏的偏离。

    -webkit-perspective-origin:四分之二二分一;(那性子情代表了人眼观察的视线。十一分之5二分一为X轴、Y轴相应的职位,即荧屏的正主旨。)

   4858美高梅 20

  使用transform属性调解成分:-webkit-transform-style:-webkit-perserve-三d;(那一个特性是报告浏览器大家是在3个三个维度空间中对成分实行操作)

  (一)、translate(移动距离)

    translateX(x
px)

    translateY(y
px)

    translateZ(z
px)

  (贰)、rotate(旋转角度)

    rotateX(x
deg)

    rotateY(y
deg)

    rotateZ(z
deg)

 

   4858美高梅 21

  transform:rotate(45deg)

    rotateX:向显示屏上一侧向内转悠为正方向。

    rotateY:向荧屏竖直向下为正方向。

    rotateZ:向显示屏外为正方向。

  贰个div块,右侧沿向显示屏内转悠四五deg,即应设置为:Transform:rotateY(45deg)。

实例:

 

4858美高梅 224858美高梅 23

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform3D转换效果</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #box{
            width: 200px;
            height: 200px;
            background-color: chocolate;
            position: relative;
            left: 0px;
            top: 0px;
            perspective:800px;
            perspective-origin:50% 50%;
            transform-style: preserve-3d;
            transform-origin:0% 100%;//以Y轴为旋转中心
        }
        p{
            margin:20px 520px;
        }
        .btn{
            width: 300px;
            margin: 0 auto;
            border: 2px solid #e3e3e3;
            border-radius: 5px;
            padding: 10px;

        }
        .btn button{
            width: 80px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            margin-right: 20px;
        }
        button:last-child{
            margin-right: 0px;
        }
    </style>
    <script>
        window.onload=function(){
            var tx = document.getElementById("tx");
            var ty = document.getElementById("ty");
            var tz = document.getElementById("tz");
            var rx = document.getElementById("rx");
            var ry = document.getElementById("ry");
            var rz = document.getElementById("rz");
            var box = document.getElementById("box");
            tx.onclick=function(){
                box.style.transform = "translateX(500px)";
            };
            ty.onclick=function(){
                box.style.transform = "translateY(400px)"
            };
            rx.onclick=function(){
                box.style.transform = "rotateX(30deg)"
            };
            ry.onclick=function(){
                box.style.transform = "rotateY(30deg)"
            };
            rz.onclick=function(){
                box.style.transform = "rotateZ(30deg)"
            };
        }
    </script>
</head>
<body>
    <div id="box"></div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <hr>
    <br>
    <br>
    <br>
    <p>translate(移动距离)</p>
    <div class="btn">
        <button id="tx">translateX</button>
        <button id="ty">translateY</button>
    </div>
    <p>rotate(旋转角度)</p>
    <div class="btn">
        <button id="rx">rotateX</button>
        <button id="ry">rotateY</button>
        <button id="rz">rotateZ</button>
    </div>
</body>
</html>

transform3D调换职能code

 

 

  使用transform-origin属性调治旋转主旨。默许旋转宗旨点为div盒子的正大旨。

  那一个旋转中央是足以退换的:

    X轴:left、center、right.

    Y轴:top、center、bottom.

    Z轴:length
px(五个长度值)。

 

 

2、位移:translate

格式:

    transform: translate(水平位移, 垂直位移);

    transform: translate(-50%, -50%);

参数解释:

  • 参数为百分比,相对于本身运动。

  • 正在:向右和向下。
    负值:向左和升华。假如只写1个值,则表示水平位移。

格式比如:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 1000px;
            margin: 100px auto;
        }

        .box > div {
            width: 300px;
            height: 150px;
            border: 1px solid #000;
            background-color: red;
            float: left;
            margin-right: 30px;
        }

        div:nth-child(2) {
            background-color: pink;
            transition: all 1s;
        }

        /* translate:(水平位移,垂直位移)*/
        div:nth-child(2):hover {
            transform: translate(-50%, -50%);
        }
    </style>

</head>
<body>
<div class="box">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</div>

</body>
</html>

效果:

4858美高梅 24

上海教室中,因为自个儿在操作的时候,鼠标悬停后,立刻进行了略微的位移,所以发生了五回动画。准确的法力应该是底下那样的:

4858美高梅 25

应用:让相对定位中的盒子在阿爹里居中

咱俩明白,假设想让叁个标准流中的盒子在阿爸里居中(水平方向看),能够将其设置margin: 0 auto属性。

可1旦盒子是相对定位的,此时早就脱标了,假诺还想让其居中(位于老爸的正中间),能够这样做:

    div {
        width: 600px;
        height: 60px;
        position: absolute;  绝对定位的盒子
        left: 50%;           首先,让左边线居中
        top: 0;
        margin-left: -300px;  然后,向左移动宽度(600px)的一半
    }

如上方代码所示,大家先让这些增长幅度为600px的盒子,右边线居中,然后向左移动宽度(600px)的八分之四,就达到效果了。

4858美高梅 26

于今,我们仍是能够使用偏移 translate 来做,那也是相比推荐的写法:

    div {
        width: 600px;
        height: 60px;
        background-color: red;
        position: absolute;       绝对定位的盒子
        left: 50%;               首先,让左边线居中
        top: 0;
        transform: translate(-50%);    然后,利用translate,往左走自己宽度的一半【推荐写法】
    }

柒.二 使用transition制作交互动画


用jquery落成动画效果:

$(element).animate({width: "200px"}, 3000);
//$().animate(params, time, callback)

CSS三中的transition属性能够平滑退换CSS属性值

.content{
    height: 100px;
    width: 100px;
    -webkit-transition: height 600ms;
    -moz-transition: height 600ms;
    -o-transition: height 600ms;
    transition: height 600ms;
}
.content:hover{
    height: 300px;
}

上例即为高度为100px的长方形在hover下0.6s内成为300px的动画片。假设必要转移四个属性,能够行使逗号隔离:

.content{
    transition: height 2s, width 2s, background 2s;
}

transition仍是能够包罗设置渐进动画的函数,能够选拔的函数有陆种。

  • ease: 匀速变慢
  • linear: 匀速
  • ease-in: 加速
  • ease-out: 减速
  • ease-in-out: 加速然后减速
  • cubic-bezier: 自定义时间曲线

transition: all 0.5s ease-in-out 1s;

多少个参数依次表示:属性、过渡时间、过渡函数、延迟时间

3、旋转:rotate

格式:

    transform: rotate(角度);

    transform: rotate(45deg);

参数解释:正值 顺时针;负值:逆时针。

举例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 50px auto;
            color: #fff;
            font-size: 50px;
            transition: all 2s; /* 过渡:让盒子在进行 transform 转换的时候,有个过渡期 */
        }

        /* rotate(角度)旋转 */
        .box:hover {
            transform: rotate(-405deg); /* 鼠标悬停时,让盒子进行旋转 */
        }

    </style>
</head>
<body>
<div class="box">1</div>

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

效果:

4858美高梅 27

留意,上方代码中,大家给盒子设置了 transform 中的 rotate
旋转,但还要还要给盒子设置 transition
过渡。假如未有那行过渡的代码,旋转会直接一步到位,效果如下:(不是我们意在的意义)

4858美高梅 28

案例1:小火箭

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html,body{
            height:100%;
        }

        body{
            background-color: #DE8910;
        }
        .rocket{
            position: absolute;
            left:100px;
            top:600px;
            height: 120px;
            transform:translate(-200px ,200px) rotate(45deg);
            transition:all 1s ease-in;
        }

        body:hover .rocket{
            transform:translate(500px,-500px) rotate(45deg);
        }
    </style>
</head>
<body>
    <img  class="rocket" src="images/rocket.png" alt="4858美高梅 29"/>
</body>
</html>

下面代码中,我们将 transform 的五个小属性合并起来写了。

大火箭图片的url:

案例2:扑克牌

rotate
旋转时,暗中认可是以盒子的正中央为坐标原点的。假使想转移旋转的坐标原点,可以用transform-origin天性。格式如下:

    transform-origin: 水平坐标 垂直坐标;

    transform-origin: 50px 50px;

    transform-origin: center bottom;   //旋转时,以盒子底部的中心为坐标原点

大家来看一下 rotate 结合 transform-origin 的用法比方。

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            /*background-color: #eee;*/
        }

        .box {

            width: 300px;
            height: 440px;
            margin: 100px auto;
            position: relative;
        }

        img {
            width: 100%;
            transition: all 1.5s;
            position: absolute;     /* 既然扑克牌是叠在一起的,那就都用绝对定位 */
            left: 0;
            top: 0;

            transform-origin: center bottom; /*旋转时,以盒子底部的中心为坐标原点*/
            box-shadow: 0 0 3px 0 #666;
        }

        .box:hover img:nth-child(6) {
            transform: rotate(-10deg);
        }

        .box:hover img:nth-child(5) {
            transform: rotate(-20deg);
        }

        .box:hover img:nth-child(4) {
            transform: rotate(-30deg);
        }

        .box:hover img:nth-child(3) {
            transform: rotate(-40deg);
        }

        .box:hover img:nth-child(2) {
            transform: rotate(-50deg);
        }

        .box:hover img:nth-child(1) {
            transform: rotate(-60deg);
        }

        .box:hover img:nth-child(8) {
            transform: rotate(10deg);
        }

        .box:hover img:nth-child(9) {
            transform: rotate(20deg);
        }

        .box:hover img:nth-child(10) {
            transform: rotate(30deg);
        }

        .box:hover img:nth-child(11) {
            transform: rotate(40deg);
        }

        .box:hover img:nth-child(12) {
            transform: rotate(50deg);
        }

        .box:hover img:nth-child(13) {
            transform: rotate(60deg);
        }

    </style>
</head>
<body>
<div class="box">
    <img src="images/pk1.png"/>
    <img src="images/pk2.png"/>
    <img src="images/pk1.png"/>
    <img src="images/pk2.png"/>
    <img src="images/pk1.png"/>
    <img src="images/pk2.png"/>
    <img src="images/pk1.png"/>
    <img src="images/pk2.png"/>
    <img src="images/pk1.png"/>
    <img src="images/pk2.png"/>
    <img src="images/pk1.png"/>
    <img src="images/pk2.png"/>
    <img src="images/pk1.png"/>
</div>
</body>
</html>

效果如下:

4858美高梅 30

7.3 使用@keyframes创设动画(关键帧)


4、倾斜

暂略。

7.3.1 @keyframes的主导语法

@keyframes spin{
    from{
        -webkit-transform: rotateY(0);
    }
    to{
        -webkiy-transform: rotateY(-360deg);
    }    /*from和to代表0%和100%*/
}

@keyframes spin{
    0% {
        -webkit-transform: rotateY(0);
    }
    50% {
        -webkit-transform: rotateY(-180deg);
    }
    100% {
        -webkit-transfor,: rotateY(-360deg);
    }
}

@keyframes务必合作成分中定义的animation属性,用于定义动画

animation: spin 8s infinite linear alternate;

spin: 动画名称
捌s:动画实践一遍所需求的时日
infinite: 动画试行的次数
linear: 动画的速度函数,跟transition的速度函数同样
alternate: 表示动画正向循环完成后反向循环
若果想对动画的运转进行支配,可以给元素扩大animation-play-state属性:

div{
    animation-play-state: paused;  /*paused为暂停*/
    animation-play-state: running; /*running为开启动画*/
}

能够通过js调节这些特性来成功。

3D 转换

7.3.2 实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 100px;
                height: 100px;
                background-color: red;
                position: relative;
                animation: firstAni 5s infinite;
                -webkit-animation: firstAni 5s infinite ;
            }
            @keyframes firstAni{
                0% {background: red; left: 0px; top: 0px;}
                25% {background: yellow; left: 200px; top: 0px;}
                50% {background: blue; left: 200px; top: 200px;}
                75% {background: green; left: 0px; top: 200px;}
                100%{background: red; left: 0px; top: 0px;}
            }
            @-webkit-keyframes firstAni{  /*适用于safari和chrome*/
                0% {background: red; left: 0px; top: 0px;}
                25% {background: yellow; left: 200px; top: 0px;}
                50% {background: blue; left: 200px; top: 200px;}
                75% {background: green; left: 0px; top: 200px;}
                100%{background: red; left: 0px; top: 0px;}
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

1、旋转:rotateX、rotateY、rotateZ

3D坐标系(右边手坐标系)

4858美高梅 31

如上海教室所示,伸出左边手,让拇指和人口成“L”形,大拇指向右,食指向上,中指指向前方。拇指、食指和中指分别代表X、Y、Z轴的正方向,这样大家就创制了三个左方坐标系。

浏览器的这么些平面,是X轴、Y轴;垂直于浏览器的平面,是Z轴。

旋转的倾向:(左手段则)

左边手握住旋转轴,竖起大拇指指向旋转轴的正方向,正向便是其它手指卷曲的样子

从上边那句话,大家也能来看:全数的三d旋转,对着正方向去看,都以顺时针旋转。

格式:

    transform: rotateX(360deg);    //绕 X 轴旋转360度

    transform: rotateY(360deg);    //绕 Y 轴旋转360度

    transform: rotateZ(360deg);    //绕 Z 轴旋转360度

格式比方:

(1)rotateX 举例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .rotateX {
            width: 300px;
            height: 226px;
            margin: 200px auto;

            /* 透视 :加给变换的父盒子*/
            /* 设置的是用户的眼睛距离 平面的距离*/
            /* 透视效果只是视觉上的呈现,并不是正真的3d*/
            perspective: 110px;
        }

        img {
            /* 过渡*/
            transition: transform 2s;
        }

        /* 所有的3d旋转,对着正方向去看,都是顺时针旋转*/
        .rotateX:hover img {
            transform: rotateX(360deg);
        }

    </style>
</head>
<body>
<div class="rotateX">
    <img src="images/x.jpg" alt="4858美高梅 32"/>
</div>
</body>
</html>

效果:

4858美高梅 33

上边代码中,大家最棒加个透视的属性,方能看出3D的效率;未有那个性子的话,图片旋转的时候,像是压瘪了平等。

再者,透视的是要加给图片的父成分div,方能见效。我们在后边会讲课透视属性。

(2)rotateY 举例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .rotateY {
            width: 237px;
            height: 300px;
            margin: 100px auto;

            /* 透视 */
            perspective: 150px;
        }

        img {
            transition: all 2s;  /* 过渡 */
        }

        .rotateY:hover img {
            transform: rotateY(360deg);
        }
    </style>
</head>
<body>
<div class="rotateY">
    <img src="images/y.jpg" alt="4858美高梅 34"/>
</div>
</body>
</html>

效果:

4858美高梅 35

(3)rotateZ 举例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .rotateZ {
            width: 330px;
            height: 227px;
            margin: 100px auto;

            /* 透视*/
            perspective: 200px;
        }

        img {
            transition: all 1s;
        }

        .rotateZ:hover img {
            transform: rotateZ(360deg);
        }
    </style>
</head>
<body>
<div class="rotateZ">
    <img src="images/z.jpg" alt="4858美高梅 36"/>
</div>
</body>
</html>

效果:

4858美高梅 37

案例:百度钱袋

近期有上边这张图片素材:

4858美高梅 38

渴求做成下边那种作用:

4858美高梅 39

上边那张图片素材其实用的是敏感图。落成的代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            background-color: cornflowerblue;
        }

        .box {
            width: 300px;
            height: 300px;
            /*border: 1px solid #000;*/
            margin: 50px auto;
            position: relative;
        }

        .box > div {
            width: 100%;
            height: 100%;
            position: absolute;
            /*border: 1px solid #000;*/
            border-radius: 50%;
            transition: all 2s;
            backface-visibility: hidden;
        }

        .box1 {
            background: url(images/bg.png) left 0 no-repeat; /*默认显示图片的左半边*/
        }

        .box2 {
            background: url(images/bg.png) right 0 no-repeat;
            transform: rotateY(180deg); /*让图片的右半边默认时,旋转180度,就可以暂时隐藏起来*/

        }

        .box:hover .box1 {
            transform: rotateY(180deg); /*让图片的左半边转消失*/
        }

        .box:hover .box2 {
            transform: rotateY(0deg); /*让图片的左半边转出现*/
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
</body>
</html>

7.3.4 @keyframes小结

  • keyframes能够变动任性多的样式,任意多的次数;
  • 选用百分比来规定变化发生的光阴,只怕用from, to;
  • 为了获得最好的浏览器帮忙,应始终定义0%和百分之百选取器

注:IE10、Firefox、opera支持@keyframes和animation属性;Chrome和Safari需求追加前缀-webkit-;IE九及在此之前不帮衬。

2、移动:translateX、translateY、translateZ

格式:

    transform: translateX(100px);    //沿着 X 轴移动

    transform: translateY(360px);    //沿着 Y 轴移动

    transform: translateZ(360px);    //沿着 Z 轴移动

格式比方:

(1)translateX 举例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: green;
            transition: all 1s;
        }

        .box:hover {
            transform: translateX(100px);
        }
    </style>
</head>
<body>
<div class="box">

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

效果:

4858美高梅 40

(2)translateY 举例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: green;
            transition: all 1s;
        }

        .box:hover {
            transform: translateY(100px);
        }
    </style>
</head>
<body>
<div class="box">

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

效果:

4858美高梅 41

(3)translateZ 举例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            /* 给box的父元素加透视效果*/
            perspective: 1000px;
        }

        .box {
            width: 250px;
            height: 250px;
            background: green;
            transition: all 1s;
            margin: 200px auto
        }

        .box:hover {
            /* translateZ必须配合透视来使用*/
            transform: translateZ(400px);
        }
    </style>
</head>
<body>
<div class="box">

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

效果:

4858美高梅 42

下面代码中,如若不加透视属性,是看不到translateZ的效应的。

7.4 实例


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .wahaha{
                width: 100px;
                height: 100px;
                text-align: center;
                background: #CCCCCC;
                line-height: 100px;
                font-family: "microsoft yahei";
                font-size: 50px;
                animation: rotateYdir 3s infinite alternate;
                -webkit-animation: rotateYdir 3s 2 alternate;
                animation-play-state: paused;
                -webkit-animation-play-state: paused;
                border-radius: 10px;
            }
            @keyframes rotateYdir{
                0%{transform: rotateY(0);}
                100%{transform: rotateY(-360deg);}
            }
            @-webkit-keyframes rotateYdir{
                0%{-webkit-transform: rotateY(0);}
                100%{-webkit-transform: rotateY(-360deg);}
            }
            .yunxing{
                animation-play-state: running;
                -webkit-animation-play-state: running;
            }
        </style>
    </head>
    <body>
        <div class="wahaha">6</div>
        <script>
            var div1=document.getElementsByClassName("wahaha");
            div1[0].onmouseover=function(){
                this.style.animationPlayState="running";
                this.style.webkitAnimationPlayState="running"
            }
        </script>
    </body>
</html>

3、透视:perspective

微型Computer显示器是2个 二D
平面,图像之所以有着立体感(3D效果),其实只是一种视觉呈现,通过透视能够兑现此目标。

透视能够将叁个2D平面,在转移的经过个中,呈现3D效果。但仅仅只是视觉彰显出叁d
效果,并不是正真的三d。

格式有三种写法:

  • 用作一天品质,设置给父成分,成效于具备3D调换的子成分

  • 作为 transform 属性的二个值,做用于成分自己。

7.6 小结


  • 要素的转变:应用transform属性能够对成分进行旋转rotate,扭曲skew,位移translate,缩放scale;
  • 要素样式改变的过渡效果,应用transition属性能够退换和拉长过渡效果;多少个速度函数:ease,
    ease-in, ease-out, ease-in-out,
    linear内置函数:transition: prop 0.5s linear 1s,prop是css属性名;
  • 使用@ketframes和animation属性设置动画循环。

4、3D呈现(transform-style)

3D成分营造是指某些图形是由五个要素结合的,能够给这一个成分的父元素设置transform-style: preserve-3d来使其变为一个实在的3D图形。属性值能够如下:

    transform-style: preserve-3d;     //让 子盒子 位于三维空间里

    transform-style: flat;            //让子盒子位于此元素所在的平面内(子盒子被扁平化)

案例:立方体

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 250px;
            height: 250px;
            border: 1px dashed red;
            margin: 100px auto;
            position: relative;
            border-radius: 50%;

            /* 让子盒子保持3d效果*/

            transform-style: preserve-3d;

            /*transform:rotateX(30deg) rotateY(-30deg);*/

            animation: gun 8s linear infinite;
        }

        .box > div {
            width: 100%;
            height: 100%;
            position: absolute;
            text-align: center;
            line-height: 250px;
            font-size: 60px;
            color: #daa520;
        }

        .left {
            background-color: rgba(255, 0, 0, 0.3);
            /* 变换中心*/
            transform-origin: left;
            /* 变换*/
            transform: rotateY(90deg) translateX(-125px);
        }

        .right {
            background: rgba(0, 0, 255, 0.3);
            transform-origin: right;
            /* 变换*/
            transform: rotateY(90deg) translateX(125px);
        }

        .forward {
            background: rgba(255, 255, 0, 0.3);
            transform: translateZ(125px);
        }

        .back {
            background: rgba(0, 255, 255, 0.3);
            transform: translateZ(-125px);
        }

        .up {
            background: rgba(255, 0, 255, 0.3);
            transform: rotateX(90deg) translateZ(125px);
        }

        .down {
            background: rgba(99, 66, 33, 0.3);
            transform: rotateX(-90deg) translateZ(125px);
        }

        @keyframes gun {
            0% {
                transform: rotateX(0deg) rotateY(0deg);
            }

            100% {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
    </style>
</head>
<body>
<div class="box">
    <div class="up">上</div>
    <div class="down">下</div>
    <div class="left">左</div>
    <div class="right">右</div>
    <div class="forward">前</div>
    <div class="back">后</div>
</div>
</body>
</html>

动画

动画是CSS三中装有颠覆性的特色,可因此设置多个节点
来正确调整二个或①组动画,常用来落成复杂的卡通效果。

一、定义动画的手续

(壹)通过@keyframes定义动画;

(二)将那段动画通过比例,分割成八个节点;然后各节点中分头定义各属性;

(三)在钦赐成分里,通过 animation 属性调用动画。

以前,大家在 js 中定义3个函数的时候,是先定义,再调用:

    js 定义函数:
        function fun(){ 函数体 }

     调用:
        fun();

同样,我们在 CSS3 中概念动画的时候,也是先定义,再调用

    定义动画:
        @keyframes 动画名{
            from{ 初始状态 }
            to{ 结束状态 }
        }

     调用:
      animation: 动画名称 持续时间;

里头,animation属性的格式如下:

            animation: 定义的动画名称 持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次)

            animation: move1 1s  alternate linear 3;

            animation: move2 4s;

概念动画的格式比如:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            margin: 100px;
            background-color: red;

            /* 调用动画*/
            /* animation: 动画名称 持续时间  执行次数  是否反向  运动曲线 延迟执行。infinite 表示无限次*/
            /*animation: move 1s  alternate linear 3;*/
            animation: move2 4s;
        }

        /* 方式一:定义一组动画*/
        @keyframes move1 {
            from {
                transform: translateX(0px) rotate(0deg);
            }
            to {
                transform: translateX(500px) rotate(555deg);
            }
        }

        /* 方式二:定义多组动画*/
        @keyframes move2 {
            0% {
                transform: translateX(0px) translateY(0px);
                background-color: red;
                border-radius: 0;
            }

            25% {
                transform: translateX(500px) translateY(0px);

            }

            /*动画执行到 50% 的时候,背景色变成绿色,形状变成圆形*/
            50% {
                /* 虽然两个方向都有translate,但其实只是Y轴上移动了200px。
                因为X轴的500px是相对最开始的原点来说的。可以理解成此时的 translateX 是保存了之前的位移 */
                transform: translateX(500px) translateY(200px);
                background-color: green;
                border-radius: 50%;
            }

            75% {
                transform: translateX(0px) translateY(200px);
            }

            /*动画执行到 100% 的时候,背景色还原为红色,形状还原为正方形*/
            100% {
                /*坐标归零,表示回到原点。*/
                transform: translateX(0px) translateY(0px);
                background-color: red;
                border-radius: 0;
            }
        }
    </style>
</head>
<body>
<div class="box">

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

专注好赏心悦目代码中的注释。

功用如下:

4858美高梅 43

2、动画属性

咱俩正幸好调用动画时,animation属性的格式如下:

animation属性的格式如下:

            animation: 定义的动画名称  持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次)

            animation: move1 1s  alternate linear 3;

            animation: move2 4s;

能够看来,这里的 animation
是归纳品质,接下去,我们把这几个综合品质拆分看看。

(一)动画名称:

    animation-name: move;

(2)实施3回动画的持续时间:

    animation-duration: 4s;

备注:上边多个属性,是必选项,且顺序固定。

(三)动画的实践次数:

    animation-iteration-count: 1;       //iteration的含义表示迭代

属性值infinite代表无多次。

(三)动画的动向:

    animation-direction: alternate;

属性值:normal 正常,alternate 反向。

(肆)动画延迟推行:

    animation-delay: 1s;

(5)设置动画结束时,盒子的意况:

    animation-fill-mode: forwards;

属性值: forwards:保持动画甘休后的状态(暗中同意),
backwards:动画停止后回去最初的意况。

(六)运动曲线:

    animation-timing-function: ease-in;

属性值能够是:linear ease-in-out steps()等。

只顾,假若把属性值写成steps(),则意味动画不是连连实行,而是间断地分成几步施行。大家接下去专门讲一下品质值
steps()

steps()的效果

我们依旧拿地点的例证来比喻,假若在调用动画时,我们写成:

    animation: move2 4s steps(2);

效果如下:

4858美高梅 44

有了品质值
steps(),我们就足以作出多数不总是地动画效果。比如机械钟;再譬如,通过多王宛平态的鱼,作出一张游动的鱼。

step()举例:石英原子钟的简要模型

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 3px;
            height: 200px;
            background-color: #000;
            margin: 100px auto;
            transform-origin: center bottom;    /* 旋转的中心点是底部 */
            animation: myClock 60s steps(60) infinite;
        }

        @keyframes myClock {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

下边代码,大家经过二个碧绿的长条div,旋转360度,耗费时间60s,分成60步成功。就可以达成。

效能如下:

4858美高梅 45

卡通比方:摆动的鱼

现今,大家要做下边那种效益:

4858美高梅 46

PS:图片的url是,图片很大,如不能见到,可在浏览器中单独张开。

为了作出地点那种效应,要分成两步。

(1)第一步:让鱼在原地摆动

鱼在原地摆动并不是一张
gif动图,她实在是由众多林和平态图间隔地播报,1分钟播放达成,就能够了:

4858美高梅 47

地点那张大图的尺寸是:宽 50九 px、高 2160 px。

大家能够领略成,每1帧的尺寸是:宽 50九 px、高 270
px。270 * 8 = 2160。让地方那张大图,在1秒内从 0px
的岗位往上活动2160px,分成捌步来运动。就足以兑现了。

代码是:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .shark {
            width: 509px;
            height: 270px; /*盒子的宽高是一帧的宽高*/
            border: 1px solid #000;
            margin: 100px auto;
            background: url(images/shark.png) left top; /* 让图片一开始位于 0 px的位置 */
            animation: sharkRun 1s steps(8) infinite; /* 一秒之内,从顶部移动到底部,分八帧, */
        }

        @keyframes sharkRun {
            0% {
            }

            /* 270 * 8 = 2160 */
            100% {
                background-position: left -2160px; /* 动画结束时,让图片位于最底部 */
            }
        }
    </style>
</head>
<body>
<div class="sharkBox">
    <div class="shark"></div>
</div>

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

成效如下:

4858美高梅 48

咱俩不妨把地点的动画片的持续时间从1s改成 8s,就能够看到动画的慢镜头:

4858美高梅 49

那下,你应该清醒了。

(2)第二步:让鱼所在的盒子向前挪动。

贯彻的原理也很轻易,大家在上一步中早就让shark这么些盒子落成了原地摇摆,今后,让
shark 所在的父盒子 sharkBox上前移动,就能够。完整版代码是:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .shark {
            width: 509px;
            height: 270px; /* 盒子的宽高是一帧的宽高 */
            border: 1px solid #000;
            margin: 100px auto;
            background: url(images/shark.png) left top; /* 让图片一开始位于 0 px的位置 */
            animation: sharkRun 1s steps(8) infinite; /* 一秒之内,从顶部移动到底部,分八帧 */
        }

        /* 鱼所在的父盒子 */
        .sharkBox {
            width: 509px;
            height: 270px;
            animation: sharkBoxRun 20s linear infinite;
        }

        @keyframes sharkRun {
            0% {
            }

            /* 270 * 8 = 2160 */
            100% {
                background-position: left -2160px; /* 动画结束时,让图片位于最底部 */
            }
        }

        @keyframes sharkBoxRun {
            0% {
                transform: translateX(-600px);
            }

            100% {
                transform: translateX(3000px);
            }
        }

    </style>
</head>
<body>
<div class="sharkBox">
    <div class="shark"></div>
</div>

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

4858美高梅 50

居功至伟告成。

工程文件如下:

  • 2018-02-09-fishes.rar

自家的群众号

想学习代码之外的软手艺?不要紧关怀自己的微信公众号:生命团队(id:vitateam)。

扫一扫,你将开掘另二个斩新的社会风气,而那将是一场赏心悦目的意料之外:

4858美高梅 51

发表评论

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

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有