css----transition的應用，產生動畫效果。
阿新 • • 發佈：2019-04-27
設置 order left opacity 產生 動畫 顯示 ans bubuko
應用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>
效果圖（錄制工具不好用，就不錄光標了）
運用得好的話，效果是挺好看的。
css----transition的應用，產生動畫效果。