纯css3超酷tabs选项卡动画特效插件
这是一款使用纯css3制作的超酷tabs选项卡动画特效插件。该tabs选项卡插件共有5种特效，分别是淡入淡出、弹性放大缩小、上下滑动、来回翻转等特效
效果演示：http://www.htmleaf.com/css3/animation/2014100764.html
下载地址：http://www.htmleaf.com/Demo/2014100762.html
6、纯css3炫酷加载loading动画特效插件
这是一款通过CSS animation创建的类似gif加载图片的纯css3加载loading动画插件。这个css3加载loading动画插件集成了5种炫酷效果，有旋转、放大缩小、风车效果和太阳系9大行星效果。
效果演示：http://www.htmleaf.com/css3/css3donghua/20141117510.html
下载地址：http://www.htmleaf.com/Demo/20141117511.html
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>动态风车</title>
<style>
body {
background: purple
overflow: hidden
}
* {
margin: 0
padding: 0
}
ul {
position: relative
width: 100px
height: 100px
top: 100px
left: 50%
margin-left: -50px
transform-style: preserve-3d
animation: sport 15s linear 0s infinite normal
}
ul:hover {
animation: sport 1.5s linear 0s infinite normal
}
@keyframes sport {
form {
transform: rotateZ(0deg)
}
to {
transform: rotateZ(360deg)
}
}
ul li {
position: absolute
top: 0
left: 0
border: 50px solid transparent
list-style: none
}
li.li_1st {
border-bottom: 50px solid #5697FD
transform: translateY(-70px) rotateZ(45deg)
}
li.a {
border: 35px solid transparent
border-bottom: 35px solid #5687E7
transform: translate(50px,-20px) rotateZ(90deg)
}
li.li_2nd {
border-bottom: 50px solid #A1BD76
transform: translateX(70px) rotateZ(135deg)
}
li.b {
border: 35px solid transparent
border-bottom: 35px solid #3AA37A
transform: translate(50px,50px) rotateZ(180deg)
}
li.li_3th {
border-bottom: 50px solid #FFB12C
transform: translateY(70px) rotateZ(225deg)
}
li.c {
border: 50px solid transparent
border-bottom: 50px solid #FFCD34
transform: translate(0px,0px) rotateZ(45deg)
z-index: 1
}
li.li_4th {
border-bottom: 50px solid #EF7A64
transform: translateX(-70px) rotateZ(315deg)
}
li.d {
border: 35px solid transparent
border-bottom: 35px solid #C1523E
transform: translate(-20px,-20px) rotateZ(0deg)
}
div.e {
position: relative
width: 10px
height: 200px
background-color: gray
top: 50px
left: 257px
z-index: -1
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="li_1st"></li>
<li class="a"></li>
<li class="li_2nd"></li>
<li class="b"></li>
<li class="li_3th"></li>
<li class="c"></li>
<li class="li_4th"></li>
<li class="d"></li>
</ul>
<div class="e"></div>
</div>
</body>
</html>
