什么是html5？
一些學(xué)習(xí)時候自己總結(jié)的部分特效和上課的部分筆記存在GitHub里面～GitHub鏈接??
- h5并不是新的語言，而是html語言第五次重大修改的版本
- 支持:所有的主流瀏覽器都支持h5(有選擇性的支持 [后面會講解如何支持其他瀏覽器])
- 改變了用戶與文檔的交互方式: 多媒體:video視頻 audio音頻 canvas畫板
- 增加了新特性:1.標(biāo)簽語義化。2.本地存儲性。3.網(wǎng)頁多媒體。4.二維與三維。5.特效(動畫/過度)
- 相對h4：h5拋棄了一些不合理的不常用的標(biāo)簽和屬性，也新增了一些標(biāo)簽和屬性(表單屬性 input)，從代碼角度而言，h5的網(wǎng)頁代碼結(jié)構(gòu)更加簡潔
如何兼容h5C3？(使用第三種方法即可)
- 將不支持的標(biāo)簽改為塊級元素
- 手動創(chuàng)建標(biāo)簽(注意默認(rèn)創(chuàng)建的標(biāo)簽是行級元素，需要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:提供了完整的郵箱驗證<要求必須包含@符號，同時必須包含服務(wù)器名稱，如果不能滿足驗證，則會阻止當(dāng)前數(shù)據(jù)的提交！>-->
<label for="email">郵箱</label><input type="email" id="email"><br>
<!--tel:用來在移動端打開數(shù)字鍵盤，限制用戶輸入的內(nèi)容只能為數(shù)字-->
<label for="phone">電話</label><input type="tel" id="phone"><br>
<!--url:驗證合法的網(wǎng)站，必須包含<http://>-->
<label for="url">網(wǎng)站</label><input type="url" id="url"><br>
<!--number:用戶輸入的只能為數(shù)字，包含小數(shù)點，不能輸入除數(shù)字以外的其他字符
max:最大值
min:最小值
-->
<label for="number">數(shù)量</label><input type="number" max="100" min="1" id="number"><br>
<!--search:可以提供更人性化的輸入體驗，輸入后右上角會出現(xiàn)叉叉可一次刪除輸入的內(nèi)容-->
<label for="search">請輸入商品名稱</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>
時間<input type="time"><br>
日前<input type="date"><br>
日前時間<input type="datetime-local"><br>
月份<input type="month"><br>
星期<input type="week"><br>
</form>
H5表單input中新增的常用其他屬性總結(jié)
<form id="myForm">
<!--placeholder:提示文本，提示占位符-->
<!--autofocus:頁面刷新后自動獲取焦點-->
<!--autocomplete:歷史記錄自動提示 屬性值:off<關(guān)閉> on<打開>
1.設(shè)置該屬性的元素必須要有name屬性
2.必須要submit提交后才會有歷史記錄提示
-->
用戶名<input type="text" name="userName" placeholder="請輸入用戶名" autofocus autocomplete="on"><br>
<!--required:必須填寫-->
<!--pattern:正則表達(dá)式-->
電話<input type="tel" required pattern="^1[3|4|5|7|8][0-9]{9}$"><br>
!--multiple：可以選擇多個文件或者填寫多個郵箱(郵箱之間用[,逗號]分開即可)-->
文件：<input type="file" multiple><br>
<input type="submit">
</form>
<!--form：屬性值form表單的id 數(shù)據(jù)提交時可將不在form標(biāo)簽中的input標(biāo)簽一起submit-->
測試：<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)容就會觸發(fā)這個事件>
* oninput事件和onkeyup事件的區(qū)別
* 1.oninput事件是只要改變了內(nèi)容就會觸發(fā)事件 ， onkeyup事件是鍵盤彈起的時候觸發(fā)
* 2.用鼠標(biāo)復(fù)制粘貼oninput事件會觸發(fā) onkeyup事件不會觸發(fā)
* */
phone.oninput = function () {
console.log(this.value);
};
phone.oninvalid = function (event) {
event = event || window.event;//event兼容寫法
/*設(shè)置提示氣泡中的文字*/
this.setCustomValidity("請輸入11位手機(jī)號");
/*阻止默認(rèn)提示氣泡*/
event.preventDefault();
};
</script>
表單總結(jié)小案例??
<!DOCTYPE html>
<html lang="en">
<head>
<!--來自一個很想要很牛逼的程序員-->
<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"));
/**
* 驗證錯誤動畫效果
* @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驗證事件
* @param ele 點擊的input
* @param error 對應(yīng)的錯誤區(qū)域
* @param fn 多次調(diào)用input驗證事件
*/
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="請輸入用戶名" name="userName" id="userName" autofocus>
<label for="phone">手機(jī)號碼：</label>
<input type="tel" name="phone" id="phone" pattern="^1[3|4|5|7|8][0-9]{9}$">
<aside class="telAside">請輸入正確的11位手機(jī)號</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">請輸入正確的郵箱</aside>
<label for="college">所屬學(xué)院：</label>
<input type="text" id="college" list="clgList" placeholder="請選擇學(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:自動播放
loop:循環(huán)播放-->
<!--<audio src="../mp3/aa.mp3" controls></audio>-->
<!--video：視頻-->
<!--
src:播放文件的路徑
controls:音頻播放器的控制器面板
autoplay:自動播放
loop:循環(huán)播放
poster:指定視頻還沒有完全下載完畢，或者用戶沒有點擊播放前顯示的封面。 默認(rèn)顯示當(dāng)前視頻文件的第一副圖像
width:視頻的寬度
height:視頻的高度
-->
<!--注意事項：視頻始終會保持原始的寬高比。意味著如果你同時設(shè)置寬高，并不是真正的將視頻的畫面大小設(shè)置為指定的大小，而只是將視頻的占據(jù)區(qū)域設(shè)置為指定大小，除非你設(shè)置的寬高剛好就是原始的寬高比例。所以建議：在設(shè)置視頻寬高的時候，一般只會設(shè)置寬度或者高度，讓視頻文件自動縮放-->
<!--<video src="../mp3/mp4.mp4" poster="../images/l1.jpg" controls height="600"></video>-->
<!--source:因為不同的瀏覽器所支持的視頻格式不一樣，為了保證用戶能夠看到視頻，我們可以提供多個視頻文件讓瀏覽器自動選擇-->
<!--<video src="../mp3/flv.flv" controls></video>-->
<video controls>
<!--視頻源，可以有多個源-->
<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="給第一個li添加red樣式和underList樣式" id="add">
<input type="button" value="給第二個li移除green樣式" id="remove">
<input type="button" value="給第三個li切換yellow樣式" id="toggle">
<input type="button" value="判斷第四個li是否包含某個樣式" id="contains">
<script>
window.onload = function () {
document.querySelector("#add").addEventListener("click", function () {
/*add:為元素添加指定的樣式，一次只能添加一個樣式*/
/*querySelector("li"):querySelector獲取的是單個標(biāo)簽如有多個獲取的是第一個符合條件的標(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獲取的是個數(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:判斷這個元素是否有這個樣式，返回的結(jié)果是布爾值*/
let isContains = document.querySelectorAll("li")[3].classList.contains("red");
console.log(isContains);
});
}
</script>
H5自定義屬性
<!--定義-->
<!--規(guī)范：
1.data-開頭
2.data-后必須至少有一個字符，多個單詞使用-連接
建議：
1.名稱應(yīng)該都使用小寫--不要包含任何的大寫字符
2.名稱中不要有任何的特殊符號
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)測網(wǎng)絡(luò)狀態(tài)事件
監(jiān)測網(wǎng)絡(luò)狀態(tài)事件
C3選擇器
/*屬性選擇器：屬性是相對于標(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;
}
/*相對于父元素的結(jié)構(gòu)偽類*/
/*E:first-child:查找E元素的父級元素中的第一個E元素。在查找的時候并不會限制查找的元素的類型*/
/*下面這句樣式查找：li的父元素中的第一個li元素
1.相對于當(dāng)前指定元素的父元素
2.查找的類型必須是指定的類型*/
li:first-child{
color: red;
}
/*E:last-child:查找E元素的父元素中最后一個指定類型的子元素*/
li:last-child{
background-color: skyblue;
}
/*查找的時候限制類型 first-of-type*/
/*1.也是相對于父元素
2.在查找的時候只會查找滿足類型條件的元素，過渡掉其它類型的元素*/
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ù)個元素添加背景 even:偶數(shù) odd:奇數(shù)*/
li:nth-of-type(even){
background-color: orange;
}
li:nth-of-type(odd){
background-color: pink;
}
/*想為前面的5個元素添加樣式*/
/*n:默認(rèn)取值范圍為0~子元素的長度.但是當(dāng)n<=0時，選取無效
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:可以為錨點目標(biāo)元素添加樣式，當(dāng)目標(biāo)元素被觸發(fā)為當(dāng)前錨鏈接的目標(biāo)時，調(diào)用此偽類樣式*/
h2:target{
color: red;
}
/*獲取第一個字符：實現(xiàn)首字下沉*/
p::first-letter{
color: red;
font-size: 30px;
float: left;/*文本環(huán)繞*/
}
/*獲取第一行內(nèi)容:如果設(shè)置了::first-letter,那么無法同時設(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代表完成不透明 不會影響子元素*/
/*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ū)域會減小--但是它可以穩(wěn)固頁面的結(jié)構(gòu)*/
box-sizing:border-box;
C3圓角 border-radius
/*添加邊框圓角*/
/*1.設(shè)置一個值：四個角的圓角值都一樣*/
/*border-radius: 10px;*/
/*2.設(shè)置兩個值:第一個值控制左上/右下，第二個值控制右上/左下*/
/*border-radius: 10px 30px;*/
/*3.設(shè)置三個值：第一個值控制左上，第二值控制右上/左下，第三個值控制右下*/
/*border-radius: 10px 40px 60px;*/
/*4.設(shè)置四個值：左上 右上 右下 左下*/
/*border-radius: 10px 30px 60px 100px;*/
/*添加/是用來設(shè)置當(dāng)前個不同方向的半徑值 水平x方向/垂直y方向*/
/*border-radius: 100px/50px;*/
/*添加某個角點的圓角*/
/*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è)置某個角點的兩個方向上的不同圓角*/
/*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è)置四個角點的不同方向上的不同圓角值*/
/*分別是水平方向的：左上，右上，右下，左下 / 垂直方向的：左上，右上，右下，左下*/
border-radius: 100px 0px 0px 0px/20px 0px 0px 0px;
H5C3 android機(jī)器人案例??
<!DOCTYPE html>
<html lang="en">
<head>
<!--來自一個很想要很牛逼的程序員-->
<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)在正中心?？梢再x值坐標(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:會將圖片進(jìn)行縮放之后再平鋪
space:圖片不會縮放平鋪，只是會在圖片之間產(chǎn)生相同的間距值*/
background-repeat:space;
/*3.設(shè)置在滾動容器的背景的行為*/
/*fixed:背景圖片的位置固定不變
scroll:當(dāng)滾動容器的時候，背景圖片也會跟隨滾動*/
/*local和scroll的區(qū)別：前提是滾動當(dāng)前容器的內(nèi)容
local:背景圖片會跟隨內(nèi)容一起滾動
scroll:背景圖片不會跟隨內(nèi)容一起滾動*/
background-attachment: scroll;
背景圖片縮放居中顯示
/*一定要設(shè)置寬度*/
width:100%;
/*設(shè)置背景圖片的大小*/
background-size:cover;
/*設(shè)置position*/
background-position:center;
結(jié)合精靈圖提示移動端用戶響應(yīng)區(qū)域的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
/*提升移動端響應(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原點，這個原點默認(rèn)在容器的左上角*/
background-position: -20px 0;
/*添加padding*/
padding: 14px;
/*設(shè)置背景坐標(biāo)的原點
border-box:從border的位置開始填充背景，會與border重疊
padding-box:從padding的位置開始填充背景，會與padding重疊
content-box:從內(nèi)容的位置開始填充背景*/
background-origin: content-box;
/*設(shè)置內(nèi)容的裁切:設(shè)置的是裁切，控制的是顯示
border-box:其實是顯示border及以內(nèi)的內(nèi)容
padding-box:其實是顯示padding及以內(nèi)的內(nèi)容
content-box:其實是顯示content及以內(nèi)的內(nèi)容*/
background-clip: content-box;
}
</style>
</head>
<body>
<a href=""></a>
</body>
</html>
提升移動端響應(yīng)區(qū)域的大小
C3 邊框圖片案例 聊天對話框
<!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ì)是背景，并不會影響元素內(nèi)容的放置邊框圖片的本質(zhì)是背景，并不會影響元素內(nèi)容的放置邊框圖片的本質(zhì)是背景，并不會影響元素內(nèi)容的放置邊框圖片的本質(zhì)是背景，并不會影響元素內(nèi)容的放置邊框圖片的本質(zhì)是背景，并不會影響元素內(nèi)容的放置邊框圖片的本質(zhì)是背景，并不會影響元素內(nèi)容的放置邊框圖片的本質(zhì)是背景，并不會影響元素內(nèi)容的放置邊框圖片的本質(zhì)是背景，并不會影響元素內(nèi)容的放置邊框圖片的本質(zhì)是背景，并不會影響元素內(nèi)容的放置邊框圖片的本質(zhì)是背景，并不會影響元素內(nèi)容的放置</div>
</body>
</html>
聊天對話框
C3 過渡
添加過度效果后，過度效果執(zhí)行完畢之后默認(rèn)會還原到原始的狀態(tài)。
/*1.transition-property:添加過渡效果的樣式屬性名稱*/
transition-property:left;
/*2.transition-duration:過渡效果的耗時 以秒做為單位*/
transition-duration:2s;
/*3.transition-timing-function:設(shè)置時間函數(shù)--控制運動的速度*/
transition-timing-function:linear;
/*4.transition-delay:過渡效果的延遲*/
transition-delay: 2s;
過渡簡寫
/*transition:屬性名稱 過渡時間 時間函數(shù) 延遲*/
transition:left 2s linear 0s;
為多個樣式同時添加過渡效果(用逗號連接)
transition:left 2s linear 0s,background-color 5s linear 0s;
為所有樣式添加過渡效果 all
1.所有樣式的過渡效果一樣
2.效率低下，它會去查詢所有添加的樣式
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樣式名稱 耗時*/
transition: transform 2s;
}
/*移動translate*/
div:first-of-type:active{
/*使用transform實現(xiàn)元素的移動 a.移動是參照元素的左上角 b.執(zhí)行完畢之后會恢復(fù)到原始狀態(tài)
1.如果只有一個參數(shù)就代表x方向
2.如果有兩個參數(shù)就代表x/y方向*/
/*transform: translate(100px);*/
/*transform: translate(400px,500px);*/
/*transform: translate(0px,500px);*/
/*添加水平或者垂直方向的移動*/
/*transform:translateX(300px);*/
transform:translateY(300px);
}
/*縮放：scale*/
div:nth-of-type(2):active{
/*實現(xiàn)縮放 1指不縮放，>1.01放大 <0.99縮小 參照元素的幾何中心
1.如果只有一個參數(shù)，就代表x和y方向都進(jìn)行相等比例的縮放
2.如果有兩個參數(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);*/
/*同時添加多個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è)置某個方向的斜切值*/
/*transform:skewX(30deg);*/
/*transform:skewY(30deg);*/
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>
C3無縫滾動動畫
<!DOCTYPE html>
<html lang="en">
<head>
<!--來自一個很想要很牛逼的程序員-->
<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>
無縫滾動動畫
鐘表案例
<!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;*/
/*百分比參照元素的實際寬高*/
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;
/*添加動畫*/
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)建動畫*/
@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>
<!--來自一個很想要很牛逼的程序員-->
<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;
}
/*添加三維移動--3D移動*/
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軸方向上的一個向量值
y:代表y軸方向上的一個向量值
z:代表z軸方向上的一個向量值*/
transform: rotate3d(1,1,1,330deg);
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>
C3立方體衍生個人主頁網(wǎng)站特效
<!DOCTYPE html>
<html lang="en">
<head>
<!--來自一個很想要很牛逼的程序員-->
<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><!--頁面開啟動畫結(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>
立方體衍生個人主頁網(wǎng)站特效
立方體衍生個人主頁網(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è)置寬度更大，則取更大的值，但是會填充整個屏幕，意味最終的寬度可能也會大于設(shè)置的寬度--填充滿整個屏幕
2.如果人為設(shè)置寬度更小，使用默認(rèn)計算的寬度*/
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ù)，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現(xiàn)更加精確的控制。 只要對相應(yīng)的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數(shù)不同的網(wǎng)頁的外觀和格式。CSS3是CSS技術(shù)的升級版本，CSS3語言開發(fā)是朝著模塊化發(fā)展的。以前的規(guī)范作為一個模塊實在是太龐大而且比較復(fù)雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進(jìn)來。這些模塊包括： 盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字特效 、多欄布局等。
</p>
<p>1、
CSS3圓角表格
CSS3圓角表格
圓角表格，對應(yīng)屬性：border-radius。
2、以往對網(wǎng)頁上的文字加特效只能用filter這個屬性，這次CSS3中專門制訂了一個加文字特效的屬性，而且不止加陰影這種效果。對應(yīng)屬性：font-effect。
3、豐富了對鏈接下劃線的樣式，以往的下劃線都是直線，這次可不一樣了，有波浪線、點線、虛線等等，更可對下劃線的顏色和位置進(jìn)行任意改變。（還有對應(yīng)頂線和中橫線的樣式，效果與下劃線類似）對應(yīng)屬性：text-underline-style，text-underline-color，text-underline-mode，text-underline-position。
4、在文字下點幾個點或打個圈以示重點，CSS3也開始加入了這項功能，這應(yīng)該在某些特定網(wǎng)頁上很有用。對應(yīng)屬性：font-emphasize-style和font-emphasize-position。
邊框
border-color:控制邊框顏色，并且有了更大的靈活性，可以產(chǎn)生漸變效果
</p>
<p>
變形(transform)、轉(zhuǎn)換(transition)和動畫(animation)
transform: rotate | scale | skew | translate |matrix;
旋轉(zhuǎn)rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。
transition主要包含四個屬性值：執(zhí)行變換的屬性：transition-property,變換延續(xù)的時間：transition-duration,在延續(xù)時間段，變換的速率變化transition-timing-function,變換延遲時間transition-delay。下面分別來看這四個屬性值
在開始介紹Animation之前我們有必要先來了解一個特殊的東西，那就是"Keyframes",我們把他叫做“關(guān)鍵幀”，玩過flash的朋友可能對這個東西并不會陌生。下面我們就一起來看看這個“Keyframes”是什么東西。前面我們在使用transition制作一個簡單的transition效果時，我們包括了初始屬性和最終屬性，一個開始執(zhí)行動作時間和一個延續(xù)動作時間以及動作的變換速率，其實這些值都是一個中間值，如果我們要控制的更細(xì)一些，比如說我要第一個時間段執(zhí)行什么動作，第二個時間段執(zhí)行什么動作（換到flash中說，就是第一幀我要執(zhí)行什么動作，第二幀我要執(zhí)行什么動作），這樣我們用Transition就很難實現(xiàn)了，此時我們也需要這樣的一個“關(guān)鍵幀”來控制。那么CSS3的Animation就是由“keyframes”這個屬性來實現(xiàn)這樣的效果。下面我們一起先來看看Keyframes:
Keyframes具有其自己的語法規(guī)則，他的命名是由"@keyframes"開頭，后面緊接著是這個“動畫的名稱”加上一對花括號“{}”，括號中就是一些不同時間段樣式規(guī)則，有點像我們css的樣式寫法一樣。對于一個"@keyframes"中的樣式規(guī)則是由多個百分比構(gòu)成的，如“0%”到"100%"之間，我們可以在這個規(guī)則中創(chuàng)建多個百分比，我們分別給每一個百分比中給需要有動畫效果的元素加上不同的屬性，從而讓元素達(dá)到一種在不斷變化的效果，比如說移動，改變元素顏色，位置，大小，形狀等，不過有一點需要注意的是，我們可以使用“fromt”“to”來代表一個動畫是從哪開始，到哪結(jié)束，也就是說這個 "from"就相當(dāng)于"0%"而"to"相當(dāng)于"100%",值得一說的是，其中"0%"不能像別的屬性取值一樣把百分比符號省略，我們在這里必須加上百分符號（“%”）如果沒有加上的話，我們這個keyframes是無效的，不起任何作用。因為keyframes的單位只接受百分比值。[2]
</p>
</div>
</body>
</html>
多列布局案例
C3 彈性盒模型
/*設(shè)置父容器為伸縮盒子：會使每一個子元素自動變成伸縮項*/
display:flex;
/*設(shè)置子元素的排列方式
flex-start:讓子元素從父容器的起始位置開始排列
flex-end:讓子元素從父容器的結(jié)束位置開始排列
center:讓子元素從父容器的中間位置開始排列
space-between:左右對齊父容器的開始和結(jié)束，中間平均分頁，產(chǎn)生相同的間距
space-around:將多余的空間平均的分頁在每一個子元素的兩邊 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ù)剩余空間的比例值
比例值計算 ：當(dāng)前空間的flex-grow/所有兄弟元素的flex-grow的和
flex-grow的默認(rèn)是0:說明子元素并不會去占據(jù)剩余的空間*/
flex-grow:1;
flex菜單伸縮案例
<!DOCTYPE html>
<html lang="en">
<head>
<!--來自一個很想要很牛逼的程序員-->
<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>這是第一個</li>
<li>這是第二個</li>
<li>這是第三個</li>
<li>這是第四個</li>
</ul>
</div>
</body>
</html>
flex菜單伸縮案例
寬高自動適應(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)前伸縮項占據(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>
寬高自動適應(yīng)案例
