目录
扇形导航
时钟
动画
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
关键帧
兔斯基
开机动画（2D）
扇形导航
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>扇形导航</title><style type="text/css">*{margin: 0;padding: 0;}html,body{height: 100%;overflow: hidden;}#wrap{position: absolute;right: 15px;bottom: 15px;width: 50px;height: 50px;}#wrap > #inner > img{left: 0;top: 0;margin: 4px;position: absolute;border-radius: 50%;}#wrap > #inner{height: 100%;}#wrap > .home{position: absolute;z-index: 1;left: 0;top: 0;width: 100%;height: 100%;background: url(img/home.png) no-repeat;border-radius: 50%;transition: 1s;}</style></head><body><div id="wrap"><div id="inner"><img src="img/clos.png"/><img src="img/full.png"/><img src="img/open.png"/><img src="img/prev.png"/><img src="img/refresh.png"/></div><div class="home"></div></div></body><script type="text/javascript">window.onload=function(){var homeEle = document.querySelector(".home");var imgs=document.querySelectorAll("#wrap > #inner > img");var flag=true;var c=140;//第二部分：function fn(){this.style.transition="0.3s ";//恢复原样this.style.transform="rotate(-720deg) scale(1)";this.style.opacity=1;//解除绑定this.removeEventListener("transitionend",fn);}for(var i=0;i<imgs.length;i++){imgs[i].onclick=function(){this.style.transition="0.5s ";//点击时，放大并且透明this.style.transform="rotate(-720deg) scale(2)";this.style.opacity=0.1;//绑定事件this.addEventListener("transitionend",fn);}}//第一部分：旋入与旋出homeEle.onclick=function(){if(flag){this.style.transform="rotate(-720deg)";for(var i=0;i<imgs.length;i++){//图片旋转的动画效果imgs[i].style.transition="1s "+(i*0.1)+"s";imgs[i].style.transform="rotate(-720deg) scale(1)";//图片旋出的动画效果imgs[i].style.left=-getPoint(c,90*i/(imgs.length-1)).left+"px";imgs[i].style.top=-getPoint(c,90*i/(imgs.length-1)).top+"px";}}else{this.style.transform="rotate(0deg)";for(var i=0;i<imgs.length;i++){//图片旋转的动画效果imgs[i].style.transition="1s "+((imgs.length-1-i)*0.1)+"s";imgs[i].style.transform="rotate(0deg) scale(1)";//图片回到原来位置的动画效果imgs[i].style.left=0+"px";imgs[i].style.top=0+"px";}}flag=!flag;}//已知第三边和一个角，计算left,top//c表示第三边，deg表示已知角function getPoint(c,deg){var x = Math.round(c * Math.sin(deg*Math.PI/180));var y = Math.round(c * Math.cos(deg*Math.PI/180));return {left:x,top:y};}}</script>
</html>时钟
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>时钟</title><style type="text/css">*{margin: 0;padding: 0;}ul{list-style: none;}.wrap{position: absolute;left: 50%;top: 50%;margin-left: -100px;margin-top: -100px;height: 200px;width: 200px;border: 1px solid;border-radius: 50%;}ul > li{position: absolute;left: 99px;top:0;width: 2px;height: 10px;background: black;transform-origin: center 100px;}ul > li:nth-child(5n+1){height: 15px;}.wrap > .hour{position: absolute;left: 97px;top: 70px;width: 6px;height: 30px;background: black;transform-origin: center bottom;}.wrap > .min{position: absolute;left: 98px;top: 50px;width: 4px;height: 50px;background: gray;transform-origin: center bottom;}.wrap > .sec{position: absolute;left: 99px;width: 2px;top: 30px;height: 70px;background: red;transform-origin: center bottom;}.wrap > .icon{position: absolute;left: 90px;top: 90px;width: 20px;height: 20px;border-radius: 50%;background: pink;}</style></head><body><div class="wrap"><ul></ul><div class="hour"></div><div class="min"></div><div class="sec"></div><div class="icon"></div></div></body><script type="text/javascript">window.onload=function(){var hourNode=document.querySelector(".wrap > .hour");var minNode=document.querySelector(".wrap > .min");var secNode=document.querySelector(".wrap > .sec");var ulNode=document.querySelector(".wrap > ul");var styleNode=document.createElement("style");var liHtml="";var cssText="";for(var i=0;i<60;i++){liHtml +="<li></li>";cssText +="ul > li:nth-child("+(i+1)+"){transform: rotate("+(i*6)+"deg);}";}ulNode.innerHTML=liHtml;styleNode.innerHTML = cssText;document.head.appendChild(styleNode);move();setInterval(move,1000)function move(){//获取现在的时间var date=new Date();var s=date.getSeconds();var m = date.getMinutes()+s/60;var h = date.getHours()+m/60;hourNode.style.transform="rotate("+(30*h)+"deg)";minNode.style.transform="rotate("+(6*m)+"deg)";secNode.style.transform="rotate("+(6*s)+"deg)";}}</script>
</html>动画
CSS3动画
使元素从一种样式逐渐变化为另一种样式的效果
animation属性是一个简写属性
在每个动画的定义中，顺序很重要：可以被认为<time>的第一个值被分配给animation-duration，第二个分配给animation-delay
animation-name
该属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列
值：
none
特殊关键字，表示无关键帧
keyframename
标识动画字符串
animation-duration
该属性指定动画的持续时间
默认值为0s
animation-timing-function
动画默认效果：由慢变快再慢
对于关键帧动画来说，timing function作用于一个关键帧周期而非整个动画周期，即从关键帧开始，到关键帧结束。
linear：线性过渡
ease：平滑过渡
ease-in：由慢到快
ease-out：由快到慢
ease-in-out：由慢到快再慢
steps(n,[start | end])
传入至多两个参数，第一个参数把动画分成n等分，然后动画就会平均地执行
第二参数start表示从动画的开头开始运行，相反，end表示从动画的结尾开始运行（end为默认值）。其中，start看不到第一帧，end看不到最后一帧
animation-delay
定义动画开始的延迟时间（动画外的属性）
animation-iteration-count
定义了动画的执行次数（只作用与动画内的属性）
重复执行关键帧的内容
值：
infinite 无限循环
<number> 动画播放次数
animation-direction
定义了动画的执行方向（关键帧的内容和animation-timing-function）
默认值：normal
值：
normal
正常
reverse
反向执行动画，同时带时间功能的函数也反向
alternate
动画交替运行
alternate-reverse
动画反向交替运行
animation-fill-mode
控制元素在动画外的状态
默认值：none
值：
none
动画外的状态保持在动画之前的位置
backwards
from之前的状态与form的状态保持一致
forwards
to之后的状态与to的状态保持一致
both
backwards+forwards
animation-play-state
定义了动画执行的运行和暂停
默认值：running
值：
running 运行
pause 暂停
关键帧
语法：
@keyframes animationName{
keyframes-selector{
css-style;
}
}
animationName：必写项，定义动画的名称
keyframes-selector：必写项，动画持续时间的百分比
from：0%
to：100%
css-style：css声明
兔斯基
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.tsj{background: url(img/animation.png);background-position: 0 0;animation: move .5s steps(12,end) infinite;}@keyframes move {from{background-position: 0 0;}to{background-position: -576px 0;}}</style>
</head>
<body><div class="tsj"></div>
</body>
</html>开机动画（2D）
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" /><title></title><style type="text/css">*{margin: 0;padding: 0;}html,body{height: 100%;overflow: hidden;}#wrap{height: 100%;position: relative;background: gray;}#wrap > .inner{text-align: center;position: absolute;left: 50%;top: 50%;transform: translate3d(-50%,-50%,0);white-space: nowrap;}#wrap > .inner >span{position: relative;}@keyframes move{from{top: 0px;}to{top: -10px;}}</style></head><body><div id="wrap"><div class="inner"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span></div></div></body><script type="text/javascript">window.onload=function(){var spanNodes = document.querySelectorAll("#wrap > .inner >span");var colors=["red","orange","yellow","green","blue","pink","deeppink","red","orange","yellow","green","blue","pink","deeppink","#1883BA"];for(var i=0;i<spanNodes.length;i++){spanNodes[i].style.animation="move .3s "+(i*50)+"ms linear infinite alternate";spanNodes[i].style.color=colors[i];}}</script>
</html>