用CSS写动态效果

CSS写动态效果

总所周知，JS能写出炫酷的动态效果，HTML和CSS结合也能写出简单的动态效果哦！

鼠标移上去图片抖动

a:hover{
	right: 1px;
	bottom: 1px;
	position: relative;
}
img{
	border: none;
}

这是CSS代码

鼠标移上去变透明

<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			.main{
				width:400px;
				height: 400px;
				background-color: green;
				position:relative;
			}	
			.main:hover{
				opacity:0.3;
			}
		</style>

这是CSS代码

鼠标移上去遮盖的效果

.left{
				width:350px;
				height:350px;
				position:relative;
				float:left;
			}
			.left_hove{
				width:350px;
				height:350px;
				position:absolute;
				top:0; 
				left:0;
				background-color:rgba(0,0,0,.3);
				display:none;
			}
			.left:hover .left_hove{
				cursor:pointer;
				display:block;
			}

这是CSS代码

鼠标移上去变背景图

.play{
				width: 36px;
                height: 36px;
                background-image:url(img/sprite.png);
                background-repeat:no-repeat;
				background-position: 0 -401px;
				position:absolute;
				bottom:0;
				right:0;
				margin-bottom:5px;
				margin-right: 5px;
			}
			.play:hover{
				cursor:pointer;
				background-image:url(img/sprite.png);
                background-repeat:no-repeat;
				background-position: 0 -360px;
			}

这是CSS代码

这些都是简单的CSS特效，虽然简单，但是要写出来还是要动动脑。