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