CSS3可以做很多特效,今天青岛星网带大家一起学习用CSS3制作上下移动、鼠标放上去放大、旋转放大、360度旋转,纯CSS3制作。
<a class="a">上下移动</a> <a class="a2">旋转放大</a> <a class="a3">放大效果</a> <a class="a4">360度旋转</a>
.a{transition:All .4s ease-in-out;-webkit-transition:All .4s ease-in-out;-moz-transition:All .4s ease-in-out;-o-transition:All .4s ease-in-out;width:200px;height:200px;background-color:#000;display:block;margin:20px auto;color:#fff;text-align:center;line-height:200px;font-size:20px;font-weight:700} .a:hover{transform:translate(0,-10px);-webkit-transform:translate(0,-10px);-moz-transform:translate(0,-10px);-o-transform:translate(0,-10px);-ms-transform:translate(0,-10px)} .a2{transition:All .4s ease-in-out;-webkit-transition:All .4s ease-in-out;-moz-transition:All .4s ease-in-out;-o-transition:All .4s ease-in-out;width:200px;height:200px;background-color:#000;display:block;margin:20px auto;color:#fff;text-align:center;line-height:200px;font-size:20px;font-weight:700} .a2:hover{transform:rotate(360deg) scale(1.2);-webkit-transform:rotate(360deg) scale(1.2);-moz-transform:rotate(360deg) scale(1.2);-o-transform:rotate(360deg) scale(1.2);-ms-transform:rotate(360deg) scale(1.2)} .a3{transition:All .4s ease-in-out;-webkit-transition:All .4s ease-in-out;-moz-transition:All .4s ease-in-out;-o-transition:All .4s ease-in-out;width:200px;height:200px;background-color:#000;display:block;margin:20px auto;color:#fff;text-align:center;line-height:200px;font-size:20px;font-weight:700} .a3:hover{transform:scale(1.2);-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2)} .a4{transition:All .4s ease-in-out;-webkit-transition:All .4s ease-in-out;-moz-transition:All .4s ease-in-out;-o-transition:All .4s ease-in-out;width:200px;height:200px;background-color:#000;display:block;margin:20px auto;color:#fff;text-align:center;line-height:200px;font-size:20px;font-weight:700} .a4:hover{transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg)}
大家可以自行预览哦