首页 > 其他分享> 文章详细

03-CSS动画

2021-11-14 18:33:12 阅读：122 来源： 互联网

标签：03 repeat 定义动画 transition background CSS 属性

什么是CSS动画

使用CSS3技术来控制页面元素CSS属性的变化

CSS动画的优势

简单：不需要掌握JavaScript也能写动画
流畅：有浏览器去执行动画
减少代码量

应用场景举例

网页特效
用户交互
抽奖动画
网页小游戏

transition动画

语法：transition : (property duration timing-function delay)

transition-property ：规定设置过度效果的CSS属性名称
transition-duration ：规定完成过度效果需要多少秒或毫秒
transition-timing-function ：规定速度效果的速度曲线
transition-delay ：定义过度效果何时开始 (动画延时)

transition-property

1.transition ：

none : 没有属性会获得过渡效果

all : 所有属性都将获得过渡效果

property : 定义应用过渡效果的CSS属性名称列表，列表以逗号分隔

2.transition-duration :

ns | ms (秒|毫秒)

3.transition-timing-function ：

linear : 线性过度规定以相同速度开始至结束的过渡效果
ease ：规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in ：规定以慢速开始的过渡效果
ease-out ：规定以慢速结束的过渡效果
ease-in-out ：规定以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n) ：在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

4.transition-delay ：

ns | ms (秒|毫秒)

动画触发形式

hover ：鼠标光标指向时触发
action ：鼠标点击按住触发，松开结束
focus ：键盘 tab 键

Transform动画

语法：

transform ： none 无变化

transform-functions：

translate(x,y) : 定义2D转换
translate3d(x,y,z) ：定义3D转换
scale(x[y]) ：定义2D缩放
scale3d(x,y,z) ：定义3D缩放
rotate(angle) ：定义旋转 (deg-旋转角度单位)
skew(x,y) ：定义2D倾斜变换
perspeactive(n) ：定义透视视图；参数离对象的距离
none ：无变化

盒模型

1.标准盒模型：

w3c盒子模型的范围包括margin、border、padding、content,并且content部分不包含其他部分

2.IE盒模型：

IE盒子模型的范围包括margin、border、padding、content,和w3c盒子模型不同的是，IE盒子模型的content部分包含了padding和border

区别：标准盒模型宽高是content的宽高，不包含padding、border的宽高。

IE盒模型宽高不但包括content，还包括padding、border的宽高

文本阴影

语法： text-shadow：(水平片力量离垂直偏移量阴影虚化阴影颜色)

示例： text-shadow(2px 2px 3px red)

背景属性

background-color : css设置背景颜色

background-image : css设置图片背景

background-repeat : css设置背景图片是否重复及如何重复

background-position : css设置背景图像的位置

background-attachment : 背景图像是否固定或者随着页面的其余部分滚动

background : 简写属性，作用是将背景属性设置在一个声明中

背景重复

1 body {
2 
3     background-image: url('gradient2.png');
4 
5     background-repeat: repeat-x;
6 
7 }

属性值：

repeat 导致图像在水平垂直方向上都平铺，默认。

repeat-x 和 repeat-y 分别使背景图像只在水平或垂直方向上重复。

no-repeat 则不允许图像在任何方向上平铺。

inherit 从父元素继承。

背景固定

1 body {
2 
3     background-image:url('image.png');
4 
5     background-repeat:no-repeat;
6 
7     background-attachment:fixed;
8 
9 }