css3动画 小球滚动 js控制动画暂停


Posted in HTML / CSS onNovember 29, 2019

CSS3 可以创建动画,它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

CSS3 @keyframes 规则

要创建 CSS3 动画,你需要了解 @keyframes 规则。

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

@keyframes myfirst    /* myfirst 为动画名 */
{
    from {background: red;}
    to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

CSS3 动画

当在 @keyframes 创建动画,把它绑定到一个选择器,否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器:

  • 规定动画的名称
  • 规定动画的时长

实例:把“myfirst” 动画捆绑到div元素上,时长5s.

div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

注意: 您必须定义动画的名称和动画的持续时间。如果省略的持续时间,动画将无法运行,因为默认值是0。

CSS3动画是什么?

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。

0% 是动画的开始,100% 是动画的完成。

为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。

实例:当动画为 25% 及 50% 时改变背景色,然后当动画 100% 完成时再次改变:

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

 接下来就是我写的小练习。通过css 动画使小球在草地上无限滚动,并加了两个按钮控制动画的运行与暂停(最上面的红球是我画的太阳2333)

css3动画 小球滚动 js控制动画暂停

css3动画 小球滚动 js控制动画暂停

css3动画 小球滚动 js控制动画暂停

总结

以上所述是小编给大家介绍的css3动画 小球滚动 js控制动画暂停,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
Jul 18 HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 HTML / CSS
css3动画 小球滚动 js控制动画暂停
Nov 29 HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
Jan 09 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
Canvas环形饼图与手势控制的实现代码
Nov 08 HTML / CSS
HTML中meta标签及Keywords
Apr 15 HTML / CSS
CSS3实现酷炫的3D旋转透视效果
Nov 21 #HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 #HTML / CSS
CSS3 新增选择器的实例
Nov 13 #HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 #HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 #HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 #HTML / CSS
CSS3 边框效果
Nov 04 #HTML / CSS
You might like
PHP4之真OO
2006/10/09 PHP
smarty的保留变量问题
2008/10/23 PHP
PHP学习 变量使用总结
2011/03/24 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
JQuery select标签操作代码段
2010/05/16 Javascript
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
用js实现放大镜的效果的简单实例
2016/05/23 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
python实现杨辉三角思路
2017/07/14 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
Python实现常见的回文字符串算法
2018/11/14 Python
pandas数据集的端到端处理
2019/02/18 Python
python视频按帧截取图片工具
2019/07/23 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
Python接口测试结果集实现封装比较
2020/05/01 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
英语翻译系毕业生求职信
2013/09/29 职场文书
大学毕业寄语大全
2014/04/10 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
幽灵公主观后感
2015/06/09 职场文书
光荣之路观后感
2015/06/12 职场文书
Android Studio 计算器开发
2022/05/20 Java/Android