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 ...
随机推荐
- CSS小技巧-为内盒子添加margin-top时，会带着父盒子一起下来，如何解决？
1.为父盒子添加一个padding 2.为父盒子添加一个border 3.为父盒子添加一个overflow:hidden
- 【2017-06-05】Jquery.ajax
AJAX 是一种网页数据异步加载技术 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 一.Json ...
- 如何用python绘制各种图形
1.环境 系统:windows10 python版本:python3.6.1 使用的库:matplotlib,numpy 2.numpy库产生随机数几种方法 import numpy as np nu ...
- Akka（6）： become/unbecome：运算行为切换
通过一段时间的学习了解,加深了一些对Akka的认识,特别是对于Akka在实际编程中的用途方面.我的想法,或者我希望利用Akka来达到的目的是这样的:作为传统方式编程的老兵,我们已经习惯了直线流程方式一 ...
- 给Linux系统/网络管理员准备的Nmap命令的29个实用范例
我将用两个不同的部分来涵盖大部分NMAP的使用方法,这是nmap关键的第一部分.在下面的设置中,我使用两台已关闭防火墙的服务器来测试Nmap命令的工作情况. 192.168.0.100 – serve ...
- if中可以使用那些作为判断条件呢？
在所有编程语言中if是最长用的判断之一,但在js中到底哪些东西可以在if中式作为判断表达式呢? 例如如何几行,只是少了一个括号,真假就完全不同,到底表示什么含义呢 ? 1 2 3 4 5 6 7 8 ...
- 微信小程序开发过程中一些经验总结
1.微信开发者工具报错,微信小程序最低需支持tls1.2版本的问题 原因是服务器不支持ssl的高版本,解决方法: 在/etc/nginx/conf.d文件下,把"ssl_protocols ...
- 各开放平台API接口通用SDK序列文章 前言
最近两年一直在做API接口相关的工作,在平时工作中以及网上看到很多刚接触API接口调用的新人一开始会感到很不适应,要看的文档一大堆,自己要调用的接口找不着,或都找着了不知道怎么去调用,记得包括自己刚开 ...
- linux 升级yum对应的python
这里记录一下linux 系统升级python对yum带来影响的解决办法 很多人在使用linux系统执行python任务的时候需要升级linux系统自带的python到高级版本.具体如何升级python ...
- jQuery怎样判断按钮是否被选中
方法一: if ($("#checkbox-id")get(0).checked) { // do something } 方法二: if($('#checkbox-id' ...