HTML +CSS 学习(五)

HTML +CSS 学习(五)

文章目录

  • HTML +CSS 学习(五)
    • 1、浏览器前缀?
    • 2、transition 过渡?
    • 3、transform变形?
    • 4、animation 动画?
    • 5、animate.css?
    • 6、3D操作?
    • 7、CSS3提供了扩展背景样式?
    • 8、CSS3渐变?

1、浏览器前缀?

CSS3去兼容不同的浏览器,针对旧的浏览器做兼容,新浏览器基本不需要添加前缀。

2、transition 过渡?

transition-property : 规定设置过渡效果的CSS属性的名称。
transition-duration : 规定完成过渡效果需要多少秒或毫秒。
transition-delay : 定义过渡效果何时开始。 ( 延迟(数值为正数),也可以提前(数值为负数) )
transition-timing-function : 规定速度效果的速度曲线。

注:不要加到hover上。

3、transform变形?

translate : 位移
translateX
translateY
translateZ ( 3d )

scale : 缩放 (值是一个比例值,正常大小就是1,会已当前元素中心点进行缩放)
scaleX
scaleY
scaleZ (3d)

rotate : 旋转 ( 旋转的值,单位是角度 deg )
rotateX (3d)
rotateY (3d)
rotateZ ( 和rotate是等级关系,那正值按顺时针旋转,负值按逆时针旋转 )

skew : 斜切
skewX : 单位也是角度,正值向左倾斜,负值向右倾斜。
skewY

transform的注意事项:
1. 变形操作不会影响到其他元素。
2. 变形操作只能添加给块元素,但是不能添加给内联元素。
3. 复合写法,可以同时添加多个变形操作。
执行是有顺序的,先执行后面的操作,再执行前面的操作。
translate会受到 rotate、scale、skew的影响
4. transform-origin : 基点的位置
x y z(3d)

4、animation 动画?

animation-name : 设置动画的名字 (自定义的)
animation-duration : 动画的持续时间
animation-delay : 动画的延迟时间
animation-iteration-count : 动画的重复次数 ,默认值就是1 ,infinite无限次数
animation-timing-function : 动画的运动形式

注:
1. 运动结束后,默认情况下会停留在起始位置。
2. @keyframes : from -> 0% , to -> 100%

animation-fill-mode : 规定动画播放之前或之后,其动画效果是否可见。
none (默认值) : 在运动结束之后回到初始位置,在延迟的情况下,让0%在延迟后生效
backwards : 在延迟的情况下,让0%在延迟前生效
forwards : 在运动结束的之后,停到结束位置
both : backwards和forwards同时生效

animation-direction : 属性定义是否应该轮流反向播放动画。
alternate : 一次正向(0%100%),一次反向(100%0%)
reverse : 永远都是反向 , 从100%~0%
normal (默认值) : 永远都是正向 , 从0%~100%

5、animate.css?

一款强大的预设css3动画库。
官网地址:https://daneden.github.io/animate.css/

基本使用:
animated : 基类(基础的样式,每个动画效果都需要加)
infinite : 动画的无限次数

6、3D操作?

transform:
rotateX() : 正值向上翻转
rotateY() : 正值向右翻转
translateZ() : 正值向前,负值向后
scaleZ() : 立体元素的厚度

3d写法
scale3d() : 三个值 x y z
translate3d() : 三个值 x y z
rotate3d() : 四个值 0|1(x轴是否添加旋转角度) 0|1(y轴是否添加旋转角度) 0|1(z轴是否添加旋转角度) deg

perspective(景深): 离屏幕多远的距离去观察元素,值越大幅度越小。

perspective-origin : 景深-基点位置,观察元素的角度。

transform-origin: center center -50px;   (Z轴只能写数值,不能写单词)

transform-style : 3D空间
    flat  (默认值2d)、preserve-3d   (3d,产生一个三维空间)

backface-visibility : 背面隐藏
    hidden、visible (默认值)

7、CSS3提供了扩展背景样式?

background-size : 背景图的尺寸大小
cover : 覆盖
contain : 包含
background-origin : 背景图的填充位置
padding-box (默认)
border-box
content-box
background-clip : 背景图的裁切方式
padding-box
border-box (默认)
content-box

注:复合样式的时候,第一个是位置,第二个是裁切

8、CSS3渐变?

  1. 线性渐变 -> linear-gradient是值,需要添加到background-image属性上

注:渐变的0度是在页面在下边,正值会按照顺时针旋转,负值按逆时针旋转。

  1. 径向渐变 -> radial-gradient

  2. 字体图标?

    font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中。

    好处:
    1.可以非常方便的改变大小和颜色
    font-size color
    2.放大后不会失真
    3.减少请求次数和提高加载速度
    4.简化网页布局
    5.减少设计师和前端工程师的工作量
    6.可使用计算机没有提供的字体

    使用:
    @font-face语法

        像.woff等文件都是做兼容平台处理的, mac、linux等。
    

你可能感兴趣的:(HTML,+,CSS)