css3动画之圆形运动轨迹
css3中通过@keyframes定义动画，animation设置动画属性，从而实现动画效果；
在animation属性当中，可以规定动画的名称、整个动画的运行时间、运动的速度曲线以及其延迟时间、播放次数等。
animation
animation作为一个复合属性，包括了以下动画属性。
animation-name -------------------------------------规定动画名称
animation-duration ---------------------------------规定动画完成一次的时间
animation-timing-function ----------------------规定动画的运动速度曲线
animation-delay ------------------------------------规定动画的延迟时间
animation-iteration-count -----------------------规定动画的播放次数
animation-direction ------------------------------规定动画下一周期是否逆向开始
animation-fill-mode -------------------------------规定动画时间之外的状态
animation-play-state ------------------------------规定动画的运行和暂停
animation-timing-function
规定动画的速度曲线。默认是 "ease"。常用的运动速度曲线还有以下几种：
- linear：线性过渡。
- ease-in：由慢到快。
- ease-out：由快到慢。
- ease-in-out：由慢到快再到慢。
也可以直接使用贝塞尔曲线规定运行的速度曲线，贝塞尔曲线的4个数值需在[0, 1]区间内。
animation-direction
规定动画是否在下一周期逆向播放。默认是 "normal"。
- reverse:反方向运动
- alternate:先正常方向再反方向运动，持续交替
- alternate-reverse:先反方向再正常方向运动，持续交替
animation-fill-mode
规定对象动画时间之外的状态。常用值如下：
- none:默认值
- forwards:设置对象状态为动画结束时的状态
- backwards:设置对象状态为动画开始时的状态
圆形运动轨迹
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>沿圆形轨迹运动</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
#trajectory {
width: 300px;
height: 300px;
border: 4px solid #949494;
border-radius: 50%;
position: relative;
left: calc(50% - 153px);
top:calc(50% - 153px);
}
@keyframes moveX{
0% {left: -22px;}
100% {left: 282px;}
}
@keyframes moveY{
0% {top: -22px;}
100% {top: 282px;}
}
#move {
width: 40px;
height: 40px;
font-size: 12px;
background-color: #32c33a;
border-radius: 50%;
position: absolute;
left:-22px;
top:-22px;
animation: moveX 4s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate, moveY 4s cubic-bezier(0.36,0,0.64,1) 0s infinite alternate;
}
</style>
</head>
<body>
<div id="trajectory">
<div id="move">Immortal brother</div>
</div>
</body>
</html>
以上代码的注意点如下：
- 对body高度100%的设置原因在于html5环境下body的默认高度为0
- calc在使用过程中，值与值之间的“-”和“+”两端的空格必不可少
- 动画当中的left和top值为物体运动的起始位置和结束位置，要注意border值
- 动画一次执行的运动轨迹仅为一半
- 速度曲线：cubic-bezier(0.36,0,0.64,1)；
- 两个方向的延迟时间的设置 X：-2s;Y : 0s
- 先正方向再反方向持续交替运行 ：alternate
css3动画之圆形运动轨迹的更多相关文章
- 美妙的 CSS3 动画！一组梦幻般的按钮效果
今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...
- css3动画使用技巧之—border旋转时的应用。
<html> <head> <title>css3动画border旋转时的应用.</title> <meta charset="UTF- ...
- css3 动画 总结
原来的时候写过一个小程序,里面有一个播放背景音乐的按钮(也是一个圆形的图片),它是一直在旋转的,当我们点击这个按钮的可以暂停或者播放背景音乐.当初的这个动画,是同事自己写的,我看到的时候以为是他在上面 ...
- CSS3动画那么强，requestAnimationFrame还有毛线用？
一.哟,requestAnimationFrame, 新同学,先自我介绍下 Hello, 大家好,我就是风姿卓越,万种迷人的requestAnimationFrame,呵呵呵呵.很高兴和大家见面,请多 ...
- CSS3动画那么强，requestAnimationFrame还有毛线用--摘抄
CSS3动画那么强,requestAnimationFrame还有毛线用? 这篇文章发布于 2013年09月30日,星期一,19:12,归类于 web综合. 阅读 197124 次, 今日 84 次 ...
- css3动画应用-音乐唱片旋转播放特效
css3动画应用-音乐唱片旋转播放特效 核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...
- css3动画第一式--简单翻滚
在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...
- CSS3动画制作
CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...
- 学习CSS3动画（animation）
CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...
随机推荐
- 解决CentOS 7安装zabbix 3.0 无法启动zabbix-server的问题[segfault at 18 ip 00007f78842b4bd0 sp 00007fff1995a818 error 4 in libpthread-2.17.so[7f78842ab000+16000]]
解决CentOS 7安装zabbix 3.0 无法启动zabbix-server的问题 [root@localhost sbin]# service zabbix-server start Redir ...
- strlen("汉字")的值是多少
转自:http://blog.csdn.net/gogor/article/details/4470775 strlen("汉字")的值是多少? 这个问题的答案与系统所采用的字符编 ...
- 0001_第一个测试小程序Login
# -*- coding:utf-8 -*- user = raw_input("Username:") password = raw_input("Password:& ...
- Redux API之combineReducers
combineReducers(reducers) 随着应用变得复杂,需要对 reducer 函数 进行拆分,拆分后的每一块独立负责管理 state 的一部分. combineReducers 辅助函 ...
- Http协议-URI和资源
所有东西都有一个标准化的名字,以帮助人们寻找城市中的各种资源.书籍有ISBN号,公交车有线路号,银行账户有账户编码,人有身份证,街道有街道名称.人们告诉图书馆管理员书籍的ISBN号,他即可找出该书籍的 ...
- db2 command line notes
db2ilist - list instances db2 attach to <instance> user <username> using <password> ...
- apache配置中的小细节
configuration error: couldn’t perform authentication错误的解决办法 configuration error: couldn’t perform au ...
- string行读入&&文件输入
普通读入的时候会以空格作为分隔符 直接用cin>>s读入,此时可以直接处理文件尾的情况 text代码: #include <iostream>#include <cstd ...
- 过滤asp.net页面每次发出请求之前访问
public class PageFiltert : System.Web.UI.Page { public PageFiltert() { // //TODO: 在此处添加构造函数逻辑 // } p ...
- cogs1583. [POJ3237]树的维护
1583. [POJ3237]树的维护 http://www.cogs.pro/cogs/problem/problem.php?pid=1583 ★★★☆ 输入文件:maintaintree.i ...