前端学习-HTML(5)+CSS(3)篇02

2018-05-18 LYH学编程
前端Logo.jpg

大家好,我是lyh165,每天喜欢用17小时去工作和学习。
之前从事于后者(世界上有两种手机一种是其他手机,另一种是iPhone手机)dont ask my why.
现如今献血于(人生苦短,我用Python)期待于与吴恩达较于高下。
后于(UI设计、产品经理、技术总监、CTO、 我还有一个bug没改:然后die)

我打算用每周更新专栏五到六篇文章。不能做到每天一文是因为工作、学习、总结和概念以及编译成文章需要大量的时间。而且我是个疯子、疯子、疯子。花了17个小时都满足不了你们要求的疯子。就体谅一下吧。
一天24小时都不够用来学习的。你又什么资格去叹气!

大家可以扫码关注我的微信公众号.jpg

上一篇文章是:前端学习-HTML(5)+CSS(3)篇01

由于编写文章字数限制我把HTML(5)+CSS(3)抽成两篇来写了。接下来我们继续讲述到

3、HTML5
HTML5其实只不过是在HTML5的基础上新增了一些标签。

之前2014年的时候听别人说H5很火,那时候我在学iOS,别人跟我说,为什么你选择iOS,不选择H5。那是年轻,刚大学毕业,不懂那么多,也没考虑那么多。什么火,我就跟风。结果2014~2017年中的时候,到处都是H5的天下。什么跨平台,什么一处编译到处运行。随便扔到另一个平台只管修修改改就能上线。那时候我们这些iOS和Android原生的开发苦啊。H5真真正正火起来的应该是2015底~2016初的时候。微信小程序,那时候出来的小程序。开发者都开始跟风,什么一个微信开发者小程序账号内部人员卖100万,吓得我。后来小程序出来,我早已经看出它是什么出的了。无非就是H5,那时候的我,在感慨:他们到底在炫耀什么。不就是H5页面吗。跟国内比较火的UC浏览器不是差的太远了吗。 直到今天iOS的市场差不多已经饱和。直接今天,可见iOS的热潮已退。 因为那时候的H5没有那么完善,也没有那么高的扩展性。因为iOS审核比较严格。所以其实已经有人默默去往那边发展就是Facebook公司,开发一套React native组件。现在成熟度已经足够在市场占据一定的位置了。 所以H5也差不多能完成市场70%的需求了。(App开发、网页开发、网页游戏、微信小程序、H5小游戏)
现在的我,赶紧学习Python,赶上第二波人工智能时代。前期当然是做做前端、后端、App开发。到稳定了再深入到Python的机器学习、深度学习数学要好哦等等。
别说我没告诉未来发展的趋势给你了
屁话真多。赶紧学习HTML5先吧

HTML5新增的标签

1.header、footer(头部、尾部)
2.nav、aside(导航栏、侧边栏)
3.article、section(文章、章节)
4.label(文本)
5.input的属性

1       <label>网址:</label><inputtype="url"name=""required><br><br>
2       <label>邮箱:</label><inputtype="email"name=""required><br><br>
3       <label>日期:</label><inputtype="date"name=""><br><br>
4       <label>时间:</label><inputtype="time"name=""><br><br>
5       <label>星期:</label><inputtype="week"name=""><br><br>
6       <label>数量:</label><inputtype="number"name=""><br><br>
7       <label>范围:</label><inputtype="range"name=""><br><br>
8       <label>电话:</label><inputtype="tel"name=""><br><br>
9       <label>颜色:</label><inputtype="color"name=""><br><br>
10       <label>搜索:</label><inputtype="search"name=""><br><br>
11<!--
12   placeholder     设置默认提示文字    
13   autofocus       设置自动获取焦点
14   autocomplete    设置是否有联想下拉,一般设置为off 不需要联想
15-->

16   <inputtype="text"name=""placeholder="请输入用户名"autofocus=""autocomplete="">

6.audio、video (音频视屏)

1   <!-- autoplay 自动播放
2       loop    循环播放
3       preload 预加载
4       muted   静音 -->

5   <audiocontrolsautoplaylooppreloadmuted>
6   <!-- 如果第一个不兼容 就播放第二个 -->
7       <!-- <source src="source/audio.mp3" type=""> -->
8       <sourcesrc="source/audio02.wav"type="">
9   </audio>
10   <videocontrolsautoplaylooppreloadwidth="400"height="400">
11       <sourcesrc="source/mov.mp4"type="">
12       <sourcesrc="source/movie.oggo"type="">
13   </video>

4、CSS3
1.主要增加E:nth(主要用来获取一个大容器下面的子元素等等)
2.样式处理(圆角、阴影、透明度)
3.变换(运动曲线、变形)(实例有 文字遮罩、)

4.动画(animation)

1.E:nth家族

11、E:nth-child(n):匹配元素类型为E且是父元素的第n个子元素
22、E:nth-last-child(n):匹配元素类型为E且是父元素的倒数第n个子元素(与上一项顺序相反)
33、E:first-child:匹配元素类型为E且是父元素的第一个子元素
44、E:last-child:匹配元素类型为E且是父元素的最后一个子元素
55、E:only-child:匹配元素类型为E且是父元素中唯一的子元素
66、E:nth-of-type(n):匹配父元素的第n个类型为E的子元素
77、E:nth-last-of-type(n):匹配父元素的倒数第n个类型为E的子元素(与上一项顺序相反)
88、E:first-of-type:匹配父元素的第一个类型为E的子元素
99、E:last-of-type:匹配父元素的最后一个类型为E的子元素
1010、E:only-of-type:匹配父元素中唯一子元素是E的子元素
1111、E:empty选择一个空的元素
1212、E:enabled可用的表单控件
1313、E:disabled失效的表单控件
1414、E:checked选中的checkbox
1515、E:not(s)不包含某元素

2.样式处理(圆角、阴影、透明度)

1圆角(border-radius)
2       .box{
3           width:200px;
4           height:200px;
5           border:2pxsolid#000;
6           background-color: gold;
7           margin:50pxauto0;
8           border-radius:50%;
9       }
10阴影(shadow)
11/*半阴影*/
12       .box{
13           width:200px;
14           height:40px;
15           background-color: gold;
16           margin:100pxauto0;
17           /*
18               10px 10px 10px 0px
19               右    下  羽化  阴影的面积
20            */

21           box-shadow:3px10px2px0pxpink;
22       }
23       /*内阴影*/
24       .box2{
25           width:200px;
26           height:40px;
27           background-color: gold;
28           margin:100pxauto0;
29           box-shadow:0px0px20px10pxpink inset;
30       }
31透明度(opacity)
32/*透明度 opacity*/
33       .box{
34           width:200px;
35           height:200px;
36           /*background:url(images/location_bg.jpg);*/
37           background-color: gold;
38           margin:50pxauto0;
39           border:2pxsolid#000;
40           border-radius:50%;
41           /*opacity 不兼容ie
42           需要加上filter: alpha(opacity=透明度)*/

43           opacity:0.5;
44           filter:alpha(opacity=50);
45           text-align: center;
46           line-height:200px;
47       }
48       .box2{
49           width:200px;
50           height:200px;
51           /*background:url(images/location_bg.jpg);*/
52           margin:50pxauto0;
53           border-radius:50%;
54           text-align: center;
55           line-height:200px;
56           /*颜色透明 字体不透明
57           使用rgba*/

58           background-color:rgba(255,215,0,0.3);
59           border:2pxsolidrgba(0,0,0,0.3);
60       }

3.变换(transition)

transition变换.gif
1transition变换 核心代码
2.box{
3           width:100px;
4           height:100px;
5           background-color: gold;
6           /*ease 开始和结束慢速*/
7           /*transition: width 500ms ease, height 500ms ease 500ms;*/
8           /*transition: border-radius 500ms ease,width 500ms ease
9           500ms,height 500ms ease 1s,background-color 500ms ease 1.5s;*/

10           /*同时完成多个属性变换*/
11           transition: all500msease;
12       }
13       .box:hover{
14           width:500px;
15           height:300px;
16           background-color: red;
17           border-radius:50px;
18       }

运动曲线的选择(以什么形式去运动、开始快结束慢?开始慢中间结束均速?)

1       /*匀速*/
2       transition: all1slinear;
3       /*开始和结束慢速*/
4           transition: all1sease;
5       /*开始慢速*/
6           transition: all1sease-in;
7       /*结束慢速*/
8           transition: all1sease-out;
9       /*开始、结束、慢速*/
10           transition: all1sease-in-out;

实例:文字遮罩

transition变换(文字遮罩).gif
1文字遮罩 核心代码
2<styletype="text/css">
3       .box{
4           width:200px;
5           height:300px;
6           margin:50pxauto0;
7           border:1pxsolid#000;
8           position: relative;
9           overflow: hidden;
10       }
11       .boximg{
12           width:200px;
13           height:300px;
14       }
15       .box.pic_info{
16           width:200px;
17           height:200px;
18           background-color:rgba(0,0,0,0.5);
19           color:#fff;
20           position:absolute;
21           left:0;
22           top:300px;
23           /*动画*/
24           /*transition: all 1s ease;*/
25           transition: all1scubic-bezier(0.750,-0.425,0.055,1.480);
26       }
27       .box.pic_infop{
28           margin:20px;
29           line-height:30px;
30       }
31       .box:hover.pic_info{
32           top:100px;
33       }
34   
</style>
35---body下
36 <divclass="box">
37       <imgsrc="images/location_bg.jpg">
38       <divclass="pic_info"><p>图片说明:这是一个风景图图片说明:这是一个风景图图片说明:这是一个风景图</p></div>
39   </div>

变形

transition变换(变形).gif
1变形 核心代码
2.box{
3           width:200px;
4           height:200px;
5           background-color: gold;
6           margin:50pxauto0;
7           transition: all1sease;
8       }
9       .box:hover{
10           transform:translate(50px,50px);  
11       }
12       .box2{
13           width:200px;
14           height:200px;
15           background-color: gold;
16           margin:50pxauto0;
17           transition: all1sease;
18       }
19       .box2:hover{
20           transform:rotate(360deg);
21       }
22       .box3{
23           width:200px;
24           height:200px;
25           background-color: gold;
26           margin:50pxauto0;
27           transition: all1sease;
28       }
29       .box3:hover{
30           transform:scale(0.5,0.8);
31       }
32       .box4{
33           width:200px;
34           height:200px;
35           background-color: gold;
36           margin:50pxauto0;
37           transition: all1sease;
38       }
39       .box4:hover{
40           transform:skew(45deg,0);
41       }

实例:图片翻转

transition变换(图片翻转).gif
1图片翻转 核心代码
2.con{
3           width:300px;
4           height:272px;
5           margin:100px auto0;
6           position: relative;
7           transform-style: preserve-3d;
8           transform:perspective(800px) rotateY(0deg);
9       }
10       .pic,.info{
11           width:300px;
12           height:272px;
13           position: absolute;
14           left:0;
15           top:0;
16           backface-visibility: hidden;
17           /*pic设置默认初始位置为 0 用于翻转使用
18               当 rotateY(0deg)==0 那就是pic信息
19           */

20           transform:perspective(800px) rotateY(0deg);
21           transition: all500ms ease;
22       }
23       .info{
24           background-color: gold;
25           text-align: center;
26           line-height:272px;
27           /*info设置默认初始位置为 180 用于翻转使用
28           当rotateY(180deg) == 180 那就是显示info信息
29           */

30           transform: translateZ(2px) rotateY(180deg);
31       }
32       .con:hover .pic{
33           transform:perspective(800px) rotateY(180deg);
34       }
35       .con:hover .info{
36           transform:perspective(800px) rotateY(0deg);
37       }
38---body下
39<divclass="con">
40       <divclass="pic"><imgsrc="images/location_bg.jpg"></div>
41       <divclass="info">图片文字说明</div>
42   </div>

4、animation动画(使用到@keyframes说明可以创建动画)(可以控制次数,并且和transition一起使用能达到更好的效果)
动画的参数说明
/*动画名称 动画时间 动画曲线 动画延迟的时间 动画次数(infinite无限次) 动画是否返回 动画完成是否保存最后一个值(保存最后一个)                both向前向后填充            */  
animation: moving 1s ease 1s 5  alternate both;

animation动画(人物走路).gif
1人物走路 核心代码
2.box{
3           width:120px;
4           height:182px;
5           border:1px solid#000;
6           margin:50px auto0;
7           overflow: hidden;
8           position: relative;
9       }
10       .box img{
11           position: absolute;
12           left:0;
13           top:0;
14       animation: walking1ssteps(8) infinite;
15       }
16       @keyframes walking{
17           from{
18               left:0px;
19           }
20           to{
21               left:-960px;
22           }
23       }
24--- body下
25   <divclass="box"><img src="images/walking.png"> </div>

多帧动画(1秒处理多个转变)

animation动画(多帧动画).gif
1多帧动画 核心代码
2.box{
3           width:100px;
4           height:100px;
5           background-color: gold;
6           margin:50pxauto0;
7           /*both 以最后的一次属性进行赋值*/
8           animation: moving2sease1sboth;
9       }
10/*animation的进度时间条*/
11       @keyframesmoving{
12           0%{
13               transform:translateY(10px);
14           }
15           20%
16           {
17               transform:translateY(10px);
18           }
19           50%
20           {
21               transform:translateY(300px);
22               background-color: gold;
23               border-radius:50%;
24           }
25           80%
26           {
27               transform:translateY(0px);
28               background-color: red;
29           }
30           100%
31           {
32               transform:translateY(0px);
33               background-color: red;
34               border-radius:50%;
35           }
36       }

loading动画

animation动画(loading).gif
1loading 核心代码
2<styletype="text/css">
3   .box{
4       width:300px;
5       height:120px;
6       margin:200pxauto0;
7       border:1pxsolid#000;
8   }
9   .boxp{
10       text-align: center;
11       width:100%;
12       float: left;
13       margin:0;
14       padding:0;
15   }
16   .boxdiv{
17       width:30px;
18       height:70px;
19       float: left;
20       background-color: gold;
21       margin:15px;
22       border-radius:10px;
23   }
24   .boxdiv:nth-child(1){
25       background-color: red;
26       /*animation direction
27       normal 动画结束不返回
28       alternate动画结束返回
29       */

30       animation: loading500msease0sinfinite alternate;
31   }
32   .boxdiv:nth-child(2){
33       background-color: green;
34       animation: loading500msease100msinfinite alternate;
35   }
36   .boxdiv:nth-child(3){
37       background-color: blue;
38       animation: loading500msease200msinfinite alternate;
39   }
40   .boxdiv:nth-child(4){
41       background-color: yellow;
42       animation: loading500msease300msinfinite alternate;
43   }
44   .boxdiv:nth-child(5){
45       background-color: pink;
46       animation: loading500msease400msinfinite alternate;
47   }
48   @keyframesloading{
49       from{
50           transform:scaleY(1);
51       }
52       to
53       {
54           transform:scaleY(0.5);
55       }
56   }
57   
</style>
58---body下
59<divclass="box">
60       <div></div>
61       <div></div>
62       <div></div>
63       <div></div>
64       <div></div>
65       <p>loading...</p>
66   </div>

分享完了。大家猜我写两篇HTML5+CSS3初认识写了多久。
两天,每篇大概是输出3个小时左右,有空点个赞哦。
下期介绍PS的简单使用。如果有意向往UI设计师、产品经理发展,给你们推荐一个不错的妹子哦。→UI妹儿(我会告诉你他是男的吗?)
好困,凌晨5点了,先睡会。


本站所有内容仅供本人订阅使用!RSS + Sitemap