2020.02.24--02.28日H5学习分享

Css3 - 2D变形：transform属性

一，2D的位移：transform:translate( 参数1，参数2)

1 - 参数1在X轴移动的距离，参数2在Y轴移动的距离

2 - 正值往右往下走，负值往左往上走

3 - 单独设置X/Y轴的位移：transform:translateX（）/ transform:translateY（）

二，2D的旋转：transform:rotate(deg)

1 - 旋转的是一个度数，单位deg

2 - 默认情况下绕着中心点旋转

3 - 单独设置X/Y轴的旋转：transform:rotateX（）/ transform:rotateY（）

 

三，2D的缩放：transform:scale(参数1，参数2)

1 - 参数1在X轴缩放比例，参数2在Y轴缩放比例

2 - 0--0.99999为缩小，大于1时为放大

3 - 单独设置X/Y轴的缩放：transform:scaleX（）/ transform:scaleY（）

四，2D的倾斜：transform:skew( deg )

  　　　  3 - 单独设置X/Y轴的倾斜：transform:skewX（）/ transform:skewY（）　

Css3景深（3D空间）

　　　　1 - 样式：transform-style:preserve-3d;

　　　　2 - 一般给父元素设置，让其形成3D舞台，让子元素在3D空间内进行变换

　　　　3 - 3d空间会增加一个Z轴

Css3动画

animation动画：不需要事件触发，调用关键帧即可

制定关键帧：@keyframes 关键帧名称{

                                                      0%(开始状态)

　　　　　　　　　　　　　　　　　　（中间可随意添加时间状态）

　　　　　　　　　　　　　　　　　　100%（结束状态） }

animation属性：

　　1 - name   关键帧名称

　　2 - duration   动画持续时间

　　3 - timing-function   动画运用类型   step-start(没有过渡效果，直接跳到下一帧开始)

　　4 - delay   动画延迟时间

　　5 - iteration-count   动画运用次数  infinite无限循环

　　6 - direction (运动方向)：reverse(无限循环），  alternate（先正后反，持续交替运行），alternate-reverse（先反后正，持续交替运行）

　　7 - play-state: paused （暂停），running（运动）

逐帧动画:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2{
height: 300px;
width: 180px;
margin: 40px auto;
background: paleturquoise url(./images/bg.png) no-repeat;
animation: boxJunp 2s infinite step-start;
}
@keyframes boxJunp{
0%{
background-position: -180px 0;
}
14%{
background-position: -360px 0;
}
28%{
background-position: -540px 0;
}
42%{
background-position: -720px 0;
}
68%{
background-position: -900px 0;
}
82%{
background-position: -1080px 0;
}
100%{
background-position: 0 0;
}
 
</style>
</head>
<body>
<div class="box">
<h2></h2>
</div>
</body>
</html>

HTML5新增内容

一，语义化标签

　　　　section ,article ,aside ,header ,footer ,nav ,fingure, figcaption, main, hgroup, mark, time, dialog

　　语义化标签搭建结构：

<style>
*{
margin: 0;
padding: 0;
}
.box{
height: 550px;
width: 850px;
background: khaki;
margin: 10px auto;
color: #fff;
text-align: center;
}
header{
height: 80px;
background: orange;
}
main{
height: 420px;
background: pink;
}
footer{
height: 50px;
background: palevioletred;
}
nav{
width: 200px;
height: 420px;
float: left;
background: brown;
}
article{
width: 430px;
background: #ccc;
margin: 10px;
float: left;
}
aside{
width: 200px;
height: 420px;
background: brown;
float: left;
}
</style>
 
<body>
<div class="box">
<header>header</header>
<main>
<nav>
<li>11111</li>
<li>22222</li>
<li>33333</li>
</nav>
<article>
<header class="article_h">articleheader</header>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</p>
<footer class="article_f">articlefooter</footer>
<header class="article_h">articleheader</header>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</p>
<footer class="article_f">articlefooter</footer>
</article>
<aside></aside>
</main>
<footer>footer</footer>
</div>
</body>

二，多媒体标签 video视频/audio音频

　　　　1 - 属性：src （视频路径） ，controls （控件，例播放按钮等），autoplay（自动播放），loop（重复播放），muted（静音），poster（视频播放前显示的图片）

　　　　2 - source标签：定义媒介资源

　　　　　　type属性：视频  webm，mp4，ogg

　　　　　　　　　　   音频  mp3 ，ogg，mpeg，mav

三，新增表单type类型

　　　　email , url , range , number , search , color , time , month , week , datetime-local , date

三，新增表单属性

　　　　required  检测是否为空，并提示填写          min   输入最小值          max  输入最大值　　　step  步幅，确定一系列发定值 -3，0，3，6，9

　　　　autocomplate  是否自动提示信息 默认on  关闭off                placeholder  文本框的提示信息 类似value

　　　　autofocus  自动聚焦，一个页面只能一个      pattern  属性值是一个正则表达式      nvalidate  取消验证

　　　　multiple  选择/上传多个文件    list 绑定datalist的id名称

 

posted @ 2020-02-28 21:22  小胖胖爱草莓味  阅读(169)  评论(0)    收藏  举报