1.1 新增语义标签
< header> ：头部标签< nav>：导航标签< article>：内容标签< section>：定义文档某个区域< aside>：侧边栏标签< footer>：尾部标签 1.2 新增多媒体标签 音频：< audio>< audio src=“文件地址” controls=“controls”>
视频：< video>< video src=“文件地址” controls=“controls”>
1.3 新增input类型
<body> <form action=""> <ul> <li>邮箱：<input type="email"/> </li> <li>网址：<input type="url"/> </li> <li>日期：<input type="date"/> </li> <li>数量：<input type="number"/> </li> <li>手机号码：<input type="tel"/> </li> <li>搜索：<input type="search"/> </li> <li>颜色：<input type="color"/> </li> <li><input type="submit" value="提交"> </li> </ul> </form> </body>1.4 新增表单属性
<style> /*通过这个改input框里面默认字体的颜色*/ input::placeholder { color: pink; } </style> <body> <form action=""> <input type="search" name="" id="" required="required" placeholder="我要吃辣条" autofocus="autofocus" > <input type="submit" value="提交"> </form> </body>2.1 新增选择器
属性选择器结构伪类选择器伪元素选择器 属性选择器 <style> /*必须是input但同时有value这个属性*/ input[value]{ color: pink; } </style> <body> <form action=""> <input type="text" value="请输入用户名"> <input type="text"> </form> </body> <style> input[type=password]{ color: pink; } </style> <body> <form action=""> <input type="text" name="" id=""> <input type="password" name="" id=""> </form> </body> <style> /*选择div并且具有class属性，并且类名以icon开头*/ div[class^=icon]{ color: pink; } /*选择并且具有class属性，并且类名date结尾*/ section[class$=date]{ color: red; } /*类名中有****/ div[class*=***]{ color: blue; } </style> <body> <form action=""> <!-- 选择div并且具有class属性，并且类名以icon开头 --> <div class="icon1">小图标</div> <div class="icon2">小图标</div> <div class="icon3">小图标</div> <div class="icon4">小图标</div> <!-- 选择div并且具有class属性，并且类名以icon开头 --> <section class="icon1-date">没有感情的复制粘贴机器</section> <section class="icon2-date">没有感情的复制粘贴机器</section> <section class="icon3-ico">没有感情的复制粘贴机器</section> </form> </body>结构伪类选择器 结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素 区别：
nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子 <style> ul :first-child { background-color: pink; } ul :first-child { background-color: pink; } ul :last-child { background-color: pink; } ul :nth-child(3) { background-color: pink; } </style> <body> <ul> <li>我是第1</li> <li>我是第2</li> <li>我是第3</li> <li>我是第4</li> <li>我是第5</li> </ul> </body>伪元素选择器 。。。。。。自己看吧 过渡
transition: 要过渡的属性 花费时间 运动曲线 何时开始; 1.属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以。 2. 花费时间： 单位是 秒（必须写单位） 比如 0.5s 3. 运动曲线： 默认是 ease （可以省略）、 4.何时开始 ：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）
<style> div{ width: 200px; height: 35px; background-color: pink; transition: width 1s，height 1s; /* 或者 transition: all 1s; */ } div:hover{ width: 400px; height: 70px; } </style> <body> <div> </div> </body>会动的进度条
<style> .bar{ width: 150px; height: 15px; border:1px solid red; border-radius:7px; padding: 1px; } .bar_in{ width: 50%; height: 100%; background-color: red; transition: all 1s; } .bar:hover .bar_in{ width: 100%; } </style> <body> <div class="bar"> <div class="bar_in"></div> </div> </body>translate
transform: translate(x,y); 或者分开写 transform: translateX(n); transform: translateY(n);rotate
//绕中心点旋转 <style> div{ width: 200px; height: 200px; background-color: pink; margin: 100px auto; transition: all 1s; /*transform-origin: left bottom;*/ transform-origin: 50px 50px; } div:hover { transform: rotate(360deg); } </style> <body> <div > </div> </body>那个绿色会转上去
<style> div{ width: 200px; height: 200px; background-color: pink; margin: 100px auto; /*transition: all 1s;*/ /*transform-origin: left bottom;*/ /*transform-origin: 50px 50px; */ overflow: hidden; } div::before{ content: "小黎"; display: block; width: 100%; height: 100%; background-color: green; transform-origin: left bottom; transform: rotate(180deg); transition: all 2s; } div:hover::before{ transform: rotate(0deg); } </style> <body> <div > </div> </body>scale缩放 鼠标放到图片里就会慢慢变大
<style> div{ width: 200px; height: 200px; margin: 100px auto; overflow: hidden; } div img:hover { /*括号里放的是倍数*/ transform: scale(1.2); transition: all 1s; } </style> <body> <div ><a href="#"><img src="C:/Users/Administrator/Desktop/floor-1-6.png" alt=""></a></div> </body>分页按钮放大
<style> /*div{ width: 200px; height: 200px; background-color: pink; margin: 100px auto; overflow: hidden; }*/ li{ float: left; width: 30px; height: 30px; margin:10px; border:1px solid pink; line-height: 30px; list-style: none; border-radius: 50%; cursor: pointer; text-align: center; transition: all .5s; } li:hover{ transform: scale(1.2); } </style> <body> <div > <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body>1.用keyframes定义动画
@keyframes 动画名称 { 0%{ width:100px; } 100%{ width:200px; } }
<style> /*1.定义动画*/ @keyframes move{ /*开始状态*/ 0% { transform: translateX(0px); } /*结束状态*/ 100% { transform: translateX(1000px); } } div{ width: 200px; height: 200px; background-color: pink; margin: 100px auto; /*2.调用动画*/ animation-name: move; animation-duration: 2s; } </style> <body> <div > </div> </body>动画常用属性
前面两个属性一定要写
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
demo：热点图案例
<style> .map{ position: relative; width: 1080px; height: 632px; background: url(/../map.png); margin: 0 auto; } .city{ position: absolute; /*top: 265px; right:350px;*/ /*color: #fff; font-size: 12px;*/ } .bj{ top: 265px; right:350px; } .wh{ bottom: 185px; right:375px; } .nn{ bottom: 65px; right:435px; } .bjname{ position: absolute; top: 265px; right:300px; color: #fff; font-size: 12px; } .whname{ position: absolute; bottom: 185px; right:325px; color: #fff; font-size: 12px; } .nnname{ position: absolute; bottom: 65px; right:425px; color: #fff; font-size: 12px; } .dotted{ width: 8px; height: 8px; background-color: #09f; border-radius: 50%; } .city div[class^="pulse"]{ /*保证小波纹这在父盒子里水平垂直居中，放大后就会从中心向四周发散*/ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 8px; height: 8px; box-shadow: 0 0 12px #009dfd; border-radius: 50%; animation: pulse 1.2s linear infinite; } /*加这么多是因为一个pulse的权重只有10，而上面的city+div+class加起来有21覆盖不了*/ .city div.pulse2 { animation-delay: 0.4s; } .city div.pulse3 { animation-delay: 0.8s; } @keyframes pulse{ 0% { } 70%{ width: 40px; height: 40px; /*transform:scale(5); */ /*透明度*/ opacity: 1; } 100% { width: 70px; height: 70px; opacity: 0; } } </style> <body> <div class="map"> <div class="bjname">北京</div> <div class="city bj"> <div class="dotted"></div> <div class="pulse1"></div> <div class="pulse2"></div> <div class="pulse3"></div> </div> <div class="whname">武汉</div> <div class="city wh"> <div class="dotted"></div> <div class="pulse1"></div> <div class="pulse2"></div> <div class="pulse3"></div> </div> <div class="nnname">南宁</div> <div class="city nn"> <div class="dotted"></div> <div class="pulse1"></div> <div class="pulse2"></div> <div class="pulse3"></div> </div> </div> </body> </html>速度曲线animation-timing-function：规定动画的速度曲线，默认是“ease”
<style> div{ overflow: hidden; width: 0; height: 30px; font-size: 20px; background-color: pink; /*让文字强行在一行上显示*/ white-space: nowrap; /*steps分5步走*/ animation: w 4s steps(10) forwards; } @keyframes w{ 0%{ width: 0; } 100%{ width: 200px; } } </style> <body> <div>不用数了这里有十个字</div> </body>demo：奔跑的小熊
<style> body{ background-color: #ccc; } div{ position: absolute; width: 200px; height: 100px; /*font-size: 20px;*/ background: url("/../bear.png"); animation: bear 1s steps(8) infinite, move 1s forwards; } @keyframes bear{ 0%{ background-position: 0 0; } 100%{ background-position: -1600px 0; } } @keyframes move{ 0%{ left: 0; } 100%{ left: 50%; /*margin-left: -100px;*/ /*改写成*/ transform: translate(-50%); } } </style> <body> <div></div> </body>透视 perspective 透视写在被观察元素的父盒子上面的
translateZ：近大远小 translateZ：往外是正值 translateZ：往里是负值
3D旋转
transform:rotateX(45deg)：沿着x轴正方向旋转 45度 transform:rotateY(45deg) ：沿着y轴正方向旋转 45deg transform:rotateZ(45deg) ：沿着Z轴正方向旋转 45deg transform:rotate3d(1,0,0,45deg) 就是沿着x轴旋转 45deg transform:rotate3d(1,1,0,45deg) 就是沿着对角线旋转 45deg
<style> body{ /*加入透视，实现3D效果*/ perspective: 500px; } img{ display: block; margin: 100px auto; transition: all 1s; } img:hover{ transform: rotateX(180deg); } </style> <body> <img src="1.png" alt=""> </body>transfrom-style 代码写给父级，但是影响的是子盒子这个属性很重要，后面必用
控制子元素是否开启三维立体环境。。 transform-style: flat 子元素不开启3d立体空间 默认的 transform-style: preserve-3d; 子元素开启立体空间
<style> body{ /*加入透视，实现3D效果*/ perspective: 500px; } .box{ position: relative; width: 200px; height: 200px; margin: 100px auto; transition: all 2s; /*让盒子保持3D立体空间*/ transform-style: preserve-3d; } .box:hover{ transform: rotateY(60deg); } .box div{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: green; } .box div:last-child{ background-color: blue; transform: rotateX(60deg); } </style> <body> <div class="box"> <div></div> <div></div> </div> </body>demo：像硬币一样转动
<style> .box{ position: relative; width: 300px; height: 300px; margin: 100px auto; transition: all 1s; /*让背面的紫色盒子保留立体空间*/ transform-style:preserve-3d; } .box:hover{ transform: rotateY(180deg); } .front, .back{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-color: pink; font-size: 30px; color: #fff; text-align: center; line-height: 300px; } .front{ background-color: skyblue; z-index: 1; } .back{ background-color: pink; /*因为反过来后字体会反着，所以先转反*/ transform: rotateY(180deg); } </style> <body> <div class="box"> <div class="front">加油</div> <div class="back">打工仔</div> </div> </body>demo :翻转打工仔
<style> *{ margin: 0; padding: 0; } ul{ margin: 100px; } ul li{ float: left; width: 120px; height: 35px; list-style: none; /*透视效果*/ perspective: 500px; margin-left: 20px; } .box{ position: relative; width: 100%; height: 100%; margin: 100px auto; transition: all 1s; /*让背面的紫色盒子保留立体空间*/ transform-style:preserve-3d; } .box:hover{ transform: rotateX(90deg); } .front, .back{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: pink; font-size: 20px; color: #fff; text-align: center; line-height: 35px; } .front{ background-color: skyblue; z-index: 1; /*把前面的向前移，让后面好转*/ transform:translateZ(17.5px); } .back{ background-color: pink; /**/ transform: translateY(17.5px) rotateX(-90deg); } </style> <body> <ul> <li> <div class="box"> <div class="front">加油</div> <div class="back">打工仔</div> </div> </li> <li> <div class="box"> <div class="front">打工仔</div> <div class="back">加油</div> </div> </li> <li> <div class="box"> <div class="front">打工仔</div> <div class="back">不怕苦</div> </div> </li> <li> <div class="box"> <div class="front">不怕累</div> <div class="back">打工仔</div> </div> </li> </ul> </body>demo：照片旋转
<style> body{ background-color: #ccc; perspective: 1000px; } section { position: relative; width: 288px; height: 200px; margin: 150px auto; transform-style:preserve-3d; /*添加动画效果*/ animation: rotate 10s linear infinite; } section:hover{ /*鼠标放入就暂停*/ animation-play-state: paused; } @keyframes rotate{ 0%{ transform: rotateY(0); } 100%{ transform: rotateY(360deg); } } section div{ position: absolute; width: 100%; height: 100%; /*font-size: 20px;*/ background: url("/../dog.jpg"); } /* section div:nth-child(1){ transform: translateZ(300px); } */ section div:nth-child(2){ transform: rotateY(60deg) translateZ(300px); } section div:nth-child(3){ transform: rotateY(120deg) translateZ(300px); } section div:nth-child(4){ transform: rotateY(180deg) translateZ(300px); } section div:nth-child(5){ transform: rotateY(240deg) translateZ(300px); } section div:nth-child(6){ transform: rotateY(300deg) translateZ(300px); } </style> <body> <section> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </section> </body> </html>display：flex;
