A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 南国之南 中级黑马   /  2016-7-10 18:31  /  1630 人查看  /  4 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

这是通过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;}
}

4 个回复

倒序浏览
这是通过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实现的简单的动画,同学们可以自己敲一下,体验一下,相关的数据如颜色之类大家可以根据需要自 ...

大哥,不至于吧,自己随便写一点,还是很容易拿黑马币的
回复 使用道具 举报
什么顺序。。
回复 使用道具 举报

按照百分比进行,如果感觉不足的话可以再自行添加
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马