惊艳的HTML5动画特效及源码
今天我们要来分享⼀些很酷的HTML5动画演⽰，HTML5的强⼤之处在于它可以利⽤canvas的特性来绘制很多普通⽹页⽆法完成的图形和动画，canvas就像⼀块超级画板，在上⾯不仅可以实现平⾯图形，⽽且⼀些3D动画也⾮常简单。很多HTML5动画也都基于canvas，⼀起来看看吧。
HTML5/CSS3实现⼤风车旋转动画
作为今天⾸款HTML5动画，这款⼤风车旋转效果的确⾮常棒，它是⽤纯CSS3实现。
核⼼CSS代码：
.wmd1{
-webkit-transform: scale(.6);
position:absolute;
top:180px;
left:200px;
perspective: 1000px;
}
.base{ }
.blades{
width: 350px;
height: 350px;
left: 10%;
top: 10%;
z-index:2;
border-radius: 50%;
position: absolute;
margin-top: -30px;
margin-left: 50px;
animation: spin 6s linear infinite;
}
.blade1 {
background: white;
position:absolute;
width:41px;
height:139px;
top:-10px;
left:150.5px;
transform:rotate(0deg);
display:inline-block;
background:
linear-gradient(135deg, transparent 20px, white 0),
linear-gradient(225deg, transparent 20px, white 0),
linear-gradient(315deg, transparent 20px, white 0),
linear-gradient(45deg, transparent  20px,  white 0);
background-position: top left, top right, bottom right, bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.blade2 {
background:white;
position:absolute;
width:41px;
height:139px;
top:105.5px;
left:41px;
transform:rotate(-90deg);
display:inline-block;
background:
linear-gradient(135deg, transparent 20px, white 0),
linear-gradient(225deg, transparent 20px, white 0),
linear-gradient(315deg, transparent 20px, white 0),
linear-gradient(45deg, transparent  20px,  white 0);
background-position: top left, top right, bottom right, bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.blade3 {
background:white;
position:absolute;
width:41px;
height:139px;
top:105.5px;
right:41px;
transform:rotate(-270deg);
display:inline-block;
background:
linear-gradient(135deg, transparent 20px, white 0),
linear-gradient(225deg, transparent 20px, white 0),
linear-gradient(315deg, transparent 20px, white 0),
linear-gradient(45deg, transparent  20px,  white 0);
background-position: top left, top right, bottom right, bottom left;  background-size: 50% 50%;
background-repeat: no-repeat;
}
.blade4 {
background:white;
position:absolute;
width:41px;
height:139px;
bottom:-10px;
left:150.5px;
transform:rotate(180deg);
display:inline-block;
background:
linear-gradient(135deg, transparent 20px, white 0),
linear-gradient(225deg, transparent 20px, white 0),
linear-gradient(315deg, transparent 20px, white 0),
linear-gradient(45deg, transparent  20px,  white 0);
background-position: top left, top right, bottom right, bottom left;  background-size: 50% 50%;
background-repeat: no-repeat;
}
.vane1{
width:1px;
height:350px;
left:175px;
background:white;
position:absolute;
transform:rotate(90deg);
}
.vane2{
width:1px;
height:350px;
left:171.5px;
background:white;
position:absolute;
transform:rotate(180deg);
}
.base .bottom_base{
position:absolute;
width:90px;
height:100px;
left:162px;
border-right: 16px solid transparent;
border-left: 16px solid transparent;
border-bottom: 380px solid white;
opacity:.8;
z-index:-1;
top:42.5px;
}
ul{
position:absolute;
top:180px;
left:-30px;
}
li{
width:10px;
height:10px;
background:white;
padding:2px;
display:block;
margin: 30px;
box-shadow: inset 0px -2px 0px lightgray;
}
li:nth-child(2){
position:absolute;
top:-45px;
left:20px;
jquery源码在线
}
li:nth-child(1){
position:absolute;
top:35px;
left:50px;
}
li:nth-child(3){
position:absolute;
top:75px;
left:50px;
}
@keyframes spin {
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(-360deg);
}
}
View Code
纯CSS3 3D图⽚翻转展⽰
这是⼀款基于CSS3的3D图⽚展⽰，在图⽚切换时将会有翻转的动画效果。核⼼CSS代码：
.coverflow-list {
width: 100%;
}
.coverflow-list .coverflow-item {
display: inline-block;
background: #414141;
margin: 0 -50px;
position: relative;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}
.coverflow-list .coverflow-item .album-cover {
display: block;
height: 150px;
margin: 0;
}
.coverflow-list .coverflow-item .album-cover img {
height: 150px;
width: 150px;
opacity: 0.5;
}
.coverflow-list .coverflow-item .album-name {
text-align: center;
display: block;
color: #444;
}
.coverflow-list .coverflow-item label {
padding: 0;
border: none;
display: block;
text-shadow: none;
}
/* Now apply 3D transforms (never done this before!) */
.coverflow-list {
-
webkit-transform: perspective(900px);
-webkit-transform-style: preserve-3d;
-webkit-perspective-origin: 100% 30%;
}
.coverflow-list .coverflow-item {
-webkit-transition: all 0.4s ease;
background: #212121;
-webkit-transform: rotateY(45deg);
}
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + .coverflow-item {
-webkit-transform: rotateY(0deg);
margin: 0 auto;
background: #313131;
transition: all 0.4s ease;
}
input[type="radio"]:checked + .coverflow-item img {
opacity: 1;
}
input[type="radio"]:checked + .coverflow-item figcaption {
color: #FFFFFF;
}
input[type="radio"]:checked + .coverflow-item ~ .coverflow-item {
-webkit-transform: rotateY(-45deg);
background: #515151;
}
View Code
漂亮的CSS3动画进度条
这是⼀款闪闪发光的CSS3进度条，进度条在初始化的时候还有滑动的动画特效。
核⼼jQuery代码：
(function() {
$(document).ready(function() {
return $(".bar").each(function(i, elem) {
return $(elem).addClass('active');
});
});
}).call(this);
View Code
CSS3垂直图标菜单
这是⼀款简单⽽清爽的CSS3垂直菜单，⿏标滑过菜单项还有Tooltip的动画效果。
核⼼CSS代码：
#nav-bar {
margin: 50px 50px 50px 400px;
max-width: 50px;
border: 1px solid #bed1df;
border-radius: 4%;
background-color: white;
-webkit-box-shadow: -2px 3px 2px 0px rgba(5, 0, 0, 0.11);
-moz-box-shadow:    -2px 3px 2px 0px rgba(5, 0, 0, 0.11);
box-shadow:        -2px 3px 2px 0px rgba(5, 0, 0, 0.11);
}
li {
color: #bed1df;
margin: 0;
font-family: 'Open Sans', sans-serif;
font-size: 0.75em;
list-style: none;
}
li.level-one {
font-size: 1.5em;
text-align: center;
border-top: 1px solid #bed1df;
cursor: pointer;
}
li.level-one:first-child {
border-top: none;
}
li.level-one:hover {
background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(233,238,242,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(233,238,242,1)));  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(233,238,242,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(233,238,242,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(233,238,242,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(233,238,242,1) 100%);
filter: progid:adient( startColorstr='#ffffff', endColorstr='#e9eef2', GradientType=0 );
}
#selected {
background: #3f8eb9;
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(0,0,0,0.45);
-moz-box-shadow: inset 1px 1px 10px 1px rgba(0,0,0,0.45);
box-shadow: inset 1px 1px 10px 1px rgba(0,0,0,0.45);
}
i {
color: #bed1df;
margin: 25%;
}
p {
font-family: 'Open Sans', sans-serif;
font-size: 0.8em;
color: #bed1df;
margin: 50px;
}
a {
color: #3f8eb9;
text-decoration: none;
}
.level-one {
position: relative;
}
.level-two {
display: none;
position: absolute;
height: 50px;
width: 100px;
background: #FFFFFF;
border-radius: 4px;
font-family: 'Open Sans', sans-serif;
font-size: 0.65em;
text-align: center;
}
.level-two:after {
content: '';
position: absolute;
border-style: solid;
border-width: 9px 9px 9px 0;
border-color: transparent  #fff;
display: block;
width: 0;
z-index: 1;
left: -9px;
top: 15px;
}
.level-two li {
margin: 15px;
}
.
level-one:hover > .level-two {
display: block;
}
.level-two {
left: 130%;
top: 0;
}
View Code
纯CSS3背景渐变按钮按钮图标淡⼊淡出动画
这是⼀组带有动画效果的按钮，⿏标滑过按钮时将出现背景渐变的动画特效。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。