首页 > 建站/维护 > CSS3扫描-基本动画特效
2013
11-18

CSS3扫描-基本动画特效

1.鼠标移动到该位置变长

2.向右旋转(2D旋转)

3.前后旋转(3D旋转)

4.颜色渐变

5.button特效

6.漂浮特效

7.左右飞特效

8.旋转

预览图:

CSS3扫描-基本动画特效

演示地址:https://www.wusiwei.com/demo/show/css3_jbtx.html

~~~~~~~~~~~~~~~~代码~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3 渐变</title>
<style>
.all_bg{
	width:65px;
	height:40px;
	background:#92B901;
	color:#ffffff;
	font-weight:bold;
	font:12px '微软雅黑', Verdana, Arial, Helvetica, sans-serif;
	padding:20px 10px 0px 10px;
	margin:5px;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-o-border-radius:5px;
	}
.jb{
	transition: width 1s;
	-webkit-transition: width 1s;
	-moz-transition: width 1s;
	-o-transition: width 1s;}
	
.jb:hover{
	width:200px;
	}

.xz{
	position:relative;
	-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
	-o-transition-property:width,height,-o-transform,background,font-size,opacity;
	-o-transition-duration:1s,1s,1s,1s,1s,1s;
	-moz-transition-property:width,height,-o-transform,background,font-size,opacity;
	-moz-transition-duration:1s,1s,1s,1s,1s,1s;
	transition-property:width,height,transform,background,font-size,opacity;
	transition-duration:1s,1s,1s,1s,1s,1s;
	}
.xz:hover
	{
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
	opacity:1;
	background:#1ec7e6;
	width:90px;
	height:60px;
	font-size:16px;
	}

.xz2{
	position:relative;
	-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
	-o-transition-property:width,height,-o-transform,background,font-size,opacity;
	-o-transition-duration:1s,1s,1s,1s,1s,1s;
	-moz-transition-property:width,height,-o-transform,background,font-size,opacity;
	-moz-transition-duration:1s,1s,1s,1s,1s,1s;
	transition-property:width,height,transform,background,font-size,opacity;
	transition-duration:1s,1s,1s,1s,1s,1s;
	}
.xz2:hover
	{
	-moz-transform: rotateX(360deg);
	-webkit-transform:rotateX(360deg); /* Safari and Chrome */
	-o-transform: rotateX(360deg);
	transform: rotateX(360deg);
	opacity:1;
	background:#1ec7e6;
	width:90px;
	height:60px;
	font-size:16px;
	}
	
.bs{
	transition:background 1s;
	border-radius:5px;
	-webkit-transition:background 1s;
	-webkit-border-radius:5px;
	-moz-transition:background 1s;
	-moz-border-radius:5px;
	-o-transition:background 1s;
	-o-border-radius:5px;}
.bs:hover
	{
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
	background:#1ec7e6;}
	
input[type=button]{
	border:1px solid #09F;
	padding-bottom:30px;
	text-align:center;
}
input[type=button]:hover{
	transition:background 1s;
	-webkit-transition:background 1s;
	-moz-transition:background 1s;
	-o-transition:background 1s;
	background:#1ec7e6;}
input[type=button]:active{
	transition:background 0s;
	-webkit-transition:background 0s;
	-moz-transition:background 0s;
	-o-transition:background 0s;
	background:#F00;}
	
.piaofu{
	position:relative;
	/* Safari and Chrome: */
-webkit-animation-name:pf;
-webkit-animation-duration:2s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-webkit-animation-play-state:running;
	/* firefox: */
-moz-animation-name:pf;
-moz-animation-duration:2s;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count:infinite;
-moz-animation-play-state:running;
	/* opera: */
-o-animation-name:pf;
-o-animation-duration:2s;
-o-animation-timing-function:linear;
-o-animation-iteration-count:infinite;
-o-animation-play-state:running;
	}
	
@keyframes pf
{
0%   {left:0px; top:0px;}
50%  {left:0px; top:20px;}
100% {left:0px; top:0px;}
}

@-moz-keyframes pf /* Firefox */
{
0%   {left:0px; top:0px;}
50%  {left:0px; top:20px;}
100% {left:0px; top:0px;}
}

@-webkit-keyframes pf /* Safari and Chrome */
{
0%   {left:0px; top:0px;}
50%  {left:0px; top:20px;}
100% {left:0px; top:0px;}
}

@-o-keyframes pf /* Opera */
{
0%   {left:0px; top:0px;}
50%  {left:0px; top:20px;}
100% {left:0px; top:0px;}
}

.fly{
	margin-top:20px;
	position:relative;
	
animation-name:canFly;
animation-duration:2s;
animation-timing-function:linear;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;

-webkit-animation-name:canFly;
-webkit-animation-duration:2s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;

-moz-animation-name:canFly;
-moz-animation-duration:2s;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;

-o-animation-name:canFly;
-o-animation-duration:2s;
-o-animation-timing-function:linear;
-o-animation-iteration-count:infinite;
-o-animation-direction:alternate;
-o-animation-play-state:running;
	}

keyframes canFly /* */
{
0%   {left:0px; top:0px;}
50%  {left:200px; top:0px;}
100% {left:0px; top:0px;}
}
@-webkit-keyframes canFly /* Safari and Chrome */
{
0%   {left:0px; top:0px;}
50%  {left:200px; top:0px;}
100% {left:0px; top:0px;}
}
@-moz-keyframes canFly /* firefox */
{
0%   {left:0px; top:0px;}
50%  {left:200px; top:0px;}
100% {left:0px; top:0px;}
}
@-o-keyframes canFly /* opera */
{
0%   {left:0px; top:0px;}
50%  {left:200px; top:0px;}
100% {left:0px; top:0px;}
}

.yl{
	transition: 1s;
	-moz-transition: 1s;
	-webkit-transition: 1s;
	-o-transition: 1s;}
.yl:hover{
	-webkit-transform:rotate(45deg); /* Safari 和 Chrome */
	-moz-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);}
</style>
</head>

<body>
<div class="jb all_bg">变长吧->></div>

<div class="xz all_bg">向右旋转吧</div>

<div class="xz2 all_bg">前后旋转吧</div>

<div class="bs all_bg">渐变吧</div>

<input type="button" value="点我发怒" class="all_bg"/>

<div class="piaofu all_bg">我飘啊飘</div>

<div class="fly all_bg">我会飞</div>

<div class="all_bg yl">45°歪脸</div>
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~代码结束~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


本博地址:http://www.wusiwei.com




网友评论(1)

技術性的文章..
2013-11-20 19:30   回复