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中的calc函数浅析
Jul 10 HTML / CSS
推荐10个CSS3 制作的创意下拉菜单效果
Feb 11 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
Mar 07 HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 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.ini 中文版
2006/10/28 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
php实现将Session写入数据库
2015/07/26 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
详解php命令注入攻击
2019/04/06 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
javascript 新浪背投广告实现代码
2009/07/07 Javascript
js 函数调用模式小结
2011/12/26 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
win7安装python生成随机数代码分享
2013/12/27 Python
python 网络编程常用代码段
2016/08/28 Python
pycharm的python_stubs问题
2020/04/08 Python
python里反向传播算法详解
2020/11/22 Python
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
内科护士实习自我鉴定
2013/10/17 职场文书
给同学的道歉信
2014/01/16 职场文书
红领巾心向党广播稿
2014/01/19 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
人工作失职检讨书
2015/05/05 职场文书
历史博物馆观后感
2015/06/05 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
MySQL批量更新不同表中的数据
2022/05/11 MySQL