css11動態效果
阿新 • • 發佈：2017-06-29
doc prop col 1.5 sca for left ... ans
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>transform的使用</title> <style> li{ list-style: none; float: left; width: 80px; line-height: 40px; background: rgba(242, 123, 5, 0.61); border-radius: 6px; font-size: 16px; margin-left: 3px; } li a{ text-decoration: none; color: #fff; display: block; text-align: center; height: 40px; }li a:hover{ background: rgba(242, 88, 6, 0.87); border-radius: 6px; /*設置a元素在鼠標移入時向右下角移動4px，8px*/ /* transform: translate(4px,8px); 平移*/ /*鼠標放入 顯示1.5倍的效果 transform: scale(1.5);*/ /* transform: skewX(15deg);只針對X軸 transform: skewY(15deg);只針對Y軸*/ transform: skew(15deg,-15deg); } img:hover{ /*旋轉 默認是 順時針旋轉*/ transform: rotate(90deg) scale(1.5); } </style> </head> <body> <ul> <li><a href="#">服裝城</a></li> <li><a href="#">美妝館</a></li> <li><a href="#">超市</a></li> <li><a href="#">全球購</a></li> <li><a href="#">閃購</a></li> <li><a href="#">團購</a></li> <li><a href="#">拍賣</a></li> <li><a href="#">金融</a></li> </ul> <img src="cat.jpg" alt="小貓咪" height="100px" width="100px"> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>transition屬性</title> <style type="text/css"> /* transition屬性的值： transition-property：過渡效果的css屬性的名稱（color,background,font-size....）! 可以只設置一個屬性， 一般方便起見使用all！針對於所有的屬性 transition-duration:過渡效果需要多少秒 transition-timing-function：速度曲線！ ease：慢速開始，之後變快！ linear：勻速！ ease-in:慢速開始! ease-out:慢速結束： ease-in-out:慢速開始!慢速結束! transition-delay:過度效果開始前的等待時間！ 默認是0s！ */ div{ width: 100px; height: 100px; text-align: center; line-height: 100px; background-color: orange; /*過度效果*/ transition:all 1s linear; } div:hover{ background-color: red; font-size: 25px; transform: rotate(360deg); } </style> </head> <body> <div> 能旋轉不？ </div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>animation的使用</title> <style type="text/css"> div{ width: 100px; height: 100px; background: red; /*調用動畫*/ animation:animates 3s linear infinite; } /*創建關鍵幀*/ @keyframes animates{ 0%{ width: 0px; transform: translate(50px,0) ; } 25%{ width: 25px; height: 150px; transform: translate(150px,0) rotate(90deg); background-color: pink; } 50%{ width: 50px; height: 300px; background-color: aqua; transform: translate(300px,0) rotate(180deg); } 75%{ width: 75px; height: 150px; background-color: orange; transform: translate(150px,0) rotate(270deg); } 100%{ width: 100px; transform: translate(50px,0) rotate(360deg); } } </style> </head> <body> <div></div> </body> </html>
css11動態效果