前端之html5和css3

設置某一個角的圓角，好比設置左上角的圓角：
border-top-left-radius:30px 60px;
同時分別設置四個角： border-radius:30px 60px 120px 150px;
設置四個圓角相同：
border-radius:50%;

rgba（新的顏色值表示法）

一、盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;
二、rgba(0,0,0,0.1) 前三個數值表示顏色，第四個數值表示顏色的透明度

CSS3陰影

box-shadow：h-shadow v-shadow blur spread color inset;
分別設置陰影：水平偏移 垂直偏移 羽化大小 擴展大小 顏色 是否內陰影

複製代碼
<style type="text/css">
.box{
width:200px;
height:50px;
background-color:gold;
/ box-shadow:10px 10px 5px 2px pink inset; /
box-shadow:10px 10px 5px 2px pink;
}
</style>
......
<div class="box"></div>

<!-- 給盒子加上了粉紅色的陰影 -->
複製代碼

css3圓角示例

css3圓角示例
透明度rgba示例

透明度rgba示例

transition動畫
CSS3 transition動畫

一、transition-property 設置過渡的屬性，好比：width height background-color
二、transition-duration 設置過渡的時間，好比：1s 500ms
三、transition-timing-function 設置過渡的運動方式

linear 勻速

ease 開始和結束慢速
ease-in 開始是慢速
ease-out 結束時慢速
ease-in-out 開始和結束時慢速
cubic-bezier(n,n,n,n)
好比：cubic-bezier(0.845, -0.375, 0.215, 1.335)
曲線設置網站：https://matthewlein.com/ceaser/
四、transition-delay 設置動畫的延遲
五、transition: property duration timing-function delay 同時設置四個屬性

通常用緩衝狀態；

鼠標移動到圖形上變化動畫

鼠標移動到圖形上變化動畫
鼠標移動圖片彈出說明動畫

鼠標移動圖片彈出說明動畫

transform變換
CSS3 transform變換
一、translate(x,y) 設置盒子位移
二、scale(x,y) 設置盒子縮放
三、rotate(deg) 設置盒子旋轉
四、skew(x-angle,y-angle) 設置盒子斜切
五、perspective 設置透視距離
六、transform-style flat | preserve-3d 設置盒子是否按3d空間顯示
七、translateX、translateY、translateZ 設置三維移動
八、rotateX、rotateY、rotateZ 設置三維旋轉
九、scaleX、scaleY、scaleZ 設置三維縮放
十、tranform-origin 設置變形的中心點
十一、backface-visibility 設置盒子背面是否可見

transform是一個靜態的效果，不是作動畫的；但能夠和動畫進行配合使用；
其中，旋轉用的比較多；

位移，縮放，旋轉，斜切示例

位移，縮放，旋轉，斜切示例
transform-origin變換中心示例

transform-origin變換中心示例
圖片翻轉示例

圖片翻轉示例
翻面動畫示例

View Code

animation動畫
CSS3 animation動畫
一、@keyframes 定義關鍵幀動畫
二、animation-name 動畫名稱
三、animation-duration 動畫時間
四、animation-timing-function 動畫曲線

linear 勻速
ease 開始和結束慢速
ease-in 開始是慢速
ease-out 結束時慢速
ease-in-out 開始和結束時慢速
steps 動畫步數
五、animation-delay 動畫延遲
六、animation-iteration-count 動畫播放次數 n|infinite
七、animation-direction

normal 默認動畫結束不返回
alternate 動畫結束後返回
八、animation-play-state 動畫狀態

paused 中止
running 運動
九、animation-fill-mode 動畫先後的狀態

none 不改變默認行爲
forwards 當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）
backwards 在 animation-delay 所指定的一段時間內，在動畫顯示以前，應用開始屬性值（在第一個關鍵幀中定義）
both 向前和向後填充模式都被應用
十、animation:name duration timing-function delay iteration-count direction;同時設置多個屬性

animation使用示例

animation使用示例
風車旋轉示例

風車旋轉示例
風車圖片

loading動畫的製做

css3新增選擇器，不用寫過多的class，直接用某某下的某某的第幾個便可；

loading動畫

loading動畫
走路動畫
animation步數的應用-走路動畫

走路動畫示例
走路圖片

CSS權重
CSS權重指的是樣式的優先級，有兩條或多條樣式做用於一個元素，權重高的那條樣式對元素起做用,權重相同的，後寫的樣式會覆蓋前面寫的樣式。

權重的等級
能夠把樣式的應用方式分爲幾個等級，按照等級來計算權重

一、!important，加在樣式屬性值後，權重值爲 10000
二、內聯樣式，如：style=」」，權重值爲1000
三、ID選擇器，如：#content，權重值爲100
四、類，僞類和屬性選擇器，如： content、:hover 權重值爲10
五、標籤選擇器和僞元素選擇器，如：div、p、:before 權重值爲1
六、通用選擇器（*）、子選擇器（>）、相鄰選擇器（+）、同胞選擇器（~）、權重值爲0；

css權重計算示例

CSS3新增選擇器
一、E:nth-child(n)：匹配元素類型爲E且是父元素的第n個子元素

複製代碼
<style type="text/css">
.list div:nth-child(2){
background-color:red;
}
</style>
......
<div class="list">
<h2>1</h2>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>

<!-- 第2個子元素div匹配 -->
複製代碼
二、E:nth-last-child(n)：匹配元素類型爲E且是父元素的倒數第n個子元素（與上一項順序相反）
三、E:first-child：匹配元素類型爲E且是父元素的第一個子元素
四、E:last-child：匹配元素類型爲E且是父元素的最後一個子元素
五、E:only-child：匹配元素類型爲E且是父元素中惟一的子元素
六、E:nth-of-type(n)：匹配父元素的第n個類型爲E的子元素
七、E:nth-last-of-type(n)：匹配父元素的倒數第n個類型爲E的子元素（與上一項順序相反）
八、E:first-of-type：匹配父元素的第一個類型爲E的子元素
九、E:last-of-type：匹配父元素的最後一個類型爲E的子元素
十、E:only-of-type：匹配父元素中惟一子元素是E的子元素
十一、E:empty 選擇一個空的元素
十二、E:enabled 可用的表單控件
1三、E:disabled 失效的表單控件
1四、E:checked 選中的checkbox
1五、E:not(s) 不包含某元素

複製代碼
<style type="text/css">
.list div:not(:nth-child(2)){
background-color:red;
}
</style>
......
<div class="list">
<h2>1</h2>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>

<!-- 第 三、四、5 子元素div匹配 -->
複製代碼
1六、E:target 對應錨點的樣式

複製代碼
<style type="text/css">
h2:target{
color:red;
}
</style>
......
<a href="#tit01">標題一</a>
......
<h2 id="tit01">標題一</h2>

<!-- 點擊連接，h2標題變紅 -->
複製代碼
1七、E > F E元素下面第一層子集
1八、E ~ F E元素後面的兄弟元素
1九、E + F 緊挨着的兄弟元素

屬性選擇器：
一、E[data-attr] 含有data-attr屬性的元素

複製代碼
<style type="text/css">
div[data-attr='ok']{
color:red;
}
</style>
......
<div data-attr="ok">這是一個div元素</div>

<!-- 點擊連接，h2標題變紅 -->
複製代碼
二、E[data-attr='ok'] 含有data-attr屬性的元素且它的值爲「ok」
三、E[data-attr^='ok'] 含有data-attr屬性的元素且它的值的開頭含有「ok」
四、E[data-attr$='ok'] 含有data-attr屬性的元素且它的值的結尾含有「ok」
五、E[data-attr*='ok'] 含有data-attr屬性的元素且它的值中含有「ok」

css新增選擇器示例01

css新增選擇器01
css新增選擇器示例02

css新增選擇器示例02
css新增選擇器示例03

css新增選擇器示例03

CSS3前綴和H5新增標籤
CSS瀏覽器前綴

瀏覽器樣式前綴
爲了讓CSS3樣式兼容，須要將某些樣式加上瀏覽器前綴：

-ms- 兼容IE瀏覽器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari

好比：

複製代碼
div
{
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}
複製代碼
自動添加瀏覽器前綴
目前的情況是，有些CSS3屬性須要加前綴，有些不須要加，有些只須要加一部分，這些加前綴的工做能夠交給插件來完成，好比安裝： autoprefixer

Sublime text 中安裝 autoprefixer 執行 preferences/key Bindings-Users 設置快捷鍵 { "keys": ["ctrl+alt+x"], "command": "autoprefixer" } 經過此工具能夠按照最新的前綴使用狀況給樣式自動加前綴。
在寫好的樣式處按ctrl+alt+x便可自動添加前綴；

h5新增標籤

HTML5新結構標籤
h5新增的主要語義化標籤以下：

一、header 頁面頭部、頁眉
二、nav 頁面導航
三、article 一篇文章
四、section 文章中的章節
五、aside 側邊欄
六、footer 頁面底部、頁腳

PC端兼容h5的新標籤的方法，在頁面中引入如下js文件:
<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>

h5新增標籤示例

複製代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="header"></div>

<header></header>

<div class="menu"></div>

<nav></nav>

<div class="footer"></div>

<footer></footer>

</body>
</html>
複製代碼

HTML5 音頻和視頻

html5增長了audio和video標籤，提供了在頁面上插入音頻和視頻的標準方法。

audio標籤
支持格式：ogg、wav、mp3

對應屬性：
一、autoplay 自動播放
二、controls 顯示播放器
三、loop 循環播放
四、preload 預加載
五、muted 靜音

舉例：

複製代碼
<audio src="source/audio.mp3" autoplay controls loop preload></audio>

<!-- 或者用以下方式： -->

<audio autoplay controls loop preload>
<source src="source/audio.mp3" type="">
<source src="source/audio02.wav" type="">
</audio>
複製代碼
source標籤的做用是提供多個媒體文件地址，若是一個地址的文件不兼容，就使用下一個地址。

video標籤
支持格式：ogg、mp四、webM

屬性：
一、width
二、height
三、Poster

可選第三方播放器：
一、cyberplayer
二、tencentPlayer
三、youkuplayer

HTML5 新增表單控件

新增類型：網址 郵箱 日期 時間 星期 數量 範圍 電話 顏色 搜索

複製代碼
<label>網址:</label><input type="url" name="" required><br><br>
<label>郵箱:</label><input type="email" name="" required><br><br>
<label>日期:</label><input type="date" name=""><br><br>
<label>時間:</label><input type="time" name=""><br><br>
<label>星期:</label><input type="week" name=""><br><br>
<label>數量:</label><input type="number" name=""> <br><br>
<label>範圍:</label><input type="range" name=""><br><br>
<label>電話:</label><input type="tel" name=""><br><br>
<label>顏色:</label><input type="color" name=""><br><br>
<label>搜索:</label><input type="search" name=""><br><br>
複製代碼

新增經常使用表單控件屬性：
一、placeholder 設置文本框默認提示文字
二、autofocus 自動得到焦點
三、autocomplete 聯想關鍵詞

h5新增表單控件屬性示例

複製代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" name="" placeholder="搜索">

<input type="text" name="" autofocus>

</body></html>