菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 王涛-20221024-H5C32 [打印本页]

作者: 黑桃K 时间: 2022-10-25 00:15
标题: 王涛-20221024-H5C32

伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要新增html标签，从而简化html结构

注意

1.before和after创建的元素是行内元素

2.创建的元素我们在html结构树里面找不到，所有叫伪元素

3. before和after必须有content属性

4、before是在父元素内容的前面创建元素，after是在父元素内容的后面插入元素

5、伪元素选择器和元素选择器的权重一样，都是1

CSS3过渡

过度可以在不使用flash或者js前提下可以实现从一种样式转换成另一种样式效果（IE9+）

语法

transtion：
要过渡的属性花费的时间时间曲线何时开始

1.要过的属性：想要变化的CSS属性（宽高，背景颜色，内外边距等，如果想变化所有属性直接写一个all就可以）

2.花费的时间：单位是秒，需要写单位

3.运动曲线：默认的值是（ease可省略）

4.何时开始（可以省略）：单位是秒，必须要写，可以设置延迟触发的时间，默认0s

CSS3的2D位移

属性：transform（像素值）

对盒子的X轴Y轴进行位移

transform:translate(x,y);

对盒子的X轴进行位移

transform:translateX()

对盒子的Y轴进行位移

transform:translateY()

特性：

1.translate不会影响其他元素的位置（没有脱标）

2.translate的值如果是百分比，是以自身宽高来决定的

3.translate对行内元素无效

利用translate设置盒子水平垂直居中

1.position：absolute

2.left：50%

3.top：50%

4.transfrom：translate（50%，50%）

CSS3的2D旋转

translate：rotate（*deg）

使用该属性值可以对元素进行旋转设置

*值如果是正数就是顺时针，负值时逆时针

transform-origin设置旋转中心点

transform-origin:x,y；

1.用方位名词设置中心点

2.利用像素值来设定元素的中心点（以左上角为起始点）

当单位为具体的像素值时，距离的相对起始位置在元素的左上角

CSS3的2D缩放

transform:scale(x,y)；里面的x和y代表对应轴缩放的倍数

使用方法

1.translate:scale(1,1)；缩放一倍，没有变化

2.translate:scale(2,3)；x放大2倍，y放大3倍

3.translate:scale(2)；放大两倍

4.translate:scale(.5,.5)；缩小0.5倍

scale缩放和width/height设置盒子大小的区别

1.直接用width/height设置时，上边沿不变，沿上边沿朝下方改变宽高，会对其他盒子进行印象（没脱标）

2. scale进行缩放时，默认是以盒子中心点来进行缩放的，不会对其他盒子产生影响

CSS3的动画制作

动画序列

1、0%是动画的开始，100%是动画的结束，这样的规则叫做动画序列

2、在@keyframes中来规定css的样式，keyframes叫做关键帧

3、可以用百分比来规定变化发生的时间，或者用关键字from和to来规定，等同于0%-100%

动画的使用步骤

1、定义动画

2、调用动画

属性
说明
@keyframes
定义动画
animation
所有动画的简写属性，但是animation-play-state属性不包含在内
animation-name
调用@keyframes的动画名称（必须值）
animation-duration
规定完成一个周期的动画所花费的时间，默认是0（必须值），单位是秒或者毫秒
animation-timing-function
规定动画速度曲线，默认是ease
animation-delay
规定动画何时开始，默认是0，单位是秒或者毫秒
animation-interation-count
规定动画播放的次数，默认是1，如果是无线循环可以设置infinite
animation-direction
规定动画是否在下一个周期进行逆向播放，默认“normal”如果是你想播放，则设置为alternate
animation-play-state
规定动画是否正在运行或停止。默认running，暂停是paused
animation-fill-mode
规定动画结束后的状态，保持结束后的状态forwards，如果要回到初始位置就是backwards

animation-timing-function属性：

steps()：步长，就是分几步来完成动画，如果有了steps(),就不需要写 ease或者linear等运动曲线值

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)