Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
.box {
	width:500px;
	height:120px;
	margin:0 auto;
}
.box span {
	display:block;
	width:200px;
	height:80px;
	border:2px solid #2ec06c;
	color:#2ec06c;
	line-height:80px;
	text-align:center;
	float:left;
	margin:10px 10px;
	font-size:18px;
	border-radius:10px;
	font-weight:bolder;
	transition:border-radius .5s;
}
.box span:hover {
	border-radius:40px;
	color:#fff;
	background:#2ec06c;
}
.box2 {
	width:800px;
	height:360px;
	margin:20px auto;
	background:#f5f5f5;
}
.box2 li {
	width:200px;
	height:300px;
	background:#fff;
	float:left;
	margin:10px 15px;
	list-style:none;
	position:relative;
	transition:all .2s;
}
.box2 li:hover,.box2 li:focus {
	box-shadow:0 15px 30px rgba(0,0,0,0.1);
	transform:translate3d(0,-2px,0);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

纯css滑过动画效果

纯css滑过元素以及获取元素焦点时增加动画效果,对应动画增加定义时间即可。

0