css3 animation動畫
@keyframes 定義關鍵幀動畫
animation-name 動畫名稱
animation-duration 動畫時間
animation-timing-function 動畫曲線
linear 勻速
ease 開始和結束慢速
ease-in 開始是慢速
ease-out 結束時慢速
ease-in-out 開始和結束時慢速
steps 動畫步數(shù)
animation-delay 動畫延遲
animation-iteration-count 動畫播放次數(shù) n|infinite
animation-direction
normal 默認動畫結束不返回
Alternate 動畫結束后返回
animation-play-state 動畫狀態(tài)
paused 停止
running 運動
animation-fill-mode 動畫前后的狀態(tài)
none 不改變默認行為
forwards 當動畫完成后壤巷，保持最后一個屬性值（在最后一個關鍵幀中定義）
backwards 在 animation-delay 所指定的一段時間內，在動畫顯示之前瞧毙，應用開始屬性值（在第一個關鍵幀中定義）
both 向前和向后填充模式都被應用
animation:name duration timing-function delay iteration-count direction;同時設置多個屬性
人物走動動畫
<!DOCTYPE html>
<head>
<title>人物走路動畫</title>
.box{
width: 120px;
height: 182px;
/*border: 1px solid black;*/
margin: 50px auto 0;
overflow: hidden;
position: relative;
animation: moving 2s linear infinite;
}
.box img{
position: absolute;
left: 0;
top: 0;
/*steps動畫步數(shù)胧华，圖片有8幀，所以設置為8步*/
animation: walking 2s steps(16) infinite;
}
@keyframes moving{
0%{
transform: translate(0px,0px);/*位移*/
}
50%{
transform: translate(200px,0px);
}
100%{
transform: translate(0px,0px);
}
}
@keyframes walking{
from{
left: 0px;
}
to{
left: -1920px;
}
}
</style>
</head>
<body>
img/walking1.png"alt="人物走路">
</div>
</body>
</html>
多幀動畫
<!DOCTYPE html>
<head>
<title>多幀動畫</title>
.box{
width: 100px;
height: 100px;
background-color: gold;
margin: 50px auto 0;
animation: moving 1s ease 1s both;
}
@keyframes moving{
0%{
/*位移動畫*/
transform: translateY(0px);
background-color: cyan;
}
50%{
transform: translateY(400px);
background-color: gold;
border-radius: 0px;
}
100%{
transform: translateY(0px);
background-color: red;
border-radius: 50px;
}
}
</style>
</head>
<body>
</div>
</body>
</html>
瀏覽器前綴
為了讓CSS3樣式兼容宙彪，需要將某些樣式加上瀏覽器前綴：
-ms- 兼容IE瀏覽器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari
自動添加瀏覽器前綴
目前的狀況是矩动，有些CSS3屬性需要加前綴，有些不需要加释漆，有些只需要加一部分悲没，這些加前綴的工作可以交給插件來完成，比如安裝： autoprefixer Sublime text 中安裝 autoprefixer 執(zhí)行 preferences/key Bindings-Users 設置快捷鍵 { "keys": ["ctrl+alt+x"], "command": "autoprefixer" } 通過此工具可以按照最新的前綴使用情況給樣式自動加前綴男图。
JavaScript嵌入頁面的方式
1示姿、行間事件（主要用于事件）
<input type="button" name="" onclick="alert('ok！');">
2逊笆、頁面script標簽嵌入
<script type="text/javascript">? ? ? ?
? ? var a = '你好栈戳！';
? ? alert(a);
</script>
3、外部引入
<script type="text/javascript" src="js/index.js"></script>
javascript語句與注釋
一條javascript語句應該以“;”結尾
javascript注釋: // 單行注釋? ? ? ?/*? 多行注釋? */
變量
JavaScript 是一種弱類型語言难裆，javascript的變量類型由它的值來決定荧琼。 定義變量需要用關鍵字 'var'
變量類型
5種基本數(shù)據類型：number、string差牛、boolean命锄、undefined、null
1種復合類型：object
變量偏化、函數(shù)脐恩、屬性、函數(shù)參數(shù)命名規(guī)范
1侦讨、區(qū)分大小寫
2驶冒、第一個字符必須是字母、下劃線（_）或者美元符號（$）
3韵卤、其他字符可以是字母骗污、下劃線、美元符或數(shù)字
