什么是html5趣效？
一些學(xué)習(xí)時(shí)候自己總結(jié)的部分特效和上課的部分筆記存在GitHub里面～GitHub鏈接??
- h5并不是新的語言龙宏，而是html語言第五次重大修改的版本
- 支持:所有的主流瀏覽器都支持h5(有選擇性的支持 [后面會(huì)講解如何支持其他瀏覽器])
- 改變了用戶與文檔的交互方式: 多媒體:video視頻 audio音頻 canvas畫板
- 增加了新特性:1.標(biāo)簽語義化咐容。2.本地存儲(chǔ)性。3.網(wǎng)頁多媒體。4.二維與三維晓勇。5.特效(動(dòng)畫/過度)
- 相對(duì)h4：h5拋棄了一些不合理的不常用的標(biāo)簽和屬性，也新增了一些標(biāo)簽和屬性(表單屬性 input)灌旧，從代碼角度而言绑咱，h5的網(wǎng)頁代碼結(jié)構(gòu)更加簡潔
如何兼容h5C3？(使用第三種方法即可)
- 將不支持的標(biāo)簽改為塊級(jí)元素
- 手動(dòng)創(chuàng)建標(biāo)簽(注意默認(rèn)創(chuàng)建的標(biāo)簽是行級(jí)元素枢泰，需要display:block;)
documet.createElement(“自定義標(biāo)簽名”);
- 引入第三方插件
html5shiv.js/*解決h5兼容問題的插件*/
respond.min.js/*解決C3兼容問題的插件*/
H5常用的語義化標(biāo)簽
| 標(biāo)簽名 | 作用 | |
|---|---|---|
| nav | 導(dǎo)航 | |
| header | 頁眉 | |
| footer | 頁尾 | |
| main | 主要內(nèi)容 | |
| article | 文章 | |
| aside | 主題內(nèi)容之外 |
H5表單input中新增的type常用屬性值總結(jié)
<form>
<!--email:提供了完整的郵箱驗(yàn)證<要求必須包含@符號(hào)描融，同時(shí)必須包含服務(wù)器名稱，如果不能滿足驗(yàn)證衡蚂，則會(huì)阻止當(dāng)前數(shù)據(jù)的提交窿克！>-->
<label for="email">郵箱</label><input type="email" id="email"><br>
<!--tel:用來在移動(dòng)端打開數(shù)字鍵盤，限制用戶輸入的內(nèi)容只能為數(shù)字-->
<label for="phone">電話</label><input type="tel" id="phone"><br>
<!--url:驗(yàn)證合法的網(wǎng)站讳窟，必須包含<http://>-->
<label for="url">網(wǎng)站</label><input type="url" id="url"><br>
<!--number:用戶輸入的只能為數(shù)字让歼，包含小數(shù)點(diǎn)，不能輸入除數(shù)字以外的其他字符
max:最大值
min:最小值
-->
<label for="number">數(shù)量</label><input type="number" max="100" min="1" id="number"><br>
<!--search:可以提供更人性化的輸入體驗(yàn)丽啡，輸入后右上角會(huì)出現(xiàn)叉叉可一次刪除輸入的內(nèi)容-->
<label for="search">請(qǐng)輸入商品名稱</label><input type="search" id="search"><br>
<!--range:范圍-->
<label for="range">范圍</label><input type="range" id="range"><span id="rangeSpan"></span><br>
<script>
//范圍
let rangeInput = document.getElementById("range");
let rangeSpan = document.getElementById("rangeSpan");
rangeSpan.innerHTML = rangeInput.value;
rangeInput.oninput = function () {
rangeSpan.innerHTML = this.value;
console.log(this.value);
}
</script>
顏色<input type="color"><br>
時(shí)間<input type="time"><br>
日前<input type="date"><br>
日前時(shí)間<input type="datetime-local"><br>
月份<input type="month"><br>
星期<input type="week"><br>
</form>
H5表單input中新增的常用其他屬性總結(jié)
<form id="myForm">
<!--placeholder:提示文本谋右，提示占位符-->
<!--autofocus:頁面刷新后自動(dòng)獲取焦點(diǎn)-->
<!--autocomplete:歷史記錄自動(dòng)提示 屬性值:off<關(guān)閉> on<打開>
1.設(shè)置該屬性的元素必須要有name屬性
2.必須要submit提交后才會(huì)有歷史記錄提示
-->
用戶名<input type="text" name="userName" placeholder="請(qǐng)輸入用戶名" autofocus autocomplete="on"><br>
<!--required:必須填寫-->
<!--pattern:正則表達(dá)式-->
電話<input type="tel" required pattern="^1[3|4|5|7|8][0-9]{9}$"><br>
!--multiple：可以選擇多個(gè)文件或者填寫多個(gè)郵箱(郵箱之間用[,逗號(hào)]分開即可)-->
文件：<input type="file" multiple><br>
<input type="submit">
</form>
<!--form：屬性值form表單的id 數(shù)據(jù)提交時(shí)可將不在form標(biāo)簽中的input標(biāo)簽一起submit-->
測(cè)試：<input type="text" form="myForm">
H5新增的表單事件
<form>
<label for="phone">電話</label><input type="tel" id="phone" pattern="^1\d{10}$"><br>
<input type="submit">
</form>
<script>
let phone = document.getElementById("phone");
/*oninput事件:監(jiān)聽當(dāng)前input內(nèi)容的改變，<只要改變內(nèi)容就會(huì)觸發(fā)這個(gè)事件>
* oninput事件和onkeyup事件的區(qū)別
* 1.oninput事件是只要改變了內(nèi)容就會(huì)觸發(fā)事件 补箍， onkeyup事件是鍵盤彈起的時(shí)候觸發(fā)
* 2.用鼠標(biāo)復(fù)制粘貼oninput事件會(huì)觸發(fā) onkeyup事件不會(huì)觸發(fā)
* */
phone.oninput = function () {
console.log(this.value);
};
phone.oninvalid = function (event) {
event = event || window.event;//event兼容寫法
/*設(shè)置提示氣泡中的文字*/
this.setCustomValidity("請(qǐng)輸入11位手機(jī)號(hào)");
/*阻止默認(rèn)提示氣泡*/
event.preventDefault();
};
</script>
表單總結(jié)小案例??
<!DOCTYPE html>
<html lang="en">
<head>
<!--來自一個(gè)很想要很牛逼的程序員-->
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.2.4.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
/*form {
position: relative;
}*/
fieldset {
width: 800px;
margin: 0 auto;
padding: 10px;
}
fieldset > label {
height: 40px;
line-height: 40px;
font-weight: 300;
}
input {
width: 100%;
height: 35px;
border-radius: 5px;
border: 1px solid #ccc;
color: #ddd;
font-size: 15px;
box-sizing: border-box;
padding-left: 10px;
outline: none;
font-weight: 200;
}
input[name='phone'] {
position: relative;
}
.telAside, .emailAside {
position: absolute;
text-align: center;
padding: 0 4px;
height: 30px;
line-height: 30px;
background-color: #4169e18c;
border-radius: 5px;
color: #ffffffb5;
top: 112px;
right: 320px;
font-size: 14px;
cursor: pointer;
display: none;
}
.emailAside {
top: 187px;
}
aside:hover {
background-color: #4169e1c7;
color: #ffffffeb;
}
input[name='score'], input[name='admissionDate'], input[name='graduationDate'],input[type='submit'],input[id='college'] {
color: #000;
}
input[type='submit'] {
margin-top: 30px;
background-color: #eae9e9;
}
</style>
<script>
$(function () {
invalidSj($("#phone"), $(".telAside"));
invalidSj($("#Email"), $(".emailAside"));
/**
* 驗(yàn)證錯(cuò)誤動(dòng)畫效果
* @param ele
*/
function animatePattern(ele) {
if (true) {
ele.css("display", "block").animate({"right": 320 - 10}, 200, function () {
ele.animate({"right": 320}, 200, function () {
ele.animate({"right": 320 - 10}, 200, function () {
ele.animate({"right": 320}, 200)
})
})
});
}
}
/**
* input驗(yàn)證事件
* @param ele 點(diǎn)擊的input
* @param error 對(duì)應(yīng)的錯(cuò)誤區(qū)域
* @param fn 多次調(diào)用input驗(yàn)證事件
*/
function invalidSj(ele, error, fn) {
ele.on("invalid", function (e) {
e.preventDefault();
true ? animatePattern(error) : error.css({"display": "none"});
if (fn) {
fn();
}
})
}
});
</script>
</head>
<body>
<form action="">
<fieldset>
<legend>學(xué)生檔案</legend>
<label for="userName">姓名：</label>
<input type="text" placeholder="請(qǐng)輸入用戶名" name="userName" id="userName" autofocus>
<label for="phone">手機(jī)號(hào)碼：</label>
<input type="tel" name="phone" id="phone" pattern="^1[3|4|5|7|8][0-9]{9}$">
<aside class="telAside">請(qǐng)輸入正確的11位手機(jī)號(hào)</aside>
<label for="Email">郵箱地址：</label>
<input type="email" name="Email" id="Email"
pattern="^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$">
<aside class="emailAside">請(qǐng)輸入正確的郵箱</aside>
<label for="college">所屬學(xué)院：</label>
<input type="text" id="college" list="clgList" placeholder="請(qǐng)選擇學(xué)院">
<datalist id="clgList">
<option value="前端"></option>
<option value="c"></option>
<option value="java"></option>
</datalist>
<label for="score">入學(xué)成績</label>
<input type="number" name="score" id="score" value="0" max="100" min="0">
<label for="admissionDate">入學(xué)日期：</label>
<input type="date" name="admissionDate" id="admissionDate">
<label for="graduationDate">畢業(yè)日期：</label>
<input type="date" name="graduationDate" id="graduationDate">
<input type="submit" value="提交">
</fieldset>
</form>
</body>
</html>
表單總結(jié)小案例
H5多媒體標(biāo)簽與其屬性
<!--audio:音頻-->
<!--
src:播放文件的路徑
controls:音頻播放器的控制器面板
autoplay:自動(dòng)播放
loop:循環(huán)播放-->
<!--<audio src="../mp3/aa.mp3" controls></audio>-->
<!--video：視頻-->
<!--
src:播放文件的路徑
controls:音頻播放器的控制器面板
autoplay:自動(dòng)播放
loop:循環(huán)播放
poster:指定視頻還沒有完全下載完畢改执，或者用戶沒有點(diǎn)擊播放前顯示的封面啸蜜。 默認(rèn)顯示當(dāng)前視頻文件的第一副圖像
width:視頻的寬度
height:視頻的高度
-->
<!--注意事項(xiàng)：視頻始終會(huì)保持原始的寬高比。意味著如果你同時(shí)設(shè)置寬高辈挂，并不是真正的將視頻的畫面大小設(shè)置為指定的大小衬横，而只是將視頻的占據(jù)區(qū)域設(shè)置為指定大小，除非你設(shè)置的寬高剛好就是原始的寬高比例终蒂。所以建議：在設(shè)置視頻寬高的時(shí)候蜂林，一般只會(huì)設(shè)置寬度或者高度，讓視頻文件自動(dòng)縮放-->
<!--<video src="../mp3/mp4.mp4" poster="../images/l1.jpg" controls height="600"></video>-->
<!--source:因?yàn)椴煌臑g覽器所支持的視頻格式不一樣拇泣，為了保證用戶能夠看到視頻噪叙，我們可以提供多個(gè)視頻文件讓瀏覽器自動(dòng)選擇-->
<!--<video src="../mp3/flv.flv" controls></video>-->
<video controls>
<!--視頻源，可以有多個(gè)源-->
<source src="../mp3/flv.flv" type="video/flv">
<source src="../mp3/mp4.mp4" type="video/mp4">
</video>
H5類樣式操作(添加樣式霉翔，移除樣式睁蕾，切換樣式，是否包含此樣式)
<style>
.red {
color: red;
}
.green {
color: green;
}
.yellow {
color: yellow;
}
.underList {
text-decoration: underline;
}
</style>
<ul>
<li>java</li>
<li class="green">c</li>
<li>前端</li>
<li>php</li>
</ul>
<input type="button" value="給第一個(gè)li添加red樣式和underList樣式" id="add">
<input type="button" value="給第二個(gè)li移除green樣式" id="remove">
<input type="button" value="給第三個(gè)li切換yellow樣式" id="toggle">
<input type="button" value="判斷第四個(gè)li是否包含某個(gè)樣式" id="contains">
<script>
window.onload = function () {
document.querySelector("#add").addEventListener("click", function () {
/*add:為元素添加指定的樣式债朵，一次只能添加一個(gè)樣式*/
/*querySelector("li"):querySelector獲取的是單個(gè)標(biāo)簽如有多個(gè)獲取的是第一個(gè)符合條件的標(biāo)簽*/
document.querySelector("li").classList.add("red");
document.querySelector("li").classList.add("underList");
});
document.querySelector("#remove").addEventListener("click", function () {
/*remove:為元素移除指定的樣式*/
/*querySelectorAll("li")[1]:querySelectorAll獲取的是個(gè)數(shù)組*/
document.querySelectorAll("li")[1].classList.remove("green");
});
document.querySelector("#toggle").addEventListener("click", function () {
/*toggle:切換樣式子眶，有則移除，無則添加*/
document.querySelectorAll("li")[2].classList.toggle("yellow");
});
document.querySelector("#contains").addEventListener("click", function () {
/*contains:判斷這個(gè)元素是否有這個(gè)樣式序芦，返回的結(jié)果是布爾值*/
let isContains = document.querySelectorAll("li")[3].classList.contains("red");
console.log(isContains);
});
}
</script>
H5自定義屬性
<!--定義-->
<!--規(guī)范：
1.data-開頭
2.data-后必須至少有一個(gè)字符臭杰，多個(gè)單詞使用-連接
建議：
1.名稱應(yīng)該都使用小寫--不要包含任何的大寫字符
2.名稱中不要有任何的特殊符號(hào)
3.名稱不要副作用純數(shù)字-->
<p data-class-name="itcast">H5C3學(xué)習(xí)</p>
<!--取值-->
<script>
window.onload=function(){
var p=document.querySelector("p");
/*獲取自定義屬性值*/
/*將data-后面的單詞使用camel命名法連接:必須使用camel合法法獲取值否則有可能無法獲取到值*/
var value=p.dataset["className"];
console.log(value);
}
</script>
H5監(jiān)測(cè)網(wǎng)絡(luò)狀態(tài)事件
監(jiān)測(cè)網(wǎng)絡(luò)狀態(tài)事件
C3選擇器
/*屬性選擇器：屬性是相對(duì)于標(biāo)簽而言。所謂屬性選擇器就是根據(jù)指定名稱的屬性的值來查找元素*/
/*1.E[attr]:查找指定的擁有attr屬性的E標(biāo)簽芝加。如查找擁有style屬性的li標(biāo)簽*/
li[style]{
text-decoration: underline;
}
/*2.E[attr=value]:查找擁有指定的Attr屬性并且屬性值為value的E標(biāo)簽硅卢。如想查找擁有class屬性并且值為Red的li標(biāo)簽 =是嚴(yán)格匹配*/
li[class=red]{
/*font-size: 30px;*/
}
/*3.E[attr*=value]:查找擁有指定的attr屬性并且屬性值中包含(可以在任意位置)value的E標(biāo)簽*/
li[class*=red]{
/*font-size: 30px;*/
}
/*4.E[attr^=value]:查找擁有指定的attr屬性并且屬性值以value開頭的E標(biāo)簽*/
li[class^=blue]{
font-size: 30px;
}
/*5.E[attr$=value]:查找擁有指定的attr屬性并且屬性值以value開結(jié)束的E標(biāo)簽*/
li[class$=blue]{
/*font-size: 30px;*/
}
.first{
color: red;
}
/*兄弟偽類：
+：獲取當(dāng)前元素的相鄰的滿足條件的元素
~：獲取當(dāng)前元素的滿足條件的兄弟元素*/
/*下面這句樣式說明查找 ：添加了.first樣式的標(biāo)簽的相鄰的li元素
1.相鄰
2.必須是指定類型的元素*/
.first + li{
color: blue;
}
/*下面樣式查找添加了.first樣式的元素的所有兄弟li元素
1.必須是指定類型的元素*/
.first ~ li{
color: pink;
}
/*相對(duì)于父元素的結(jié)構(gòu)偽類*/
/*E:first-child:查找E元素的父級(jí)元素中的第一個(gè)E元素。在查找的時(shí)候并不會(huì)限制查找的元素的類型*/
/*下面這句樣式查找：li的父元素中的第一個(gè)li元素
1.相對(duì)于當(dāng)前指定元素的父元素
2.查找的類型必須是指定的類型*/
li:first-child{
color: red;
}
/*E:last-child:查找E元素的父元素中最后一個(gè)指定類型的子元素*/
li:last-child{
background-color: skyblue;
}
/*查找的時(shí)候限制類型 first-of-type*/
/*1.也是相對(duì)于父元素
2.在查找的時(shí)候只會(huì)查找滿足類型條件的元素藏杖，過渡掉其它類型的元素*/
li:first-of-type{
color: red;
}
li:last-of-type{
color: orange;
}
/*指定索引位置 nth-child(從1開始的索引||關(guān)鍵字||表達(dá)式)*/
li:nth-child(5){
background-color: lightblue;
}
/*偶數(shù)個(gè)元素添加背景 even:偶數(shù) odd:奇數(shù)*/
li:nth-of-type(even){
background-color: orange;
}
li:nth-of-type(odd){
background-color: pink;
}
/*想為前面的5個(gè)元素添加樣式*/
/*n:默認(rèn)取值范圍為0~子元素的長度.但是當(dāng)n<=0時(shí)将塑，選取無效
0>>5
1>>4
...
4>>1
5>>0*/
li:nth-last-of-type(-n+5){
font-size: 30px;
}
li:nth-of-type(-n+5){
font-size: 30px;
}
/*空值:沒有任何的內(nèi)容，連空格都沒有*/
li:empty{
background-color: red;
}
/*E:target:可以為錨點(diǎn)目標(biāo)元素添加樣式蝌麸，當(dāng)目標(biāo)元素被觸發(fā)為當(dāng)前錨鏈接的目標(biāo)時(shí)点寥，調(diào)用此偽類樣式*/
h2:target{
color: red;
}
/*獲取第一個(gè)字符：實(shí)現(xiàn)首字下沉*/
p::first-letter{
color: red;
font-size: 30px;
float: left;/*文本環(huán)繞*/
}
/*獲取第一行內(nèi)容:如果設(shè)置了::first-letter,那么無法同時(shí)設(shè)置它的樣式*/
p::first-line{
text-decoration: underline;
}
/*設(shè)置當(dāng)前選中內(nèi)容的樣式*/
p::selection{
background-color: pink;
color: red;
/*它只能設(shè)置顯示的樣式，而不能設(shè)置內(nèi)容大小*/
/*font-size: 30px;*/
}
C3顏色使用
div{
width: 200px;
height: 200px;
border: 1px solid #ccc;
/*1.使用預(yù)設(shè)了值*/
/*background-color: red;*/
/*2.使用顏色拾取器*/
/*background-color: #c9ffa6;*/
/*rgb(紅来吩，綠敢辩，藍(lán))*/
/*background-color: rgb(255,150,0);*/
/*hsl(顏色(0~360)，飽和度(0%~100%)弟疆，明度(0%~100%))*/
/*明度默認(rèn)是50%,一般建議保留50的值*/
/*background-color: hsl(300,100%,50%);*/
/*h5中的顏色設(shè)置*/
/*rgba(紅色戚长，綠色，藍(lán)色同廉，透明度)
透明度：0代表完全透明 1代表完成不透明 不會(huì)影響子元素*/
/*background-color: rgba(255,0,255,0.2);*/
background-color: hsla(300,100%,50%,0.2);
}
C3 text-shadow效果案例(x,y,羽化/模糊,color)
text-shadow效果案例
C3盒模型 box-sizing
/*content-box:你設(shè)置的width屬性值僅僅是內(nèi)容的寬度隅津，盒子的最終的寬高值在width的基礎(chǔ)上再加上padding和border的寬度*/
box-sizing:content-box;/*默認(rèn)值*/
/*border-box:你設(shè)置的width屬性值就是盒子的最終的寬度蹲缠，包含了border和padding和內(nèi)容芭商。如果添加了padding和border,那么真正放置內(nèi)容的區(qū)域會(huì)減小--但是它可以穩(wěn)固頁面的結(jié)構(gòu)*/
box-sizing:border-box;
C3圓角 border-radius
/*添加邊框圓角*/
/*1.設(shè)置一個(gè)值：四個(gè)角的圓角值都一樣*/
/*border-radius: 10px;*/
/*2.設(shè)置兩個(gè)值:第一個(gè)值控制左上/右下搏存，第二個(gè)值控制右上/左下*/
/*border-radius: 10px 30px;*/
/*3.設(shè)置三個(gè)值：第一個(gè)值控制左上，第二值控制右上/左下，第三個(gè)值控制右下*/
/*border-radius: 10px 40px 60px;*/
/*4.設(shè)置四個(gè)值：左上 右上 右下 左下*/
/*border-radius: 10px 30px 60px 100px;*/
/*添加/是用來設(shè)置當(dāng)前個(gè)不同方向的半徑值 水平x方向/垂直y方向*/
/*border-radius: 100px/50px;*/
/*添加某個(gè)角點(diǎn)的圓角*/
/*border-radius: 0px 50px 0px 0px;*/
/*border-上下-左右-radius:*/
/*border-top-right-radius: 100px;
border-top-left-radius: 100px;*/
/*border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;*/
/*設(shè)置某個(gè)角點(diǎn)的兩個(gè)方向上的不同圓角*/
/*border-top-right-radius: 100px 50px;
border-bottom-left-radius: 80px 40px;
border-bottom-right-radius: 60px 30px;
border-top-left-radius: 40px 20px;*/
/*如果想設(shè)置四個(gè)角點(diǎn)的不同方向上的不同圓角值*/
/*分別是水平方向的：左上初家，右上乌助，右下溜在，左下 / 垂直方向的：左上，右上他托，右下掖肋，左下*/
border-radius: 100px 0px 0px 0px/20px 0px 0px 0px;
H5C3 android機(jī)器人案例??
<!DOCTYPE html>
<html lang="en">
<head>
<!--來自一個(gè)很想要很牛逼的程序員-->
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
background: #ccc;
}
main {
width: 500px;
height: 500px;
border: 1px solid red;
margin: 0 auto;
box-sizing: border-box;
}
header, footer, aside {
height: 125px;
width: 250px;
margin: 0 auto;
background-color: green;
position: relative;
}
header {
border-top-left-radius: 120px;
border-top-right-radius: 120px;
height: 115px;
margin-bottom: 10px;
}
header > span {
display: inline-block;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #fff;
position: absolute;
bottom: 40px;
}
header > span:first-of-type {
left: 60px;
}
header > span:last-of-type {
right: 60px;
}
aside {
height: 250px;
border-bottom-left-radius: 35px;
border-bottom-right-radius: 35px;
}
aside:before, aside:after {
content: "";
height: 175px;
width: 30px;
background-color: green;
border-radius: 10px;
position: absolute;
top: 25px;
}
aside:before {
left: -50px;
}
aside:after {
right: -50px;
}
footer {
background-color: #CCC;
height: 0;
}
footer:before, footer:after {
content: "";
width: 30px;
height: 90px;
background-color: green;
position: absolute;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
footer:before {
left: 60px;
}
footer:after {
right: 60px;
}
</style>
</head>
<body>
<main>
<header>
<div></div>
<span></span>
<span></span>
</header>
<aside></aside>
<footer></footer>
</main>
</body>
</html>
android機(jī)器人案例
C3 文本陰影與邊框陰影
<!--文本陰影：text-shadow:offsetX offsetY blur color-->
<!--邊框陰影：box-shadow:h v blur spread color inset
h:水平方向的偏移值
v:垂直方向的偏移值
blur:模糊--可選，默認(rèn)0
spread:陰影的尺寸赏参，擴(kuò)展和收縮陰影的大小--可選 默認(rèn)0
color:顏色--可選志笼，默認(rèn)黑色
inset:內(nèi)陰影--可選,默認(rèn)是外陰影-->
C3 漸變之線性漸變
/*linear-gradient(方向，開始顏色 位置把篓，顏色2 位置纫溃，顏色3 位置...);*/
/*方向：
to top:0deg
to right:90deg
to bottom:180deg --默認(rèn)值
to left:270deg*/
/*background: linear-gradient(to right,red,blue)*/;
background:linear-gradient(to right,red 0%,red 50%,blue 50%,blue 100%);
C3 漸變之徑向漸變
/*語法：radial-gradient(形狀 大小 坐標(biāo),顏色1，顏色2...)：
形狀shape:circle:產(chǎn)生正方形的漸變色 ellipse:適配當(dāng)前的形狀,如果是正方形的容器纸俭，兩者效果一樣.如果寬高不一樣皇耗，默認(rèn)效果切換到ellipse
at position:坐標(biāo)，默認(rèn)在正中心揍很±陕ィ可以賦值坐標(biāo)（參照元素的左上角），也可以賦值關(guān)鍵字(left center right top bottom)
大小size: closest-side：最近邊窒悔； farthest-side：最遠(yuǎn)邊呜袁； closest-corner：最近角； farthest-corner：最遠(yuǎn)角简珠。默認(rèn)是最遠(yuǎn)的角farthest-corner*/
/*background: radial-gradient(circle,red,blue);*/
/*background: radial-gradient(circle farthest-side at 50px 50px,red,blue);*/
/*background: radial-gradient(at left top,red,blue);*/
background:radial-gradient(red,red 50%,blue 50%,blue);
C3 背景樣式
/*1.添加背景顏色*/
background-color:red;
/*2.設(shè)置背景平鋪*/
/*round:會(huì)將圖片進(jìn)行縮放之后再平鋪
space:圖片不會(huì)縮放平鋪阶界，只是會(huì)在圖片之間產(chǎn)生相同的間距值*/
background-repeat:space;
/*3.設(shè)置在滾動(dòng)容器的背景的行為*/
/*fixed:背景圖片的位置固定不變
scroll:當(dāng)滾動(dòng)容器的時(shí)候虹钮，背景圖片也會(huì)跟隨滾動(dòng)*/
/*local和scroll的區(qū)別：前提是滾動(dòng)當(dāng)前容器的內(nèi)容
local:背景圖片會(huì)跟隨內(nèi)容一起滾動(dòng)
scroll:背景圖片不會(huì)跟隨內(nèi)容一起滾動(dòng)*/
background-attachment: scroll;
背景圖片縮放居中顯示
/*一定要設(shè)置寬度*/
width:100%;
/*設(shè)置背景圖片的大小*/
background-size:cover;
/*設(shè)置position*/
background-position:center;
結(jié)合精靈圖提示移動(dòng)端用戶響應(yīng)區(qū)域的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
/*提升移動(dòng)端響應(yīng)區(qū)域的大小*/
a {
width: 50px;
height: 50px;
display: block;
background-color: #ddd;
margin: 100px auto;
box-sizing: border-box;
background-image: url("../images/sprites.png");
/*設(shè)置背景偏移，參照background-origin原點(diǎn)膘融，這個(gè)原點(diǎn)默認(rèn)在容器的左上角*/
background-position: -20px 0;
/*添加padding*/
padding: 14px;
/*設(shè)置背景坐標(biāo)的原點(diǎn)
border-box:從border的位置開始填充背景芙粱，會(huì)與border重疊
padding-box:從padding的位置開始填充背景，會(huì)與padding重疊
content-box:從內(nèi)容的位置開始填充背景*/
background-origin: content-box;
/*設(shè)置內(nèi)容的裁切:設(shè)置的是裁切氧映，控制的是顯示
border-box:其實(shí)是顯示border及以內(nèi)的內(nèi)容
padding-box:其實(shí)是顯示padding及以內(nèi)的內(nèi)容
content-box:其實(shí)是顯示content及以內(nèi)的內(nèi)容*/
background-clip: content-box;
}
</style>
</head>
<body>
<a href=""></a>
</body>
</html>
提升移動(dòng)端響應(yīng)區(qū)域的大小
C3 邊框圖片案例 聊天對(duì)話框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 500px;
height: auto;
border: 10px solid red;
margin:100px auto;
/*添加邊框圖片*/
border-image-source: url("../images/btn_bg.png");
/*設(shè)置受保護(hù)的區(qū)域大小*/
border-image-slice: 10 fill;
/*設(shè)置邊框圖片的寬度
1.明確圓角的大小
2.明確受保護(hù)的區(qū)域的大小*/
border-image-width: 10px;
/*設(shè)置背景平鋪效果 默認(rèn)是stretch：拉伸*/
border-image-repeat: stretch;
}
</style>
</head>
<body>
<div>邊框圖片的本質(zhì)是背景春畔，并不會(huì)影響元素內(nèi)容的放置邊框圖片的本質(zhì)是背景，并不會(huì)影響元素內(nèi)容的放置邊框圖片的本質(zhì)是背景岛都，并不會(huì)影響元素內(nèi)容的放置邊框圖片的本質(zhì)是背景律姨，并不會(huì)影響元素內(nèi)容的放置邊框圖片的本質(zhì)是背景，并不會(huì)影響元素內(nèi)容的放置邊框圖片的本質(zhì)是背景臼疫，并不會(huì)影響元素內(nèi)容的放置邊框圖片的本質(zhì)是背景择份，并不會(huì)影響元素內(nèi)容的放置邊框圖片的本質(zhì)是背景，并不會(huì)影響元素內(nèi)容的放置邊框圖片的本質(zhì)是背景烫堤，并不會(huì)影響元素內(nèi)容的放置邊框圖片的本質(zhì)是背景荣赶，并不會(huì)影響元素內(nèi)容的放置</div>
</body>
</html>
聊天對(duì)話框
C3 過渡
添加過度效果后，過度效果執(zhí)行完畢之后默認(rèn)會(huì)還原到原始的狀態(tài)鸽斟。
/*1.transition-property:添加過渡效果的樣式屬性名稱*/
transition-property:left;
/*2.transition-duration:過渡效果的耗時(shí) 以秒做為單位*/
transition-duration:2s;
/*3.transition-timing-function:設(shè)置時(shí)間函數(shù)--控制運(yùn)動(dòng)的速度*/
transition-timing-function:linear;
/*4.transition-delay:過渡效果的延遲*/
transition-delay: 2s;
過渡簡寫
/*transition:屬性名稱 過渡時(shí)間 時(shí)間函數(shù) 延遲*/
transition:left 2s linear 0s;
為多個(gè)樣式同時(shí)添加過渡效果(用逗號(hào)連接)
transition:left 2s linear 0s,background-color 5s linear 0s;
為所有樣式添加過渡效果 all
1.所有樣式的過渡效果一樣
2.效率低下讯壶，它會(huì)去查詢所有添加的樣式
3.建議：以后不要這么寫
transition:all 1s;
指定過渡效果分n次完成 steps(n);
/*分四次完成*/
transition:background-color 2s steps(4);
C3 transform 二維
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 100px;
height: 100px;
background-color: red;
margin-left: 200px;
margin-top:10px;
/*添加過渡效果 css樣式名稱 耗時(shí)*/
transition: transform 2s;
}
/*移動(dòng)translate*/
div:first-of-type:active{
/*使用transform實(shí)現(xiàn)元素的移動(dòng) a.移動(dòng)是參照元素的左上角 b.執(zhí)行完畢之后會(huì)恢復(fù)到原始狀態(tài)
1.如果只有一個(gè)參數(shù)就代表x方向
2.如果有兩個(gè)參數(shù)就代表x/y方向*/
/*transform: translate(100px);*/
/*transform: translate(400px,500px);*/
/*transform: translate(0px,500px);*/
/*添加水平或者垂直方向的移動(dòng)*/
/*transform:translateX(300px);*/
transform:translateY(300px);
}
/*縮放：scale*/
div:nth-of-type(2):active{
/*實(shí)現(xiàn)縮放 1指不縮放，>1.01放大 <0.99縮小 參照元素的幾何中心
1.如果只有一個(gè)參數(shù)湾盗，就代表x和y方向都進(jìn)行相等比例的縮放
2.如果有兩個(gè)參數(shù)，就代表x/y方向*/
/*transform: scale(2);*/
/*transform: scale(2,1);*/
/*縮放指定的方向 */
/*transform:scaleX(0.5);*/
transform:scaleY(0.5);
}
/*旋轉(zhuǎn)：rotate*/
div:nth-of-type(3){
/*設(shè)置旋轉(zhuǎn)軸心
1.x y
2.關(guān)鍵字：left top right bottom center*/
background-color: purple;
transform-origin: left top;
}
div:nth-of-type(3):active{
/*transform:rotate(-90deg);
transform: translateX(700px);*/
/*同時(shí)添加多個(gè)transform屬性值*/
transform: translateX(700px) rotate(-90deg);
/*transform: rotate(-90deg) translateX(700px);*/
}
/*斜切：skew*/
div:nth-of-type(4):active{
background-color: blue;
/*如果角度為正立轧，則往當(dāng)前軸的負(fù)方向斜切格粪，如果角度為，則往當(dāng)前軸的正方向斜切*/
transform:skew(-30deg);
/*transform:skew(30deg,-30deg);*/
/*設(shè)置某個(gè)方向的斜切值*/
/*transform:skewX(30deg);*/
/*transform:skewY(30deg);*/
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>
C3無縫滾動(dòng)動(dòng)畫
<!DOCTYPE html>
<html lang="en">
<head>
<!--來自一個(gè)很想要很牛逼的程序員-->
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 882px;
height: 86px;
background-color: #000;
overflow: hidden;
margin: 100px auto;
}
ul {
width: 200%;
list-style-type: none;
animation-name: moveUl;
animation-duration: 7s;
animation-iteration-count: infinite;
animation-timing-function: linear;
cursor: pointer;
}
ul > li {
float: left;
transition: transform 1s, opacity 1s;
}
ul:hover {
animation-play-state: paused;
}
ul > li:hover {
/*transform: scale(1.1);*/
opacity: 0.5;
}
@keyframes moveUl {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(-882px);
}
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
<li><img src="images/6.jpg" alt=""></li>
<li><img src="images/7.jpg" alt=""></li>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
<li><img src="images/6.jpg" alt=""></li>
<li><img src="images/7.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
無縫滾動(dòng)動(dòng)畫
鐘表案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.clock{
width: 300px;
height: 300px;
border: 10px solid #ccc;
/*border-radius: 160px;*/
/*百分比參照元素的實(shí)際寬高*/
border-radius: 50%;
margin:100px auto;
position: relative;
}
.line{
width: 8px;
height: 300px;
background-color: #ccc;
position: absolute;
/*參照父容器的寬*/
left: 50%;
top:0;
/*參照元素本身*/
transform: translate(-50%,0);
}
.line1,.line4{
width: 10px;
}
.line2{
transform: translate(-50%,0) rotate(30deg);
}
.line3{
transform: translate(-50%,0) rotate(60deg);
}
.line4{
transform: translate(-50%,0) rotate(90deg);
}
.line5{
transform: translate(-50%,0) rotate(120deg);
}
.line6{
transform: translate(-50%,0) rotate(150deg);
}
.cover{
width: 250px;
height: 250px;
border-radius: 50%;
background-color: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.hour{
width: 6px;
height: 80px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-100%);
transform-origin: center bottom;
animation: clockAnimation 43200s linear infinite;
}
.minute{
width: 4px;
height: 90px;
background-color: green;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-100%);
transform-origin: center bottom;
animation: clockAnimation 3600s linear infinite;
}
.second{
width: 2px;
height: 100px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-100%);
/*設(shè)置旋轉(zhuǎn)軸心*/
transform-origin: center bottom;
/*添加動(dòng)畫*/
animation: clockAnimation 60s infinite steps(60);
/*steps(60)與animation-timing-function的其它屬性沖突*/
/*animation-timing-function: steps(60);*/
}
.center{
width: 20px;
height: 20px;
background-color: #ccc;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
/*創(chuàng)建動(dòng)畫*/
@keyframes clockAnimation {
from{
transform:translate(-50%,-100%) rotate(0deg);
}
to{
transform:translate(-50%,-100%) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="clock">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>
<div class="line line5"></div>
<div class="line line6"></div>
<div class="cover"></div>
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
<div class="center"></div>
</div>
</body>
</html>
鐘表案例
C3過渡手風(fēng)琴效果案例
<!DOCTYPE html>
<html lang="en">
<head>
<!--來自一個(gè)很想要很牛逼的程序員-->
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
.menu {
margin: 100px auto;
width: 200px;
cursor: pointer;
}
.menu h3 {
background-color: rebeccapurple;
text-align: center;
}
.menu > .item > .itemBox {
height: 0;
overflow: hidden;
transition: height 1s;
}
.menu > .item > .itemBox ul {
list-style-type: none;
background-color: darkcyan;
}
.menu > .item:hover > .itemBox {
height: 88px;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<h3>市內(nèi)新聞</h3>
<div class="itemBox">
<ul>
<li>深圳超市肉菜檔遭搶</li>
<li>深圳超市肉菜檔遭搶</li>
<li>深圳超市肉菜檔遭搶</li>
<li>深圳超市肉菜檔遭搶</li>
</ul>
</div>
</div>
<div class="item">
<h3>省內(nèi)新聞</h3>
<div class="itemBox">
<ul>
<li>深圳超市肉菜檔遭搶</li>
<li>深圳超市肉菜檔遭搶</li>
<li>深圳超市肉菜檔遭搶</li>
<li>深圳超市肉菜檔遭搶</li>
</ul>
</div>
</div>
<div class="item">
<h3>國內(nèi)新聞</h3>
<div class="itemBox">
<ul>
<li>深圳超市肉菜檔遭搶</li>
<li>深圳超市肉菜檔遭搶</li>
<li>深圳超市肉菜檔遭搶</li>
<li>深圳超市肉菜檔遭搶</li>
</ul>
</div>
</div>
<div class="item">
<h3>國際新聞</h3>
<div class="itemBox">
<ul>
<li>深圳超市肉菜檔遭搶</li>
<li>深圳超市肉菜檔遭搶</li>
<li>深圳超市肉菜檔遭搶</li>
<li>深圳超市肉菜檔遭搶</li>
</ul>
</div>
</div>
</div>
</body>
</html>
過渡手風(fēng)琴效果案例
C3 transform 三維
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 100px;
height: 100px;
background-color: red;
margin-left: 200px;
margin-top:10px;
/*添加過渡*/
transition: transform 2s;
}
/*添加三維移動(dòng)--3D移動(dòng)*/
div:first-of-type:active{
/*translate3d(X方向的偏移氛改，Y方向的偏移帐萎，Z方向的偏移)*/
/*transform: translate3d(400px,0,0);*/
/*transform: translate3d(400px,400px,0);*/
transform: translate3d(0px,0px,400px);
}
/*添加三維縮放*/
div:nth-of-type(2):active{
/*scale3d(x方向上的縮放，y方向的縮放胜卤，z方向的縮放)
>1.01 放大 <0.99 縮小*/
/*transform:scale3d(2,0.5,10);*/
transform:scale3d(1,1,10);
}
/*添加三維旋轉(zhuǎn)*/
div:nth-of-type(3):active{
/*rotate3d(x,y,z,angle):
x:代表x軸方向上的一個(gè)向量值
y:代表y軸方向上的一個(gè)向量值
z:代表z軸方向上的一個(gè)向量值*/
transform: rotate3d(1,1,1,330deg);
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>
C3立方體衍生個(gè)人主頁網(wǎng)站特效
<!DOCTYPE html>
<html lang="en">
<head>
<!--來自一個(gè)很想要很牛逼的程序員-->
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
#main {
background-color: #40584c;
transition: background-color 2s;
position: relative;
}
.box {
width: 200px;
height: 200px;
position: relative;
top: 50%;
left: 50%;
transform-style: preserve-3d;
transition: transform 2s ease-in-out, perspective 2s, opacity 2s;
transform: /* rotate3d(1, 1, 0, -30deg)*/ translate(-50%, -50%);
perspective: 50px;
}
.box > div {
position: absolute;
opacity: 0.6;
width: 200px;
height: 200px;
transition: background-color 2s, all 2s;
text-align: center;
line-height: 200px;
cursor: pointer;
border-radius: 4px;
}
.front {
/* background-color: red;*/
transform: translateZ(100px);
display: none;
}
.box > .back {
background-color: yellow;
border-radius: 20px;
transform: skew(-10deg, -10deg);
/*transform: translateZ(-100px) rotateY(180deg);*/
}
.left {
/*background-color: orange;*/
transform: translateX(-100px) rotateY(-90deg);
display: none;
}
.right {
/*background-color: blue;*/
transform: translateX(100px) rotateY(90deg);
display: none;
}
.top {
/*background-color: rebeccapurple;*/
transform: translateY(-100px) rotateX(90deg);
display: none;
}
.bottom {
/*background-color: seagreen;*/
transform: translateY(100px) rotateX(-90deg);
display: none;
}
.box:hover {
transform: rotate3d(1, 1, 0, -375deg);
perspective: 600px;
}
.box:hover > div {
opacity: 0.4;
top: -50%;
left: -50%;
font-size: 12px;
color: #fff;
}
.box:hover > .front, .box:hover > .top, .box:hover > .bottom, .box:hover > .left, .box:hover > .right {
display: block;
}
.box:hover > .back, .box:hover > .top, .box:hover > .bottom, .box:hover > .left, .box:hover > .right {
opacity: 0.2;
}
.box:hover > .front {
background-color: red;
}
.box:hover > .back {
border-radius: 0;
transform: translateZ(-100px) rotateY(180deg) skew(0, 0);
}
.box:hover > .top {
background-color: rebeccapurple;
}
.box:hover > .bottom {
background-color: seagreen;
}
.box:hover > .left {
background-color: orange;
}
.box:hover > .right {
background-color: blue;
}
.topZD, .bottomZD {
width: 100%;
height: 50%;
background-color: #fff;
position: absolute;
left: 0;
display: none;
z-index: 9999;
}
.topZD {
top: 0;
}
.bottomZD {
bottom: 0;
}
.test {
display: none;
font-size: 30px;
}
</style>
</head>
<body>
<main id="main">
<div class="topZD"></div>
<div class="box">
<div class="front"></div>
<div class="back">鼠標(biāo)移入開始我們的故事</div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="bottomZD"></div><!--頁面開啟動(dòng)畫結(jié)束-->
<div class="test">
<img src="images/bg.jpg" alt="">
</div>
</main>
<script src="jquery-2.2.4.js"></script>
<script>
window.onload = function () {
let $box = document.getElementsByClassName("box")[0];
$box.onmouseover = function () {
document.body.style.backgroundColor = "#008b8b";
};
$box.onmouseout = function () {
document.body.style.backgroundColor = "#40584c";
};
//獲取瀏覽器的高度
let llqHeight = window.innerHeight;
document.getElementById("main").style.height = llqHeight + "px";
};
$(".back").on("mouseenter", function () {
setTimeout(function () {
console.log(11)
$(".topZD").slideDown(1000).slideUp(1000);
$(".bottomZD").slideDown(1000).slideUp(1000);
$(".box").css("display", "none");
$(".test").fadeIn(1800);
$("#main").css("backgroundColor", "#fff");
}, 1300);
});
</script>
</body>
</html>
立方體衍生個(gè)人主頁網(wǎng)站特效
立方體衍生個(gè)人主頁網(wǎng)站特效
多列布局案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.wrapper {
width: 100%;
padding: 20px;
box-sizing: border-box;
/*設(shè)置多列布局*/
/*1.設(shè)置列數(shù)*/
column-count: 3;
/*2.添加列間隙樣式,與邊框樣式的添加一樣*/
column-rule: dashed 3px red;
/*3疆导。設(shè)置列間隙大小*/
column-gap: 50px;
/*4.設(shè)置列寬
原則：取大優(yōu)先
1.如果人為設(shè)置寬度更大，則取更大的值葛躏，但是會(huì)填充整個(gè)屏幕澈段，意味最終的寬度可能也會(huì)大于設(shè)置的寬度--填充滿整個(gè)屏幕
2.如果人為設(shè)置寬度更小，使用默認(rèn)計(jì)算的寬度*/
column-width: 200px;
}
h4{
/*設(shè)置跨列顯示 1 / all*/
column-span: all;
}
</style>
</head>
<body>
<div class="wrapper">
<h4>CSS3簡介</h4>
<p>
CSS即層疊樣式表（Cascading StyleSheet）舰攒。 在網(wǎng)頁制作時(shí)采用層疊樣式表技術(shù)败富，可以有效地對(duì)頁面的布局、字體摩窃、顏色兽叮、背景和其它效果實(shí)現(xiàn)更加精確的控制。 只要對(duì)相應(yīng)的代碼做一些簡單的修改，就可以改變同一頁面的不同部分鹦聪，或者頁數(shù)不同的網(wǎng)頁的外觀和格式账阻。CSS3是CSS技術(shù)的升級(jí)版本，CSS3語言開發(fā)是朝著模塊化發(fā)展的泽本。以前的規(guī)范作為一個(gè)模塊實(shí)在是太龐大而且比較復(fù)雜淘太，所以，把它分解為一些小的模塊观挎，更多新的模塊也被加入進(jìn)來琴儿。這些模塊包括： 盒子模型、列表模塊嘁捷、超鏈接方式 造成、語言模塊 、背景和邊框 雄嚣、文字特效 晒屎、多欄布局等。
</p>
<p>1缓升、
CSS3圓角表格
CSS3圓角表格
圓角表格鼓鲁，對(duì)應(yīng)屬性：border-radius。
2港谊、以往對(duì)網(wǎng)頁上的文字加特效只能用filter這個(gè)屬性骇吭，這次CSS3中專門制訂了一個(gè)加文字特效的屬性，而且不止加陰影這種效果歧寺。對(duì)應(yīng)屬性：font-effect燥狰。
3、豐富了對(duì)鏈接下劃線的樣式斜筐，以往的下劃線都是直線龙致，這次可不一樣了，有波浪線顷链、點(diǎn)線目代、虛線等等，更可對(duì)下劃線的顏色和位置進(jìn)行任意改變嗤练。（還有對(duì)應(yīng)頂線和中橫線的樣式榛了，效果與下劃線類似）對(duì)應(yīng)屬性：text-underline-style，text-underline-color潭苞，text-underline-mode忽冻，text-underline-position。
4此疹、在文字下點(diǎn)幾個(gè)點(diǎn)或打個(gè)圈以示重點(diǎn)僧诚，CSS3也開始加入了這項(xiàng)功能遮婶，這應(yīng)該在某些特定網(wǎng)頁上很有用。對(duì)應(yīng)屬性：font-emphasize-style和font-emphasize-position湖笨。
邊框
border-color:控制邊框顏色旗扑，并且有了更大的靈活性，可以產(chǎn)生漸變效果
</p>
<p>
變形(transform)慈省、轉(zhuǎn)換(transition)和動(dòng)畫(animation)
transform: rotate | scale | skew | translate |matrix;
旋轉(zhuǎn)rotate臀防、扭曲skew、縮放scale和移動(dòng)translate以及矩陣變形matrix边败。
transition主要包含四個(gè)屬性值：執(zhí)行變換的屬性：transition-property,變換延續(xù)的時(shí)間：transition-duration,在延續(xù)時(shí)間段袱衷，變換的速率變化transition-timing-function,變換延遲時(shí)間transition-delay。下面分別來看這四個(gè)屬性值
在開始介紹Animation之前我們有必要先來了解一個(gè)特殊的東西笑窜，那就是"Keyframes",我們把他叫做“關(guān)鍵幀”致燥，玩過flash的朋友可能對(duì)這個(gè)東西并不會(huì)陌生双泪。下面我們就一起來看看這個(gè)“Keyframes”是什么東西族淮。前面我們?cè)谑褂胻ransition制作一個(gè)簡單的transition效果時(shí)，我們包括了初始屬性和最終屬性祭示，一個(gè)開始執(zhí)行動(dòng)作時(shí)間和一個(gè)延續(xù)動(dòng)作時(shí)間以及動(dòng)作的變換速率断傲，其實(shí)這些值都是一個(gè)中間值脱吱，如果我們要控制的更細(xì)一些，比如說我要第一個(gè)時(shí)間段執(zhí)行什么動(dòng)作认罩，第二個(gè)時(shí)間段執(zhí)行什么動(dòng)作（換到flash中說箱蝠，就是第一幀我要執(zhí)行什么動(dòng)作，第二幀我要執(zhí)行什么動(dòng)作）垦垂，這樣我們用Transition就很難實(shí)現(xiàn)了抡锈，此時(shí)我們也需要這樣的一個(gè)“關(guān)鍵幀”來控制。那么CSS3的Animation就是由“keyframes”這個(gè)屬性來實(shí)現(xiàn)這樣的效果乔外。下面我們一起先來看看Keyframes:
Keyframes具有其自己的語法規(guī)則，他的命名是由"@keyframes"開頭一罩，后面緊接著是這個(gè)“動(dòng)畫的名稱”加上一對(duì)花括號(hào)“{}”杨幼，括號(hào)中就是一些不同時(shí)間段樣式規(guī)則，有點(diǎn)像我們css的樣式寫法一樣聂渊。對(duì)于一個(gè)"@keyframes"中的樣式規(guī)則是由多個(gè)百分比構(gòu)成的差购，如“0%”到"100%"之間，我們可以在這個(gè)規(guī)則中創(chuàng)建多個(gè)百分比汉嗽，我們分別給每一個(gè)百分比中給需要有動(dòng)畫效果的元素加上不同的屬性欲逃，從而讓元素達(dá)到一種在不斷變化的效果，比如說移動(dòng)饼暑，改變?cè)仡伾任觯恢孟醋觯笮。螤畹日镁樱贿^有一點(diǎn)需要注意的是诚纸，我們可以使用“fromt”“to”來代表一個(gè)動(dòng)畫是從哪開始，到哪結(jié)束陈惰，也就是說這個(gè) "from"就相當(dāng)于"0%"而"to"相當(dāng)于"100%",值得一說的是畦徘，其中"0%"不能像別的屬性取值一樣把百分比符號(hào)省略，我們?cè)谶@里必須加上百分符號(hào)（“%”）如果沒有加上的話抬闯，我們這個(gè)keyframes是無效的井辆，不起任何作用。因?yàn)閗eyframes的單位只接受百分比值溶握。[2]
</p>
</div>
</body>
</html>
多列布局案例
C3 彈性盒模型
/*設(shè)置父容器為伸縮盒子：會(huì)使每一個(gè)子元素自動(dòng)變成伸縮項(xiàng)*/
display:flex;
/*設(shè)置子元素的排列方式
flex-start:讓子元素從父容器的起始位置開始排列
flex-end:讓子元素從父容器的結(jié)束位置開始排列
center:讓子元素從父容器的中間位置開始排列
space-between:左右對(duì)齊父容器的開始和結(jié)束杯缺，中間平均分頁，產(chǎn)生相同的間距
space-around:將多余的空間平均的分頁在每一個(gè)子元素的兩邊 margin:0 auto.造成中間盒子的間距是左右兩邊盒子間距的兩倍*/
justify-content:space-around;
/*flex-flow:是flex-wrap和flex-direction的綜合
flex-wrap:控制子元素是否換行顯示奈虾，默認(rèn)不換行
nowrap:不換行--則收縮
wrap:換行
wrap-reverse:翻轉(zhuǎn)夺谁，原來是從上到下，翻轉(zhuǎn)后就是從下到上來排列*/
/*flex-wrap: wrap;*/
/*flex-direction：設(shè)置子元素的排列方向：就是用來主軸方向肉微，默認(rèn)主軸方向是row(水平方向)
row:水平排列方向匾鸥，從左到右
row-reverse:水平排列方向，從右到左
column:垂直排列方向碉纳，從上到下
column-reverse：垂直排列方向勿负，從下到上*/
/*flex-direction: column-reverse;*/
flex-flow:row wrap;
設(shè)置在子元素上 空間比例值
/*flow-grow:可以來擴(kuò)展子元素的寬度：設(shè)置當(dāng)前元素應(yīng)該占據(jù)剩余空間的比例值
比例值計(jì)算 ：當(dāng)前空間的flex-grow/所有兄弟元素的flex-grow的和
flex-grow的默認(rèn)是0:說明子元素并不會(huì)去占據(jù)剩余的空間*/
flex-grow:1;
flex菜單伸縮案例
<!DOCTYPE html>
<html lang="en">
<head>
<!--來自一個(gè)很想要很牛逼的程序員-->
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 600px;
height: 500px;
border: 1px solid #ccc;
box-sizing: border-box;
margin: 100px auto;
}
ul {
list-style-type: none;
background-color: darkcyan;
display: flex;
width: 100%;
height: 36px;
}
.box > ul > li {
line-height: 36px;
text-align: center;
border: 1px solid #2f2a2b;
flex: 1;
transition: flex 1s linear;
}
.box > ul > li:hover{
flex: 1.5;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>這是第一個(gè)</li>
<li>這是第二個(gè)</li>
<li>這是第三個(gè)</li>
<li>這是第四個(gè)</li>
</ul>
</div>
</body>
</html>
flex菜單伸縮案例
寬高自動(dòng)適應(yīng)案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.layout{
width: 500px;
height: 600px;
background-color: #CCCCCC;
margin:10px auto;
/*設(shè)置父容器為伸縮盒子*/
display: flex;
/*默認(rèn)的主軸是row,這里需要以列的方式進(jìn)行排列*/
flex-direction: column;
}
header{
width: 100%;
height: 60px;
background-color: red;
}
main{
width: 100%;
background-color: green;
/*讓當(dāng)前伸縮項(xiàng)占據(jù)父容器的剩余空間*/
flex: 1;
/*讓main成為伸縮盒子*/
display: flex;
}
main > article{
height: 100%;
flex: 1;
background-color: pink;
}
main > aside{
height: 100%;
flex: 3;
background-color: darkblue;
}
footer{
width: 100%;
height: 80px;
background-color: purple;
}
</style>
</head>
<body>
<div class="layout">
<header></header>
<main>
<article></article>
<aside></aside>
</main>
<footer></footer>
</div>
</body>
</html>
寬高自動(dòng)適應(yīng)案例
