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 相关文章推荐
CSS3属性选择符介绍
Oct 17 HTML / CSS
CSS3 Backgrounds属性相关介绍
May 11 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 HTML / CSS
CSS3正方体旋转示例代码
Aug 08 HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
CSS3模拟动画下拉菜单效果
Apr 12 HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
Apr 29 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
html网页引入svg图片的4种方式
Aug 05 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
php防止sql注入代码实例
2013/12/18 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
Prototype Class对象学习
2009/07/19 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
python发送arp欺骗攻击代码分析
2014/01/16 Python
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
python微信公众号开发简单流程实现
2020/03/09 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
美国知名艺术画网站:Art.com
2017/02/09 全球购物
elf彩妆英国官网:e.l.f. Cosmetics英国(美国平价彩妆品牌)
2017/11/02 全球购物
介绍下Lucene建立索引的过程
2016/03/02 面试题
电子商务专业毕业生求职信
2014/06/12 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers