应用transition属性产生动画效果
css中的transition属性设置元素的变化过程所需的时间。
<!DOCTYPE html> <html> <head> <style type="text/css"> .adiv{ position:absolute; text-align:center; top:45%; left:45%; } .bdiv{ border:2px solid black; padding:25px 20px; width:100px; height:30px; background-color:#33ffff; color:white; cursor:pointer;<!--设置鼠标手指状--> } .bdiv>span{ border:2px solid #33ffff; position:absolute; transition:0.8s;<!--设置变化所需要的时间--> } .bdiv>span:nth-of-type(1){ top:0px; left:-300px; width:140px; opacity:0;<!--设置透明，隐藏--> } .bdiv:hover>span:nth-of-type(1){ top:0px; left:0px; width:140px; opacity:1;<!--设置不透明，显示--> } .bdiv>span:nth-of-type(2){ top:80px; left:300px; width:140px; opacity:0; } .bdiv:hover>span:nth-of-type(2){ top:80px; left:0px; width:140px; opacity:1; } .bdiv>span:nth-of-type(3){ top:160px; left:0px; height:80px; opacity:0; } .bdiv:hover>span:nth-of-type(3){ top:0px; left:0px; height:80px; opacity:1; } .bdiv>span:nth-of-type(4){ top:-160px; left:140px; height:80px; opacity:0; } .bdiv:hover>span:nth-of-type(4){ top:0px; left:140px; height:80px; opacity:1; } </style> </head> <body> <div class="adiv"> <div class="bdiv"> 鼠标放在这里 <span></span> <span></span> <span></span> <span></span> </div> </div> </body> </html>
效果图（录制工具不好用，就不录光标了）
运用得好的话，效果是挺好看的。