大家好殖蚕，我是lyh165矫户，每天喜歡用17小時去工作和學習节吮。
之前從事于后者(世界上有兩種手機一種是其他手機，另一種是iPhone手機)dont ask my why.
現(xiàn)如今獻血于(人生苦短瘪匿，我用Python)期待于與吳恩達較于高下跛梗。
后于(UI設計、產(chǎn)品經(jīng)理棋弥、技術總監(jiān)核偿、CTO、 我還有一個bug沒改:然后die)
我打算用每周更新專欄五到六篇文章顽染。不能做到每天一文是因為工作漾岳、學習、總結(jié)和概念以及編譯成文章需要大量的時間粉寞。而且我是個瘋子尼荆、瘋子、瘋子仁锯∫遥花了17個小時都滿足不了你們要求的瘋子。就體諒一下吧。
一天24小時都不夠用來學習的野芒。你又什么資格去嘆氣蓄愁！
上一篇文章是:前端學習-HTML(5)+CSS(3)篇01
由于編寫文章字數(shù)限制我把HTML(5)+CSS(3)抽成兩篇來寫了。接下來我們繼續(xù)講述到
3狞悲、HTML5
HTML5其實只不過是在HTML5的基礎上新增了一些標簽撮抓。
之前2014年的時候聽別人說H5很火，那時候我在學iOS摇锋，別人跟我說丹拯，為什么你選擇iOS，不選擇H5荸恕。那是年輕乖酬，剛大學畢業(yè)，不懂那么多融求，也沒考慮那么多咬像。什么火，我就跟風生宛。結(jié)果2014~2017年中的時候县昂，到處都是H5的天下。什么跨平臺陷舅，什么一處編譯到處運行倒彰。隨便扔到另一個平臺只管修修改改就能上線。那時候我們這些iOS和Android原生的開發(fā)苦啊莱睁。H5真真正正火起來的應該是2015底~2016初的時候待讳。微信小程序，那時候出來的小程序缩赛。開發(fā)者都開始跟風耙箍，什么一個微信開發(fā)者小程序賬號內(nèi)部人員賣100萬，嚇得我酥馍。后來小程序出來辩昆，我早已經(jīng)看出它是什么出的了。無非就是H5旨袒，那時候的我汁针，在感慨:他們到底在炫耀什么。不就是H5頁面嗎砚尽。跟國內(nèi)比較火的UC瀏覽器不是差的太遠了嗎施无。 直到今天iOS的市場差不多已經(jīng)飽和。直接今天必孤，可見iOS的熱潮已退猾骡。 因為那時候的H5沒有那么完善瑞躺，也沒有那么高的擴展性。因為iOS審核比較嚴格兴想。所以其實已經(jīng)有人默默去往那邊發(fā)展就是Facebook公司幢哨，開發(fā)一套React native組件。現(xiàn)在成熟度已經(jīng)足夠在市場占據(jù)一定的位置了嫂便。 所以H5也差不多能完成市場70%的需求了捞镰。(App開發(fā)、網(wǎng)頁開發(fā)毙替、網(wǎng)頁游戲岸售、微信小程序、H5小游戲)
現(xiàn)在的我厂画，趕緊學習Python凸丸，趕上第二波人工智能時代。前期當然是做做前端袱院、后端甲雅、App開發(fā)。到穩(wěn)定了再深入到Python的機器學習坑填、深度學習數(shù)學要好哦等等。
別說我沒告訴未來發(fā)展的趨勢給你了
屁話真多弛姜。趕緊學習HTML5先吧
HTML5新增的標簽
1.header脐瑰、footer(頭部、尾部)
2.nav廷臼、aside(導航欄苍在、側(cè)邊欄)
3.article、section(文章荠商、章節(jié))
4.label(文本)
5.input的屬性
<label>網(wǎng)址:</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>數(shù)量:</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 設置是否有聯(lián)想下拉寂恬，一般設置為off 不需要聯(lián)想
-->
<input type="text" name="" placeholder ="請輸入用戶名" autofocus="" autocomplete="">
6.audio、video (音頻視屏)
<!-- autoplay 自動播放
loop 循環(huán)播放
preload 預加載
muted 靜音 -->
<audio controls autoplay loop preload muted>
<!-- 如果第一個不兼容 就播放第二個 -->
<!-- <source src="source/audio.mp3" type=""> -->
<source src="source/audio02.wav" type="">
</audio>
<video controls autoplay loop preload width="400" height="400">
<source src="source/mov.mp4" type="">
<source src="source/movie.oggo" type="">
</video>
4莱没、CSS3
1.主要增加E:nth(主要用來獲取一個大容器下面的子元素等等)
2.樣式處理(圓角初肉、陰影、透明度)
3.變換(運動曲線饰躲、變形)(實例有 文字遮罩牙咏、)
4.動畫(animation)
1.E:nth家族
1、E:nth-child(n)：匹配元素類型為E且是父元素的第n個子元素
2嘹裂、E:nth-last-child(n)：匹配元素類型為E且是父元素的倒數(shù)第n個子元素（與上一項順序相反）
3妄壶、E:first-child：匹配元素類型為E且是父元素的第一個子元素
4、E:last-child：匹配元素類型為E且是父元素的最后一個子元素
5寄狼、E:only-child：匹配元素類型為E且是父元素中唯一的子元素
6丁寄、E:nth-of-type(n)：匹配父元素的第n個類型為E的子元素
7、E:nth-last-of-type(n)：匹配父元素的倒數(shù)第n個類型為E的子元素（與上一項順序相反）
8、E:first-of-type：匹配父元素的第一個類型為E的子元素
9伊磺、E:last-of-type：匹配父元素的最后一個類型為E的子元素
10盛正、E:only-of-type：匹配父元素中唯一子元素是E的子元素
11、E:empty 選擇一個空的元素
12奢浑、E:enabled 可用的表單控件
13蛮艰、E:disabled 失效的表單控件
14、E:checked 選中的checkbox
15雀彼、E:not(s) 不包含某元素
2.樣式處理(圓角壤蚜、陰影、透明度)
圓角(border-radius)
.box{
width: 200px;
height: 200px;
border:2px solid #000;
background-color: gold;
margin: 50px auto 0;
border-radius: 50%;
}
陰影(shadow)
/*半陰影*/
.box{
width: 200px;
height: 40px;
background-color: gold;
margin: 100px auto 0;
/*
10px 10px 10px 0px
右 下 羽化 陰影的面積
*/
box-shadow: 3px 10px 2px 0px pink;
}
/*內(nèi)陰影*/
.box2{
width: 200px;
height: 40px;
background-color: gold;
margin: 100px auto 0;
box-shadow: 0px 0px 20px 10px pink inset;
}
透明度(opacity)
/*透明度 opacity*/
.box{
width: 200px;
height: 200px;
/*background:url(images/location_bg.jpg);*/
background-color: gold;
margin: 50px auto 0;
border:2px solid #000;
border-radius: 50%;
/*opacity 不兼容ie
需要加上filter: alpha(opacity=透明度)*/
opacity: 0.5;
filter: alpha(opacity=50);
text-align: center;
line-height: 200px;
}
.box2{
width: 200px;
height: 200px;
/*background:url(images/location_bg.jpg);*/
margin: 50px auto 0;
border-radius: 50%;
text-align: center;
line-height: 200px;
/*顏色透明 字體不透明
使用rgba*/
background-color: rgba(255,215,0,0.3);
border:2px solid rgba(0,0,0,0.3);
}
3.變換(transition)
transition變換 核心代碼
.box{
width: 100px;
height: 100px;
background-color: gold;
/*ease 開始和結(jié)束慢速*/
/*transition: width 500ms ease, height 500ms ease 500ms;*/
/*transition: border-radius 500ms ease,width 500ms ease
500ms,height 500ms ease 1s,background-color 500ms ease 1.5s;*/
/*同時完成多個屬性變換*/
transition: all 500ms ease;
}
.box:hover{
width: 500px;
height: 300px;
background-color: red;
border-radius: 50px;
}
運動曲線的選擇（以什么形式去運動徊哑、開始快結(jié)束慢?開始慢中間結(jié)束均速?）
/*勻速*/
transition: all 1s linear;
/*開始和結(jié)束慢速*/
transition: all 1s ease;
/*開始慢速*/
transition: all 1s ease-in;
/*結(jié)束慢速*/
transition: all 1s ease-out;
/*開始袜刷、結(jié)束、慢速*/
transition: all 1s ease-in-out;
實例:文字遮罩
文字遮罩 核心代碼
<style type="text/css">
.box{
width: 200px;
height: 300px;
margin: 50px auto 0;
border:1px solid #000;
position: relative;
overflow: hidden;
}
.box img{
width: 200px;
height: 300px;
}
.box .pic_info{
width: 200px;
height: 200px;
background-color: rgba(0,0,0,0.5);
color: #fff;
position:absolute;
left: 0;
top:300px;
/*動畫*/
/*transition: all 1s ease;*/
transition: all 1s cubic-bezier(0.750,-0.425,0.055,1.480);
}
.box .pic_info p{
margin: 20px;
line-height: 30px;
}
.box:hover .pic_info{
top:100px;
}
</style>
---body下
<div class="box">
<img src="images/location_bg.jpg">
<div class="pic_info"><p>圖片說明：這是一個風景圖圖片說明：這是一個風景圖圖片說明：這是一個風景圖</p></div>
</div>
變形
變形 核心代碼
.box{
width: 200px;
height: 200px;
background-color: gold;
margin: 50px auto 0;
transition: all 1s ease;
}
.box:hover{
transform: translate(50px,50px);
}
.box2{
width: 200px;
height: 200px;
background-color: gold;
margin: 50px auto 0;
transition: all 1s ease;
}
.box2:hover{
transform: rotate(360deg);
}
.box3{
width: 200px;
height: 200px;
background-color: gold;
margin: 50px auto 0;
transition: all 1s ease;
}
.box3:hover{
transform: scale(0.5,0.8);
}
.box4{
width: 200px;
height: 200px;
background-color: gold;
margin: 50px auto 0;
transition: all 1s ease;
}
.box4:hover{
transform: skew(45deg,0);
}
實例:圖片翻轉(zhuǎn)
圖片翻轉(zhuǎn) 核心代碼
.con{
width: 300px;
height: 272px;
margin: 100px auto 0;
position: relative;
transform-style: preserve-3d;
transform:perspective(800px) rotateY(0deg);
}
.pic,.info{
width: 300px;
height: 272px;
position: absolute;
left: 0;
top: 0;
backface-visibility: hidden;
/*pic設置默認初始位置為 0 用于翻轉(zhuǎn)使用
當 rotateY(0deg)==0 那就是pic信息
*/
transform:perspective(800px) rotateY(0deg);
transition: all 500ms ease;
}
.info{
background-color: gold;
text-align: center;
line-height: 272px;
/*info設置默認初始位置為 180 用于翻轉(zhuǎn)使用
當rotateY(180deg) == 180 那就是顯示info信息
*/
transform: translateZ(2px) rotateY(180deg);
}
.con:hover .pic{
transform:perspective(800px) rotateY(180deg);
}
.con:hover .info{
transform:perspective(800px) rotateY(0deg);
}
---body下
<div class="con">
<div class="pic"><img src="images/location_bg.jpg"></div>
<div class="info">圖片文字說明</div>
</div>
4莺丑、animation動畫(使用到@keyframes說明可以創(chuàng)建動畫)(可以控制次數(shù)著蟹，并且和transition一起使用能達到更好的效果)
動畫的參數(shù)說明
/*動畫名稱 動畫時間 動畫曲線 動畫延遲的時間 動畫次數(shù)(infinite無限次) 動畫是否返回 動畫完成是否保存最后一個值(保存最后一個) both向前向后填充 */
animation: moving 1s ease 1s 5 alternate both;
人物走路 核心代碼
.box{
width: 120px;
height: 182px;
border:1px solid #000;
margin: 50px auto 0;
overflow: hidden;
position: relative;
}
.box img{
position: absolute;
left:0;
top:0;
animation: walking 1s steps(8) infinite;
}
@keyframes walking{
from{
left:0px;
}
to{
left:-960px;
}
}
--- body下
<div class="box"><img src="images/walking.png"> </div>
多幀動畫(1秒處理多個轉(zhuǎn)變)
多幀動畫 核心代碼
.box{
width: 100px;
height: 100px;
background-color: gold;
margin: 50px auto 0;
/*both 以最后的一次屬性進行賦值*/
animation: moving 2s ease 1s both;
}
/*animation的進度時間條*/
@keyframes moving{
0%{
transform: translateY(10px);
}
20%
{
transform: translateY(10px);
}
50%
{
transform: translateY(300px);
background-color: gold;
border-radius: 50%;
}
80%
{
transform: translateY(0px);
background-color: red;
}
100%
{
transform: translateY(0px);
background-color: red;
border-radius: 50%;
}
}
loading動畫
loading 核心代碼
<style type="text/css">
.box{
width: 300px;
height: 120px;
margin: 200px auto 0;
border:1px solid #000;
}
.box p{
text-align: center;
width: 100%;
float: left;
margin: 0;
padding: 0;
}
.box div{
width: 30px;
height: 70px;
float: left;
background-color: gold;
margin: 15px;
border-radius: 10px;
}
.box div:nth-child(1){
background-color: red;
/*animation direction
normal 動畫結(jié)束不返回
alternate動畫結(jié)束返回
*/
animation: loading 500ms ease 0s infinite alternate;
}
.box div:nth-child(2){
background-color: green;
animation: loading 500ms ease 100ms infinite alternate;
}
.box div:nth-child(3){
background-color: blue;
animation: loading 500ms ease 200ms infinite alternate;
}
.box div:nth-child(4){
background-color: yellow;
animation: loading 500ms ease 300ms infinite alternate;
}
.box div:nth-child(5){
background-color: pink;
animation: loading 500ms ease 400ms infinite alternate;
}
@keyframes loading{
from{
transform: scaleY(1);
}
to
{
transform: scaleY(0.5);
}
}
</style>
---body下
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>loading...</p>
</div>
分享完了。大家猜我寫兩篇HTML5+CSS3初認識寫了多久梢莽。
兩天萧豆，每篇大概是輸出3個小時左右，有空點個贊哦昏名。
下期介紹PS的簡單使用涮雷。如果有意向往UI設計師、產(chǎn)品經(jīng)理發(fā)展轻局，給你們推薦一個不錯的妹子哦洪鸭。→UI妹兒(我會告訴你他是男的嗎仑扑？)
好困览爵，凌晨5點了，先睡會镇饮。
