在Webkit浏览器中，使用CSS3替代JavaScript效果

众所周知，这段时间CSS3一直很火，大有成为“JavaScript杀手”的可能。此文将会介绍7个很酷的CSS3动画的示例，使用WebKit浏览器（如Google Chrome 和Safari）。

点击此处查看Demo

 

以下为Demo的代码：

Effect 1: Fade Block

html：

<div id="fade">Place mouse on  me i will fade!</div>

CSS：

#fade{opacity: 1;-webkit-transition: opacity 1s linear;}
#fade:hover{opacity: 0;}

.效果2: Pulsate Block

html：

<div id="pulsate">Place mouse on  me i will pulsate!</div>

CSS：

#pulsate:hover {-webkit-animation-name: pulsate;-webkit-animation-duration: 20s;-webkit-animation-timing-function: ease-in-out;}

	@-webkit-keyframes pulsate {
	0% { width:140px; }
	5% { width:190px; left:-25px; }
	10% { width:140px; left:0px; }
	15% { width:190px; left:-25px; }
	20% { width:140px; left:0px; }	
	40% { width:140px; }
	45% { width:190px; left:-25px; }
	50% { width:140px; left:0px;}
	55% { width:190px; left:-25px;}
	60% { width:140px; left:0px;}
	80% { width:140px; }
	100% { width:140px;  }
	}

.效果3: Nudge

html：

<div id="nudge">Place mouse on  me my text will shift!</div>

CSS：

#nudge{-webkit-transition-property:color,background-color,padding-left;-webkit-transition-duration:500ms,500ms,500ms}
#nudge:hover{background-color:#efefef;color:#333;padding-left:50px}

.效果4: Expand Block

html：

<div id="expand">Place mouse on  me my border will expand</div>

CSS：

#expand{background-color:#eee;-webkit-transition: all 500ms linear; border:10px solid black}
#expand:hover{border:30px solid #800}

.效果5: Bounce Block

html：

<div id="bounce">Place mouse on  me i will bounce!</div>

CSS：

#bounce:hover {-webkit-animation-name:bounce;-webkit-animation-duration:1s;-webkit-animation-iteration-count:2;-webkit-animation-direction:alternate}
	@-webkit-keyframes bounce{from{margin-left:0px;}
		to{margin-left:250px;}
		}

.效果6: Spin Block

 html：

<div id="spin">Place mouse on  me i will spin</div>

CSS：

#spin{-webkit-transition: -webkit-transform 3s ease-in;}
#spin:hover{-webkit-transform:rotate(360deg)}

.效果7: Accordion

html：

<div id="accordion" class="accordion">
		<a href="#first">This is first tab</a><div id="first"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>
		<a href="#second">This is second tab</a><div id="second"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>
		<a href="#third">This is third tab</a><div id="third"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>
	</div>

CSS：

.accordion a{display:block;padding:5px 10px;background-color:#333;color:#eee;text-decoration:none}
.accordion a:hover{background-color:#999}
.accordion div{background-color:#ccc;color:#222;}
.accordion div p{padding:20px}
 
#accordion div{height:0;overflow:hidden;-webkit-transition:height 600ms ease}
#accordion div:target{height:110px}

 

查看Demo：http://webdeveloperjuice.com/demos/css/css3effects.html