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,不过估计 ...
随机推荐
- 关于分支和主干Merge时要注意的事项
现在我们同时在主干和分支上进行开发, 当你需要将主干上某一工程代码 Merge到分支上(或者相反)时, 不要用check out 然后全部覆盖的方法, 这样不会关联源上的任何 history, 而且需 ...
- LMV实验
在CentOS6.8上创建过程如下: #对需要创建lvm的卷进行磁盘分区[root@www ~13:40:48]#fdisk /dev/sde Device contains neither a va ...
- Oracle的rowid
ROWID是数据的详细地址,通过rowid,oracle可以快速的定位某行具体的数据的位置. ROWID可以分为物理rowid和逻辑rowid两种.普通的堆表中的rowid是物理rowid,索引组织表 ...
- ASP.NET web application中的redirect
在开发ASP.NET MVC web application过程中,开发上线了新系统后,需要把老系统的url redirect新系统下 其中在项目系统目录下有一个文件 301RedirectsPage ...
- Linux做脚本定时任务（定时清理日志）
无论一些面试问题,还是实际应用,都会用到虚拟机的定时任务.现做定时清理日志日志做一总结. 1.查看/etc/crontab文件. linux 系统则是由 cron (crond) 这个系统服务来控制的 ...
- gridview把textbox的值修改还是旧值的解决方法
解决方法很简单,加上if(!IsPostBack) 就OK了,因为之前加载之前都会调用InitData(). protected void Page_Load(object sender, Event ...
- Redis在windows实现将数据缓存起来定时更新读取
实现接口的读取存放在内存中,实现了Web网站直接读取内存数据,大大的减少了访问接口带来的等待时间,这个功能是比较实用的 需要下载一下‘类库’及‘Redis-x64-3.2.100程序包’ 百度云材料下 ...
- 黑科技抢先尝(续2) - Windows terminal中Powershell Tab的极简美化指南
目录 安装python 安装git 安装powerline字体 主题定制 安装oh-my-posh 查看策略组的执行权限 使用choco 安装终端模拟器 - ConEmu 优化 PowerShell ...
- 3dmax视频
http://wenku.baidu.com/course/list/514?tagID=177
- 洛谷P2814 家谱
P2814 家谱 题目背景 现代的人对于本家族血统越来越感兴趣. 题目描述 给出充足的父子关系,请你编写程序找到某个人的最早的祖先. 输入输出格式 输入格式: 输入由多行组成,首先是一系列有关父子关系 ...