文章目录
HTML51. HTML5新增标签2. 表单属性--交互表单属性CSS31. 选择器1.1 属性选择器1.2 结构伪类选择器1.3 伪元素选择器2. css属性2.1 平面转换transform2.1.1 平移2.1.2旋转2.1.3 多重转换2.1.4 缩放2.1.5 渐变背景案例1 给图片蒙上渐变色案例2 实现开门效果空间转换（3D转换）空间位移perspective属性实现透视效果空间旋转动画边框圆角盒子阴影HTML5
语义化标签，本地存储，视频，音频…
1. HTML5新增标签
<!-- 语义化标签 --><header>头部</header><nav>导航</nav><article>文章 页面中有一块独立的内容区域 放标签</article><footer>底部</footer><aside>侧边栏</aside><section>内容</section>
2. 表单属性–交互表单属性
<form action=""><p>邮箱:<input type="email" required placeholder="提示文字"></p><p>地址：<input type="url" name="" id="" autofocus></p><p>日期<input type="date" name="" id=""></p><p>时间<input type="time" name="" id=""></p><p>月<input type="month" name="" id=""></p><p>周<input type="week" name="" id=""></p><p>数字<input type="number" name="" id=""></p><p>电话<input type="tel" name="" id=""></p><p>搜索<input type="search" name="" id=""></p><p>颜色<input type="color" name="" id=""></p></form>required 必填placeholder 提示文字autofocus 自动获取焦点
CSS3
选择器 属性 过渡 动画 平移 3d空间 边框…
1. 选择器
1.1 属性选择器
E[attr] 标签名[属性]{}E[attr="value"] 标签名[属性名=属性值]{}E[attr^="value"] 标签名[type^='t'] 选中有type属性的，属性值以t开头的标签E[attr$="value"] 标签名[type$='t'] 选中有type属性的，属性值以t结尾的标签
1.2 结构伪类选择器
first-childlast-childnth-child(n) even odd -n+3 3n
1.3 伪元素选择器
::before ::after-------------1:伪元素 content属性必不可少2：必须依附于真正的元素 （标签+内容）3：after显示在内容最后边 before显示内容的最前边4：伪元素具有行内元素的特点
2. css属性
2.1 平面转换transform
改变盒子在平面内的形态（位移，旋转，缩放）
2.1.1 平移
transform:translate(水平移动距离，垂直移动距离)
取值: (正负都可以)
1:像素单位数值
2:百分比(参照物盒子自身的尺寸)
x轴正向为右,y轴正向为下
translate如果只给出一个值,表示x轴方向移动距离单独设置某个方向的移动距离 translateX 和 translateY
<!DOCTYPE html><html><head><style>.father{width: 500px;height: 300px;margin: 100px auto;border: 1px solid #000;}.son{width: 200px;height: 100px;background-color: pink;/* 过渡 */transition: all 1s;}.father:hover .son{/* transform: translate(100px,50px); *//* 百分比：盒子自身尺寸的百分比 *//* transform: translate(100%,50%); *//* transform: translate(-100%,-50%); *//* 只给出一个值 x轴移动距离 *//* transform: translate(100px); */transform: translateY(100px);}</style></head><body><div class="father"><div class="son"></div></div></body></html>
平移还在原来的文档流，平移后的位置也可以重叠。
2.1.2旋转
transform:rotate(角度) 角度单位是deg取值正负均可取值为正,顺时针旋转取值为负,逆时针旋转
默认原点是盒子中心
transform-origin:原点水平位置 原点垂直位置; 改变转换原点
方位名词(left,top,right,bottom,center)像素单位数值百分比(参照盒子自身尺寸计算)
<!DOCTYPE html><html><head><style>.three {width: 200px;transform-origin: 0px 0px;height: 200px; background-color: yellowgreen;/* 过渡 */transition:all 1s;/* 改变原点 *//* transform-origin: right bottom; */transform-origin:0px 0px;}div:hover{/* 顺 */transform: rotate(360deg);/* 逆 *//* transform: rotate(-360deg);*/} </style></head><body><div>我是绿盒子</div></body></html>
2.1.3 多重转换
使用transform复合属性实现多形态转换
transform: translate(600px) rotate(360deg);
<!DOCTYPE html><html><head><style>.box{width: 1200px;height: 50px;border-bottom: 3px solid gray;margin: 200px auto;}img{width: 50px;transition: all 8s;}.box:hover img{/* 边走边旋转 */transform: translate(1150px) rotate(2000deg);/* transform: rotate(360deg) translate(600px); */}</style></head><body><div class="box"><img src="https://i.bmp.ovh/imgs//07/04/68909f552ee6d2c1.png" alt=""></div></body></html>
2.1.4 缩放
transform: scale(x轴缩放倍数,y轴缩放倍数);一般情况下,只为scale设置一个值,表示x轴和ye轴等比例缩放transform:scale(缩放倍数)scale值大于1 表示放大 scale值小于1 表示缩小
<!DOCTYPE html><html><head><style>.box{width: 400px;height: 400px;border: 1px solid;}.son{width: 100px;height: 100px;background-color: pink;transition: all 1s;}.box:hover .son{/* width: 300px; *//* transform: scale(x轴缩放倍数,y轴缩放倍数); *//* transform: scale(0.5,0.5); */transform: scale(1.5);}</style></head><body><div class="box"><div class="son"></div></div></body></html>
2.1.5 渐变背景
使用background-image属性实现渐变背景效果
background-image: linear-gradient(颜色1,颜色2);
案例1 给图片蒙上渐变色
<!DOCTYPE html><html><head><style>.box{width: 400px;height: 200px;background: url(https://i.bmp.ovh/imgs//07/04/db0bbf5a32f7be92.jpg) center;border: 1px solid ;overflow: hidden;}.box::before{content:"";display: block;width: 400px;height: 200px;background-image: linear-gradient(transparent,rgba(0,0,0,.6));transform: translateY(100%);transition: all 1s;}.box:hover::before{transform: translateY(0%);}</style></head><body><div class="box"></div></body></html>
流程如下：
案例2 实现开门效果
主要是平移和伪元素的使用
<!DOCTYPE html><html><style>*{margin:0;padding:0;}.box{width: 1366px;height: 600px;margin: 0 auto;background: url(//07/04/22uDHSP0.jpg);overflow: hidden;}.box::before,.box::after{content:"";float: left;width: 50%;height: 600px;background-image: url(https://i.bmp.ovh/imgs//07/04/db0bbf5a32f7be92.jpg);transition: all 1s;}.box::after{background-position: right 0;}.box:hover::before{transform: translate(-100%);}.box:hover::after{transform: translate(100%);}</style></head><body><div class="box"></div></body></html>
给盒子的::before和::after分别装上图片的左半和右半，设置盒子:hover，悬停时将图片移开。
可以给盒子加overflow:hidden隐藏移开时的超出部分。
空间转换（3D转换）
空间: 从坐标轴的角度定义的, x,y,z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同
transform
w3school 3d转换
空间位移
transform:translateX(值)transform:translateY(值)transform:translateZ(值)像素单位值 百分比 正负均可
transform: translateX(100px);transform: translateY(100px);transform: translateZ(100px);
perspective属性实现透视效果
生活中,同一个物体,观察距离不同,视觉上有什么区别?
近大远小 近清楚 远模糊
默认情况下,为什么无法观察到Z轴位移效果?
z轴是实现方向,移动效果应该是距离的远和近,电脑屏幕都是平面,默认是无法观察远近效果
添加给父级perspective:值取值:像素单位数值,数值一般在800~1200作用:空间转换时,为元素添加近大远小,近实远虚 视觉效果
透视距离 也称为视距, 就是人的眼睛到屏幕的距离i
空间旋转
transform:rotateZ(值)transform:rotateX(值)transform:rotateY(值)
左手法则
判断旋转方向,左手握住旋转轴,拇指指向正值方向,手指弯曲方向为旋转正值方向
动画
使用animation添加动画效果
动画效果: 实现多个状态间的变化过程,动画过程可控(重复播放 ,最终画面,是否暂停)
步骤:1:定义动画@keyframes 动画名称{from {}to {}}@keyframes 动画名称{0% {}10% {}20% {}50% {}100% {}}2:使用动画animation:动画名称 动画花费时长;
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时的状态动画名称和动画时长必须赋值取值不分先后顺序如果右2个时间值 第一个时间表示动画时长 第二个时间表示延迟时间
边框圆角
border-radius
/* 一个值 表示4个角都是 相同的 *//* border-radius: 10px; *//* border-radius: 50%; *//*左上 右上 右下 左下 从左上顺时针转一圈 *//* border-radius: 10px 20px 40px 80px; *//* 没有的角找对角线 *//* border-radius: 10px 40px 80px; */border-radius:10px 30px ;
盒子阴影
box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影;前两个属性是必须写的，其余的都可以省略外阴影(outset) 是默认的，但是不写 inset内阴影 是需要写的
