夜光带你走进 前端工程师(二十)

夜光序言:

 

 

 

再好的东西,都有失去的一天。

再深的记忆,也有淡忘的一天。

再爱的人,也有远走的一天。

再美的梦,也有苏醒的一天。

该放弃的决不挽留。

 

 

 

 

 

 

 

正文:Canvas绘制动画

 

如何让小方块动起来,嘿嘿

动起来:如何设置

/**
 * Created by Maibenben on 2018/4/9.
 */
function draw(id){
    var canvas = document.getElementById(id);
    context = canvas.getContext('2d');
    setInterval(painting,100);
    i=0;
}
function painting(){
    context.fillStyle = "green";
    context.fillRect(i,0,10,10);
    i=i+20;
}

 

画布大小决定了以上代码动画效果,改进一下


setInterval(painting,100);

//100是毫秒

//变成进度条效果

I=i+10 【i++】

实现下面这个效果:

/**
 * Created by Maibenben on 2018/4/9.
 */
function draw(id){
    var canvas = document.getElementById(id);
    context = canvas.getContext('2d');
    setInterval(painting,100);
    i=0;
}
function painting(){
    context.fillStyle = "green";
    context.fillRect(i,i,10,10);
    i++;
}

 


  context.fillRect(i,i,10,10);      //这个是关键,控制动画效果

 Css3中的动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
        div:hover{
            background-color: aqua;
        }
    </style>
</head>
<body>
<h1>transition属性</h1>
<div>

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


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            transition: all 1s linear ;  //关键之处
        }
        div:hover{
            background-color: aqua;
        }
    </style>
</head>
<body>
<h1>transition属性</h1>
<div>

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

 

 

 

 

<head>
    <meta charset="UTF-8">
    <title>transition</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            transition: all 1s linear ;
            -moz-transition: all 1s linear;
            -webkit-transition: all 1s linear;
            -o-transition:all 1s linear;
        ;
        }
        div:hover{
            background-color: aqua;
        }
    </style>
</head>

//实现平滑的过渡效果

<style>
    div{
        width:200px;
        height:200px;
        background-color: aquamarine;
    }
    @-webkit-keyframes mycolor {
        0%{
            background-color: #ffed60;
        }
        10%{
            background-color: bisque;
        }
        20%{
            background-color: cornflowerblue;
        }
        80%{
            background-color: darkseagreen;
        }
        100%{
            background-color: aquamarine;
        }
    }
</style>

 

 

//没有指定调用方法,所以还需要制定调用方法

不断变换颜色的动画制作完毕:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animations属性</title>
    <style>
        div{
            width:200px;
            height:200px;
            background-color: aquamarine;
        }
        @-webkit-keyframes mycolor {            //animations属性必须用这种
            0%{
                background-color: #ffed60;
            }
            10%{
                background-color: bisque;
            }
            20%{
                background-color: cornflowerblue;
            }
            80%{
                background-color: darkseagreen;
            }
            100%{
                background-color: aquamarine;
            }
        }
        div:hover{      //hover:鼠标移动上去的时候
            -webkit-animation-name: mycolor;
            -webkit-animation-duration: 5s;
            -webkit-animation-timing-function: linear;
            -webkit-animation-iteration-count: infinite;
        }                //这里必须写:调用方法
    </style>
</head>
<body>
<h1>animations</h1>
<div></div>
</body>
</html>

 


 

这是会移动的变换颜色:

【夜光】

<style>
    div{
        width:100px;
        height:200px;
        background-color: aquamarine;
    }
    @-webkit-keyframes mycolor {
        0%{
            background-color: #ffed60;
        }
        10%{
            background-color: bisque;
            width: 200px;
        }
        20%{
            background-color: cornflowerblue;
            width:400px;
        }
        80%{
            background-color: darkseagreen;
            width: 600px;;
        }
        100%{
            background-color: aquamarine;
            width:800px;
        }
    }
    div:hover{
        -webkit-animation-name: mycolor;
        -webkit-animation-duration: 5s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
    }
</style>

再来一个更加复杂的动画style[animations]

<style>
    div{
        width:100px;
        height:200px;
        background-color: aquamarine;
    }
    @-webkit-keyframes mycolor {
        0%{
            background-color: #ffed60;
            -webkit-transform: rotate(0deg);
        }
        10%{
            background-color: bisque;
            width: 200px;
            -webkit-transform: rotate(10deg);
        }
        20%{
            background-color: cornflowerblue;
            width:400px;
            -webkit-transform: rotate(40deg);
        }
        80%{
            background-color: darkseagreen;
            width: 600px;;
            -webkit-transform: rotate(80deg);
        }
        100%{
            background-color: aquamarine;
            width:800px;
            -webkit-transform: rotate(100deg);
        }
    }
    div:hover{
        -webkit-animation-name: mycolor;
        -webkit-animation-duration: 5s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
    }
</style>

//动画效果一部分如下图所显示:

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值