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
CSS3的resize属性使用初探
Sep 27 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
Jan 09 HTML / CSS
深入浅析CSS3中的Flex布局整理
Apr 27 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
HTML5边玩边学(1)画布实现方法
Sep 21 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 HTML / CSS
使用html5 canvas 画时钟代码实例分享
Nov 11 HTML / CSS
解决HTML5手机端页面缩放的问题
Oct 27 HTML / CSS
Html5页面二次分享的实现
Jul 30 HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
May 07 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
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
python实现决策树分类
2018/08/30 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
高校辅导员推荐信范文
2013/12/25 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
2015年司机年终工作总结
2015/05/14 职场文书
心灵捕手观后感
2015/06/02 职场文书
2019个人工作计划书的格式及范文!
2019/07/04 职场文书
sql字段解析器的实现示例
2021/06/23 SQL Server
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle
Python使用DFA算法过滤内容敏感词
2022/04/22 Python
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python