<!DOCTYPE html5>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3基礎知識（動畫）</title>
<style>
/*div{*/
/*width: 150px;*/
/*height: 150px;*/
/**/
/*}*/
/*過渡 transition（參數分別為 需要過渡的屬性（width、height） 過渡需要時間 過渡函數 過渡延時間 動畫曲線*/
/*理解應用眾多過渡函數的效果*/
/*div:hover{*/
/*width: 400px;*/
/*height: 500px;*/
/*-webkit-transition: width 2s linear 1s, height 3s ease-in 2s;*/
/*-moz-transition: width 2s linear 1s, height 3s ease-in 2s;*/
/*-o-transition: width 2s linear 1s, height 3s ease-in 2s;*/
/*-ms-transition: width 2s linear 1s, height 3s ease-in 2s;*/
/*transition: width 2s linear 1s, height 3s ease-in 2s;*/
/*}*/
/*transform 變形是對元素進行2D或3D轉換，可以對元素進行旋轉、縮放、平移或扭曲。*/
/*transform-origin 用來改變變形的原點 默認居于元素X軸和Y軸的50%處*/
/* 變形2D-旋轉 (x deg 旋轉角度 x正數為順時針 x負數為逆時針) */
/*div:hover{*/
/*transform: rotate(30deg);*/
/*transition: transform 2s;*/
/*-webkit-transform-origin: 50% 100%; !*(50%,100%) 表(x,y) (最左 最上)*!*/
/*-moz-transform-origin: 50% 100%;*/
/*-o-transform-origin: 50% 100%;*/
/*-ms-transform-origin: 50% 100%;*/
/*-webkit-transform: rotate(30deg);*/
/*-moz-transform: rotate(30deg);*/
/*-o-transform: rotate(30deg);*/
/*-ms-transform: rotate(30deg);*/
/*}*/
/* 變形2D 平移 translate */
/*div:hover{*/
/*transform: translate(100px,100px); !* (x,y) 長寬 也可以傳百分比*!*/
/*transition: transform 2s ease-in;*/
/*}*/
/* 變形2D 縮放 scale （大于1放大，小于1縮小）*/
/*div:hover{*/
/*transform: scale(2,3); !* (x,y) 分別為放大的倍數*!*/
/*transition: transform 2s ease-in;*/
/*}*/
/* 變形2D 扭曲 skew */
/*div:hover{*/
/*transform: skew(30deg,30deg); !* (x,y) 分別為x軸，y軸的扭曲角度*!*/
/*transition: transform 2s ease-in;*/
/*}*/
/*3D perspective 表 眼睛到屏幕的距離 */
/*#parent{*/
/*perspective: 300px;*/
/*}*/
/*#child{*/
/*height: 100px;*/
/*width: 100px;*/
/**/
/*transform-style: preserve-3d;*/
/*position: absolute;*/
/*margin-left: 100px;*/
/*margin-top: 50px;*/
/*}*/
/*#child:hover{*/
/*transform: rotateX(-45deg);*/
/*}*/
/* 動畫 animation 參數（名稱 動畫持續時間 方式 延遲時間 次數 方向 動畫函數）*/
/*@keyframes move {*/ /*關鍵幀動畫*/
/*0%{*/
/*width: 150px;*/
/**/
/*}*/
/*50%{*/
/*width: 500px;*/
/**/
/*}*/
/*100%{*/
/*width: 150px;*/
/**/
/*}*/
/*}*/
/*#anima{*/
/*width: 150px;*/
/*height: 150px;*/
/**/
/*}*/
/*#anima:hover{*/
/*animation: move 2s linear 1s 2 infinite; !*infinite無限次循環 reverse 反向 *!*/
/*}*/
/*圖片加載效果*/
#loading{
animation: move 2s infinite linear;
border: 0px solid black;
width: 96px;
height:96px;
margin: 50px auto;
background:url(img/loading.png)no-repeat center;
}
@keyframes move{
0%{ transform: rotate(0deg);}
100%{ transform: rotate(360deg);}
}
</style>
</head>
<body>
<div id="loading"></div>
<!--<div>樹蔭照水愛晴柔</div>-->
<!--<div id="anima">醉清風</div>-->
<!--<div id="parent">-->
<!--<div id="child"></div>-->
<!--</div>-->
</body>
</html>
............................................
素材
編寫規則)
