前端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的属性
<label>网址:</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>数量:</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 设置是否有联想下拉，一般设置为off 不需要联想
-->
<input type="text" name="" placeholder ="请输入用户名" autofocus="" autocomplete="">
6.audio、video (音频视屏)
<!-- autoplay 自动播放
loop 循环播放
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且是父元素的倒数第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)：匹配父元素的倒数第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;
}
/*内阴影*/
.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变换.gif
transition变换 核心代码
.box{
width: 100px;
height: 100px;
background-color: gold;
/*ease 开始和结束慢速*/
/*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;
}
运动曲线的选择（以什么形式去运动、开始快结束慢?开始慢中间结束均速?）
/*匀速*/
transition: all 1s linear;
/*开始和结束慢速*/
transition: all 1s ease;
/*开始慢速*/
transition: all 1s ease-in;
/*结束慢速*/
transition: all 1s ease-out;
/*开始、结束、慢速*/
transition: all 1s ease-in-out;
实例:文字遮罩
transition变换(文字遮罩).gif
文字遮罩 核心代码
<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>
变形
transition变换(变形).gif
变形 核心代码
.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);
}
实例:图片翻转
transition变换(图片翻转).gif
图片翻转 核心代码
.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 用于翻转使用
当 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 用于翻转使用
当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说明可以创建动画)(可以控制次数，并且和transition一起使用能达到更好的效果)
动画的参数说明
/*动画名称 动画时间 动画曲线 动画延迟的时间 动画次数(infinite无限次) 动画是否返回 动画完成是否保存最后一个值(保存最后一个) both向前向后填充 */
animation: moving 1s ease 1s 5 alternate both;
animation动画(人物走路).gif
人物走路 核心代码
.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秒处理多个转变)
animation动画(多帧动画).gif
多帧动画 核心代码
.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动画
animation动画(loading).gif
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 动画结束不返回
alternate动画结束返回
*/
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设计师、产品经理发展，给你们推荐一个不错的妹子哦。→UI妹儿(我会告诉你他是男的吗？)
好困，凌晨5点了，先睡会。
