* {
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);
}
纯css滑过元素以及获取元素焦点时增加动画效果,对应动画增加定义时间即可。