用动画（animation）做弹力球

animation-name:动画的名字(如ball) animation-duration动画的时间 animation-time-function动画的速度曲线 animation-iteration-count动画播放的次数 animation-deretion:设置动画播放顺序，默认为normal,reverse为反向alternate一正一反

alternate-reverse一反一正

animation-fill-mode动画播放模式，forwards(播放停止在100%的地方),给了循环看不见，backwards(忽略原始状态，直接从0%开始，没有原始到0%的过程)

animation-play-state设置动画运动状态是否暂停或继续，一般不在原本属性写，可以用如 ul:hover li这样用，running(默认)paused(暂停)

@keyframes ball{

0%{}

25%{}

50%{}

100%{}

ul{width: 600px;height: 500px;margin: 50px auto;border: 1px solid #000;
}
ul li{position: relative;float: left;width: 100px;height: 500px;margin-right: 100px;background-color: #ccc;
}
ul li:before{display: block;content: "";width: 50px;height: 50px;margin: 0 auto;background-color: pink;border-radius: 50%;animation: ball 1s infinite
}
ul li:nth-child(2):before,ul li:nth-child(2):after{animation-delay: .2s;
}
ul li:nth-child(3):beforeul li:nth-child(3):after{animation-delay: .5s;
}
ul li:after{position: absolute;display: block;content: "";width: 30px;height: 10px;top: 250px;left:0;right: 0;margin: 0 auto;background-color:#000;opacity: .5;border-radius: 50%;animation: box1 1s infinite
}
@keyframes ball{0%{margin-top: 0;}50%{margin-top: 205px;}100%{margin-top: 0;}
}
@keyframes box1{50%{opacity:1;height: 20px;width: 50px;}
}
</style>
</head>
<body><ul><li></li><li></li><li></li></ul>
</body>
</html>

}

用动画（animation）做弹力球相关推荐

css动画小案例弹力球
什么是 CSS3 中的动画? 动画是使元素从一种样式逐渐变化为另一种样式的效果.可以改变任意多的样式任意多的次数.用百分比来规定变化发生的时间,或用关键词 "from" 和 &qu ...
《Adobe After Effects CS6完全剖析》——弹力球教给你些什么
本节书摘来自异步社区<Adobe After Effects CS6完全剖析>一书中的第2章,弹力球教给你些什么,作者 [美]Mark Christiansen(马克·克里斯琴森),译者 ...
java弹力球游戏_小班弹力球游戏教案
小班弹力球游戏教案在教学工作者开展教学活动前,通常需要用到教案来辅助教学,编写教案有利于我们科学.合理地支配课堂时间.我们该怎么去写教案呢?以下是小编为大家整理的小班弹力球游戏教案,欢迎阅读,希望大 ...
java写弹力球游戏,用Qt5做的弹力球小游戏
[实例简介] 用Qt5做的一个弹力球小游戏,Qt5及版本以上能直接运行.这个小游戏代码比较多,希望下载的同学能改进,一起交流. [实例截图] [核心代码] 9137bea4-84cc-4b28-9ae ...
简单的运动学，用canvas写弹力球
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 跟之前的随笔一样,因为本人仍是菜鸟一只,所以用到的技术比较简单,不适合大神观看...... 学canvas学了有一个多礼拜了,觉得canv ...
css3动画-animation
css3动画-animation animation 属性是 8 个属性的简写: 你是否被gif loading加载太慢或有锯齿而感到困扰? 项目中,当页面内容或图片比较多或在加载一些比较大的数据接口 ...
安卓动画全解：补间动画（视图动画）、布局动画、属性动画、逐帧动画。动画Animation属性、Alpha属性、Scale属性、Translate属性、Rotate属性，动画集AnimationSet
全栈工程师开发手册 (作者:栾鹏) 安卓教程全解安卓动画全解:补间动画(视图动画).布局动画.属性动画.逐帧动画. 主要内容包含:动画Animation属性.Alpha属性.Scale属性.Tran ...
c语言弹力球小游戏,超级弹力球
超级弹力球游戏,最休闲的小游戏,游戏玩法比较简单,都是最好玩最实在的玩法模式,用眼睛就可以灵活的进行关卡挑战,玩家需要有一定的实力,毕竟考验操作考验脑力的模式,有能力的玩家快快来,丰富的玩法提供,还有 ...
小程序动画animation向左移动效果
今天在家做一个私活,效果类似于淘宝的筛选功能,微信小程序商品筛选,侧方弹出动画选择页面,研究了一下小程序的动画相关的文档,于是又get到了一个新的小程序技能,小程序动画animation向左移动效果. ...

用动画（animation）做弹力球

用动画（animation）做弹力球相关推荐

最新文章

热门文章