html5 和css3 新增属性

最新推荐文章于 2022-11-20 21:18:32 发布

Double XK

最新推荐文章于 2022-11-20 21:18:32 发布

阅读量142

点赞数

本文链接：https://blog.csdn.net/qq_39861152/article/details/102665358

版权

HTML5和CSS3新增属性
新增选择器
E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素

E:nth-of-type(n)：匹配父元素的第n个类型为E的子元素

CSS圆角
设置某一个角的圆角，比如设置左上角的圆角：
border-top-left-radius:30px 60px;

同时分别设置四个角： border-radius:30px 60px 120px 150px;

设置四个圆角相同：
border-radius:50%;

css阴影
box-shadow：h-shadow v-shadow blur spread color inset;
分别设置阴影：水平偏移垂直偏移羽化大小扩展大小颜色是否内阴影

rgba（新的颜色值表示法）
盒子透明度表示法：opacity:0.1; filter:alpha(opacity=10)（兼容IE）;
rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度

transition动画
transition:proprety duration timing-function delay

proprety (设置过渡属性如width height background-color)

duration (过渡时间)

timing-function(运动方式一般为ease)

delay(延迟)

一般和hover属性连用

用法，在元素属性内写transition:proprety duration timing-function delay；

在hover属性中写变化后样式。

transform变形
transform：translate(100px,100px);位移

transform：scale（0.5.,0.2）;缩放

transform：rotate（30deg）；旋转

transform：skew （x，y）；斜切

与hover连用

同时在原始样式中写transition:proprety duration timing-function delay；

形成变形动画

旋转

{rotateX Y Z}

transform-style：flat or preserve-3d

transform:prespective(800px)设置透视距离。

设置初始旋转值解决跳变bug；

旋转方向判断，箭头对向自己顺时针。

tranform-origin：left top （x y）左上角为原点设置旋转中心点

backface-visibility 设置背面是否可见

animation
（annimation-play-state:）设置暂停

1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线

linear 匀速
ease 开始和结束慢速
ease-in 开始是慢速
ease-out 结束时慢速
ease-in-out 开始和结束时慢速
steps 动画步数
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n| infinite
7、animation-direction

normal 默认动画结束不返回
Alternate 动画结束后返回
8、animation-play-state 动画状态

paused 停止
running 运动
9、animation-fill-mode 动画前后的状态

none 不改变默认行为
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
both 向前和向后填充模式都被应用
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

新增标签
一般不用，因为与浏览器不匹配

国内搜索引擎不识别

1、header 页面头部、页眉
2、nav 页面导航
3、article 一篇文章
4、section 文章中的章节
5、aside 侧边栏
6、footer 页面底部、页脚

示意图

新增表单控件
一般也不用因为样式在不同浏览器下不同

新增类型：网址邮箱日期时间星期数量范围电话颜色搜索

网址:

邮箱:

日期:

时间:

星期:

数量:

范围:

电话:

颜色:

搜索: