黑马程序员技术交流社区

标题: 学习笔记之简单的动画效果 [打印本页]

---

作者: 南国之南    时间: 2016-7-10 18:31
标题: 学习笔记之简单的动画效果
这是通过CSS3实现的简单的动画，同学们可以自己敲一下，体验一下，相关的数据如颜色之类大家可以根据需要自行更改

html文件只要在body里创建一个空div既可以了

css文件如下：
div{
        width:100px;
        height:100px;
        background-color: red;
        position:relative;
        animation:anim 5s infinite alternate;
        -webkit-animation:anim 5s infinite alternate;
}

@keyframes anim{
        0%{background:red; left:0px; top:0px;}
        25%{background:#ccffcc; left:200px; top:0px;}
        50%{background:blue; left:200px; top:200px;}
        75%{background:#00ff00; left:0px; top:200px;}
        100%{background:red; left:0px; top:0px;}
}
@-webkit-keyframes anim{
        0%{background:red; left:0px; top:0px;}
        25%{background:#ccffcc; left:200px; top:0px;}
        50%{background:blue; left:200px; top:200px;}
        75%{background:#00ff00; left:0px; top:200px;}
        100%{background:red; left:0px; top:0px;}
}

---

作者: 151678537    时间: 2016-7-10 22:56
这是通过CSS3实现的简单的动画，同学们可以自己敲一下，体验一下，相关的数据如颜色之类大家可以根据需要自行更改

html文件只要在body里创建一个空div既可以了

css文件如下：
div{
        width:100px;
        height:100px;
        background-color: red;
        position:relative;
        animation:anim 5s infinite alternate;
        -webkit-animation:anim 5s infinite alternate;
}

@keyframes anim{
        0%{background:red; left:0px; top:0px;}
        25%{background:#ccffcc; left:200px; top:0px;}
        50%{background:blue; left:200px; top:200px;}
        75%{background:#00ff00; left:0px; top:200px;}
        100%{background:red; left:0px; top:0px;}
}
@-webkit-keyframes anim{
        0%{background:red; left:0px; top:0px;}
        25%{background:#ccffcc; left:200px; top:0px;}
        50%{background:blue; left:200px; top:200px;}
        75%{background:#00ff00; left:0px; top:200px;}
        100%{background:red; left:0px; top:0px;}
}

---

作者: 南国之南    时间: 2016-7-11 21:34

151678537 发表于 2016-7-10 22:56
这是通过CSS3实现的简单的动画，同学们可以自己敲一下，体验一下，相关的数据如颜色之类大家可以根据需要自 ...

大哥，不至于吧，自己随便写一点，还是很容易拿黑马币的

---

作者: 梦里千年    时间: 2016-7-12 07:45
什么顺序。。

---

作者: 南国之南    时间: 2016-7-18 22:13

梦里千年 发表于 2016-7-12 07:45
什么顺序。。

按照百分比进行，如果感觉不足的话可以再自行添加

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2