css动画属性--小球移动
主体只有一个div
<body>
<div></div>
</body>
样式部分(测试:目前的浏览器还是需要加前缀才能兼容)
<style>
* {
margin: 0;
padding: 0;
} div {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border-radius: 50px;
border: 2px solid red;
background: -webkit-radial-gradient(80px 80px, circle, #fff, #00f);
background: -ms-radial-gradient(80px 80px, circle, #fff, #00f);
/* 动画名字 */
animation-name: move;
/* 动画时间 */
animation-duration: 3s;
/* 动画的类型 */
animation-timing-function: linear;
/* 动画播放次数 */
animation-iteration-count: infinite;
/* 动画是否允许反向 */
animation-direction: normal;
/* 简写为 animation: move 2s linear 0s infinite normal;*/ } @keyframes move {
0% {
left: 0px;
top: 0px;
}
25% {
left: 150px;
top: 150px;
}
50% {
left: 300px;
top: 300px;
}
75% {
left: 450px;
top: 450px;
}
100% {
left: 600px;
top: 600px;
}
}
</style>
如有不足之处,请广提意见,诚恳学习.
css动画属性--小球移动的更多相关文章
- css动画属性性能
性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...
- CSS动画属性性能详细介绍
CSS动画属性会触发整个页面的重排relayout.重绘repaint.重组recomposite Paint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,这也是为什么我们推荐 ...
- css动画属性--轮播图效果
通过css的动画属性实现轮播图的显示效果 代码如下: 主体部分: <div id="move"> <ul> <li><img src=&q ...
- js监听指定元素的css动画属性
MDN 监听css动画,开始,迭代次数,结束,中断 回调函数返回 animationEvent属性 <!DOCTYPE html> <html> <head> &l ...
- CSS3动画效果——js调用css动画属性并回调处理详解
http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...
- css动画(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
- css动画-animation各个属性详解（转）
CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...
- 【CSS】css动画及过渡和变换属性
1.css动画 创建一个动画: @keyframes name{ //动画名字 0% { //动画开始 transform: translateY(0); } 100% { //动画结束 transf ...
- 容易忘记的css属性和动画属性
动画属性 @keyframes 关键帧 --> animation 活泼 (配合使用) transform 变换 --> transition 过渡 (配合使用) 1.animation ...
随机推荐
- python 之走坑的道路
### python之 继续走函数的坑 上篇文章简单介绍了函数的一些简单的使用,这次继续踩函数的坑1.函数对象 函数其实也可以当做一个参数传给另一个函数,也可以使用赋值的方式来给另一个,而且这两个的内 ...
- PHP数组简介
一.PHP数组的分类 按照下标的不同,PHP中的数组分为关联数组和索引数组:索引数组:下标从0开始,依次增长. $arr=[1,2,3,4,5]; 关联数组:下标为字符串格式,每个下标字符串与数组的值 ...
- 微信小程序开发《二》：http请求的session管理
作为一个开发JavaWeb应用的程序猿,都喜欢将用户登录后的用户信息(比如说用户id,用户名称)放入session中保存,之后在业务逻辑的开发中需要用到用户信息的时候就可以轻松又方便的从session ...
- C++函数调用的反汇编过程及Thunk应用
x86汇编基础知识 1. 汇编常用寄存器 esp,(Extended stack pointer)栈顶指针.因为x86的栈内存是向下扩展的,因此当push入栈时,esp–.pop出栈时,esp++.e ...
- Android控件的使用
1. RadioButton (单选按钮) 嵌入到RadioGroup中实现单选效果 android:checkedButton="radio的id值" int getchecke ...
- SQL Server使用导入导出向导导入超过4000个字符的字段的数据
在使用SQL Server导入导出向导导入数据的时候,我们经常会碰到某个单元格的数据超长而被截断报错的情况.本文针对这种场景给出相应的解决方案. 环境描述:SQL Server 2012,文件源: ...
- 在ROS中使用花生壳的域名服务
ROS功能强大,也比较复杂,各个版本的脚本可能也大同小异,我现在使用的是6.37.3的版本. 添加Script 进入菜单System->Scripts. 点击加号,像图中这样,添加代码,我给这段 ...
- JavaScript之语句，循环
JavaScript中语句主要分为三类:顺序,分支,循环. 1.顺序语句: 按照循序依次执行,最普通常见的语句,这里不多赘述. 其结构如下 2.分支语句: 根据条件判断,不同的结果执行不同的语句. 其 ...
- 网页中嵌入百度地图报错：The request has been blocked,the content must served over Https
网页中嵌入百度地图 1.进入百度地图开发平台:http://lbsyun.baidu.com/index.php?title=jspopular 2.获取密钥:http://lbsyun.baidu. ...
- JavaScript面向对象轻松入门之封装(demo by ES5、ES6、TypeScript)
本章默认大家已经看过作者的前一篇文章 <JavaScript面向对象轻松入门之抽象> 为什么要封装? 封装(Encapsulation)就是把对象的内部属性和方法隐藏起来,外部代码访问该对 ...