在Webkit浏览器中,使用CSS3替代7个JavaScript效果

众所周知,这段时间CSS3一直很火,大有成为“JavaScript杀手”的可能。

此文将会介绍7个很酷的CSS3动画的示例,使用WebKit浏览器(如Google Chrome 和Safari)。

我相信在不久的将来,有些必须用javascript librararies实现的效果完全可以用CSS3取代的 。

我们先看一下 全部的Demo 演示. 请尝试在最新的WebKit浏览器中浏览,如 safari 和 chrome中。

效果 1: Fade Block

The HTML Code:

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

The CSS Code:

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

效果 2: Pulsate Block

The HTML Code:

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

The CSS Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#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

The HTML Code:

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

The CSS Code:

1
2
#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

The HTML Code:

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

The CSS Code:

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

效果 5: Bounce Block

The HTML Code:

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

The CSS Code:

1
2
3
4
#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

The HTML Code:

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

The CSS Code:

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

效果 7: Accordion

The HTML Code:

1
2
3
4
5
<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>

The CSS Code:

1
2
3
4
5
6
7
.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 演示

 

站点统计