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 ...
随机推荐
- 论如何把JS踩在脚下 —— JQuery基础及Ajax请求详解
一.什么是JQuery? JQuery是一种JavaScript框架,是一堆大神搞出来的能够让前端程序猿敲更少代码.实现更多功能的工具(在此,跪谢各位JQuery开发大大们!!!).JQuery的使用 ...
- iOSNsPredicate Appium 定位元素
Appium使用WebDriverAgent之后,新增了一种定位方法iOSNsPredicate,总结了一下使用方法: MobileElement photo = driver.findElement ...
- XOR 加密简介
本文介绍一种简单高效.非常安全的加密方法:XOR 加密. 一. XOR 运算 逻辑运算之中,除了 AND 和 OR,还有一种 XOR 运算,中文称为"异或运算". 它的定义是:两个 ...
- 一张图搞懂容器所有操作 - 每天5分钟玩转 Docker 容器技术（26）
前面我们已经讨论了容器的各种操作,对容器的生命周期有了大致的理解,下面这张状态机很好地总结了容器各种状态之间是如何转换的. 如果掌握了前面的知识,要看懂这张图应该不难.不过有两点还是需要补充一下: 可 ...
- Dojo初探之1：AMD规范，编写符合AMD规范（异步模块加载机制）的模块化JS(其中dojo采用1.11.2版本)
一.AMD规范探索 1.AMD规范(即异步模块加载机制) 我们在接触js的时候,一般都是通过各种function来定义一些方法,让它们帮我们做一些事情,一个js可以包含很多个js,而这些functio ...
- MyBatis源码分析之环境准备篇
前言 之前一段时间写了[Spring源码分析]系列的文章,感觉对Spring的原理及使用各方面都掌握了不少,趁热打铁,开始下一个系列的文章[MyBatis源码分析],在[MyBatis源码分析]文章的 ...
- python每天一个小练习-强壮的密码
强壮的密码 题目来源 checkio 需求 斯蒂芬和索菲亚对于一切都使用简单的密码,忘记了安全性.请你帮助尼古拉开发一个密码安全检查模块 如果密码的长度大于或等于10个符号,至少有一个数字,一个大写字 ...
- spring非controller类获取service方法
ApplicationContext ctx = new ClassPathXmlApplicationContext("spring.xml"); pushMessageServ ...
- 限制容器的 Block IO - 每天5分钟玩转 Docker 容器技术（29）
前面学习了如何限制容器对内存和CPU的使用,本节我们来看 Block IO. Block IO 是另一种可以限制容器使用的资源.Block IO 指的是磁盘的读写,docker 可通过设置权重.限制 ...
- 代码管理器 TFS2013
多人开发代码管理器肯定是少不了的,出于项目需要在服务器上装了tfs2013用于代码管理,既然用vs进行开发自然选择微软自家的tfs.记录下安装和使用起来的过程. 安装 TFS2013(Team Fou ...