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 相关文章推荐
全面总结使用CSS实现水平垂直居中效果的方法
Mar 10 HTML / CSS
纯CSS3实现Material Design效果
Mar 09 HTML / CSS
css3 按钮样式简单可扩展创建
Mar 18 HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
Sep 11 HTML / CSS
html2canvas把div保存图片高清图的方法示例
Mar 05 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 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
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
YII2 实现多语言配置的方法分享
2017/01/11 PHP
javascript getElementsByName()的用法说明
2009/07/31 Javascript
JSON格式化输出
2014/11/10 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python实现控制台输入密码的方法
2015/05/29 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
PyTorch的torch.cat用法
2020/06/28 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
造价工程师个人求职信
2013/09/21 职场文书
写好自荐信的技巧
2013/11/08 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
钳工实训报告总结
2014/11/04 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
在Python 中将类对象序列化为JSON
2022/04/06 Python
 python中的元类metaclass详情
2022/05/30 Python