050602課堂css3旋轉、過渡、動畫
阿新 • • 發佈：2018-05-06
from == width ansi charset html idt ani nim
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #first{ width: 200px; height: 200px; background-color: orange; margin-left: 200px; margin-top: 200px; /*=========過渡========*/ transition: 5s; } #first:hover{ /*===========2D==========*/ /*transform: rotate(45deg);*/ /* 平面內旋轉*/ /*transform: translate(30px,30px); 位置的移動,表示向右30px,向下30px*/ /*transform: scale(2); 倍數的放大*/ /*transform: skew(0deg,-30deg); 扭曲*/ /*transform: skew(30deg,30deg);*/ /*===========3D=============*/ /*transform: rotateX(180deg);*/ /*transform: rotateY(360deg);*/ /*transform: rotateZ(360deg);*/ } #second{ width: 300px; height: 300px; background: black; position: relative; /*相對定位*//*由於需要位置改變,所以增加了position屬性*/ animation: mysecond 5s infinite /*alternate; 動畫捆綁,兩個值,動畫名稱/時長,加上一個無限執行,交替執行 */; } @keyframes mysecond{ /*改變位置和背景顏色*/ 0%{background: red;border-radius: 90px/*為元素添加圓角邊框*/;box-shadow: -35px 0px 15px gray;left: 0px;top: 0px;} 25%{background: yellow;border-radius: 0px;left: 400px;top: 0px;} 50%{background: blue;border-radius: 90px;left: 400px;top: 300px;} 75%{background: green;border-radius: 0px;box-shadow: 0px 30px 15px gray;left: 0px;top: 300px;} 100%{background: red;border-radius: 20px;left: 0px;top: 0px;} /*from{background: red;border-radius: 90px;box-shadow: -35px 0px 15px gray;left: 0px;top: 0px;} to{background: yellow;border-radius: 0px;left: 400px;top: 0px;} }*/ </style> </head> <body> <!--<div id="first"> 今天周末 </div>--> <!----------------動畫---------------> <div id="second"> </div> </body> </html>
--旋轉transform
-----2D
--------rotate(edg)平面內旋轉
--------translate(橫向，縱向)
--------scale(寬，高)
--------skew(水平角度，垂直角度)
-----3D
--------rotateX(edg)
--------rotateY(edg)
--過渡transition:3s 時間 不是hover加 是那個容器需要給那個容器加
--動畫
-----屬性:animation:動畫名稱、時長，加上一個無限執行，交替執行
-----@keyframes動畫名稱{
0%
25%
50%
75%
100%
}
----------------動畫名稱{
form{}
to{}
}
050602課堂css3旋轉、過渡、動畫