課程前言：
慕課網(wǎng) -- CSS3實現(xiàn)網(wǎng)頁平滑過渡
header里的meta：
IE低版本不支持CSS3的新增屬性哦~所以，meta設置好，就告訴瀏覽器使用最新的渲染模式~
頁面框架：
頁面中使用radio來記錄，只能有一個tab被選中，而且通過它的checked屬性，來判斷是否該radio是否選中。CSS3中，有:checked 來匹配某一項是否選中。
/*font-smoothing是CSS3的新增屬性，用戶設置字體的抗鋸齒或者光滑度的屬性。反鋸齒。*/? -webkit-font-smoothing:antialiased;??
overflow: hidden;超過隱藏，設置在body中。
清除浮動那么多，這個已經(jīng)夠用了：
元素隱藏有四種，那你要用哪一種？
再說選擇器：
動畫對象的選擇,選擇器的中+,~后應該跟的是并列的兄弟標簽,否則無法找到.
/*后代選擇器（Ｅ Ｆ），不論Ｆ在Ｅ中有多少層關系*/
/*子元素選擇器(E>F) E>F所表示的是選擇了Ｅ元素下的所有子元素Ｆ*/
/*相鄰兄弟元素選擇器(E + F)，EF兩元素具有一個相同的父元素，而且Ｆ元素在Ｅ元素后面*/
/*通用兄弟選擇器（Ｅ ? Ｆ） ，相鄰兄弟選擇器僅選擇是元素的僅與其相鄰的后面元素（選中的僅一個元素）；而通用兄弟元素選擇器，選中的是元素相鄰的后面兄弟元素，*/
/*群組選擇器（selector1,selector2,...,selectorN），將具有相同樣式的元素分組在一起，每個選擇器之間使用逗號“，”隔開，*/
結構要語義化呢：
當全屏移動的時候，一定內(nèi)容、容器的寬高與body的寬高一致，而且是相對位移，當我們把 body 里的overflow：hidden 隱藏的時候，就可以看到右側(cè)的滾動條了。但我們實際中，是隱藏了滾動條的。
scroll里定義left和top是給后續(xù)的滾動提供位置參考。開啟3D會加速哦~CSS3中的動畫三屬性之一，transform是說變形，比如，可見容器的下移。translateY 的定義與 margin 不同哦，margin是負值時，容器向上移動；但 translateY 的值為負值時，向下移動，想一下坐標系咯~
CSS3動畫屬性之二是，transition轉(zhuǎn)換，它常與變形結合使用，一個給出起始位置，一個給出轉(zhuǎn)換動畫，比如，其中的那些屬性有動畫，時間多少，效果是淡入淡出么？
CSS的content：
content 屬性與 :before 及 :after 偽元素配合使用，來插入生成內(nèi)容。
## content里可以放什么呢？ ##
文本值：content屬性，可以使用文本值，比如 content:'我是外來文字哦'。
attr屬性值：比如，標簽的一些屬性值，方法是attr()，但當使用attr()獲取標簽屬性名的時候，千萬不要添加引號。
圖片的URL：比如，content:url(logo.png);
content一般和:before,:after一起使用，用來生成內(nèi)容(img和input沒有該屬性)，content的內(nèi)容一般可以為以下四種：none： 不生成任何值。attr： 插入標簽屬性值 url： 使用指定的絕對或相對地址插入一個外部資源（圖像，聲頻，視頻或瀏覽器支持的其他任何資源） string： 插入字符串。
## content還可以用作：計數(shù)器創(chuàng)建號碼內(nèi)容 ##
1. ol標簽應用counter-reset屬性，li標簽應用counter-increment屬性，值均為sectioncounter，再配合content屬性，以及counter計數(shù)器就可以實現(xiàn)遞增的效果了。但content僅在CSS可用的現(xiàn)代瀏覽器下起作用。它沒有通過DOM使用，只是純粹的表象；在特殊情況下，從一個訪問的角度來看，當前屏幕閱讀不支持生成的內(nèi)容。
2. 如果您指定了元素display:none，則content下的計數(shù)器不會產(chǎn)生遞增值。
3. 當然，如果瀏覽器不支持此方法，那么就不會有數(shù)字出現(xiàn)，您使用firebug或是之類的工具查看真實的HTML時不會看到產(chǎn)生的數(shù)值，不要有疑惑，content屬性動態(tài)生成的內(nèi)容是純粹的裝飾而已，虛假的表象。
總之呢，但content僅在CSS可用的現(xiàn)代瀏覽器下起作用。它沒有通過DOM使用，只是純粹的表象；在特殊情況下，從一個訪問的角度來看，當前屏幕閱讀不支持生成的內(nèi)容。
父容器和子元素的寬高一樣哦。
font-face：
主要是用于將自己定義的WEB字體嵌入到網(wǎng)頁中。
transition 和 animation：
寫動畫，一般需要思考兩個問題，寫給誰，如何來定義？
動畫的第一個問題，作用于誰？
動畫的第二個問題，如何來定義？
transition與animation使用場景：
1. transition適用于需要鍵盤鼠標事件來觸發(fā)動畫，如輸入、點擊、滑過、切換
2. animation適用于無須任何事件觸發(fā)，一進來就能看見動畫，如開場動畫
對啦，還有一個，backwards，它是說當動畫有延遲的時候，就阻塞動畫在最初的狀態(tài)，即動畫在開始播放之前，處于開始狀態(tài)。
注意個瀏覽器對transform,translate,animation的兼容性寫法.
1.transform規(guī)定了各種動作,包括translate,但是引用的時候要用transition引入并設定時間,變化形式等..
2.animation里需要額外規(guī)定動作@keyframes,變化前后的css寫在keyframes里
3.transition和animation是名詞,transform是動詞方便記憶.
響應式：
自適應處理(響應式)：
@media screen and (min-width:520px) and (max-width:800px){ } ?/*屏幕寬度在520到800之間的樣式*/
@media screen and (max-width:520px) {} /* 屏幕在 520px 之下時，應用該樣式*/
總結：
縱然前端路漫漫，縱然環(huán)境易改變，但都不要失去盼望，分享東方月的一篇《不失去盼望》：
有一種姿態(tài)，叫做盼望。它使得人們可以面對每一個并不知道會發(fā)生什么的明天而活著。我們總是希望明天會更好，卻又苦于并不了解明天。除非，是有一個生命的主宰，他告訴我將會怎樣。
上帝并沒有把將要發(fā)生的一切都告訴我們，但造物主在人里面放進一個天生的能力，叫做盼望。心中的盼望，使得我們腳下的路繼續(xù)延伸，若失去盼望，路就斷了。
我們不得不承認許多時候我們會陷入失望。
失望與失去盼望是不同的。失望是事情并沒有照著我的計劃實現(xiàn)，而失去盼望，是因著與那位賜給人盼望的主隔絕了。
偶爾的失望，或許反而會促使我們更加尋求一件事，就是知道自己有限而凡事要更倚靠那位生命的主，他不僅是掌權的一位，更是愛我們、定意要我們實現(xiàn)我們?nèi)松罹实拿ǖ哪且晃?。因此不是照著我有限的計劃，而是照著他無限寬廣的心意。
文章鏈接：不失去盼望-東方月
