css动画
1.1. 过渡动画 transtion:
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点,必须规定两项内容:
- 指定要添加效果的CSS属性
- 指定效果的持续时间。
1.2. transition 简写属性,用于在一个属性中设置四个过渡属性。分写属性:
-
transition-property:规定应用过渡的 CSS 属性的名称,添加多个属性,逗号隔开
必填
-
transition-duration: 定义过渡效果花费的时间。默认是 0s 需要指定
-
transition-timing-function:规定过渡效果的时间曲线。默认是 “ease”。取值如下:
ease ease-in ease-in-out ease-out
-
transition-delay:规定过渡效果何时开始。默认是 0s
1.3. 关键帧动画
- 定义动画如:
@keyframes name{
0%{
background: red;
}
50%{
background: pink;
}
100%{
background: orange;
}
}
调用动画:
animation: name duration timing-function delay iteration-count direction fill-mode
所有动画属性的简写属性,除了 animation-play-state 属性。
分写属性:
-
animation-name 规定 @keyframes 动画的名称。
-
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
-
animation-timing-function 规定动画的速度曲线。默认是 “ease”。
-
animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样
式。 -
animation-delay 规定动画何时开始。默认是 0。
-
animation-iteration-count 规定动画被播放的次数。默认是 1。
-
infinite 无限循环
-
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。 reverse 反向
-
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。
背景background
合写属性:
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit
分写属性:
- background-color 指定要使用的背景颜色
- background-position 指定背景图像的位置
- background-size 指定背景图片的大小
- background-image 指定要使用的一个或多个背景图像
- background-repeat 指定如何重复背景图像
- background-origin 指定背景图像的定位区域
- background-clip 指定背景图像的绘画区域
- background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
- scroll 背景图片随页面的其余部分滚动。这是默认fixed 背景图像是固定的
box-sizing 盒模型
- box-sizing : border-box (IE盒模型)
- box-sizing: content-box (标准盒模型)
计算元素在页面中占的空间:
- w3c标准盒模型: content + padding + border+ margin = 实际占的空间
默认情况下; content = css中定义的 width - IE盒模型: [content + padding + border] + margin = 实际占的空间
content + padding + border = css中定义的width
应用:
- IE盒模型,指定元素的宽,页面空间的宽需准确计算
CSS3 渐变(gradients)
CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡;
- linear-gradient 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
语法:
- background: linear-gradient(direction, color-stop1, color-stop2, …);
- radial-gradient 径向渐变(Radial Gradients)- 由它们的中心定义
- background: radial-gradient([center, shape size,] start-color, …, last-color);
- shape值可以是 circle 或 ellipse
注意:
1、会使用线性渐变,径向渐变(有兼容问题)
2、会取消过渡
3、会配合background-size ,background-repeat 使用
文本效果相关的css属性
- text-overflow 规定当文本溢出包含元素时发生的事情。
- text-shadow 向文本添加阴影。
- white-space 指定元素内的空白怎样处理。 nowrap/normal
- word-break 规定非中日韩文本的换行规则。 normal 浏览器默认的换行规则。 break-all 允许在单词内换行。keep-all 只能
在半角空格或连字符处换行。 - word-wrap : 允许对长的不可分割的单词进行分割并换行到下一行。; break-word / normal
2d 转换
transform 属性的取值:
- translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素。
- translateX(n) 定义 2D 转换,沿着 X 轴移动元素。
- translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。
- scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。
- scaleX(n) 定义 2D 缩放转换,改变元素的宽度。
- scaleY(n) 定义 2D 缩放转换,改变元素的高度。
- rotate(angle) 定义 2D 旋转,在参数中规定角度。
- skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴。
- skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。
- skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。
媒体类型
@media 媒体类型允许你指定文件将如何在不同媒体呈现。
语法:
多媒体查询由多种媒体组成,可以包含一个或多个表达式,表达式根据条件是否成立返回 true 或 false。
@media [not|only] mediatype [ and (expressions)] {
CSS 代码...;
}
你也可以在不同的媒体上使用不同的样式文件:注意: 空格;
3d转换:
- transform: translate([,]?) rotate() - scale([,]?) skew
- translate3d(x,y,z) 定义 3D 转化。
- translateX(x) 定义 3D 转化,仅使用用于 X 轴的值。
- translateY(y) 定义 3D 转化,仅使用用于 Y 轴的值。
- translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值。
- scale3d(x,y,z) 定义 3D 缩放转换。
- scaleX(x) 定义 3D 缩放转换,通过给定一个 X 轴的值。
- scaleY(y) 定义 3D 缩放转换,通过给定一个 Y 轴的值。
- scaleZ(z) 定义 3D 缩放转换,通过给定一个 Z 轴的值。
- rotate3d(x,y,z,angle) 定义 3D 旋转。 [x,y,z] 类型,可以是0到1之间的数值
- rotateX(angle) 定义沿 X 轴的 3D 旋转。
- rotateY(angle) 定义沿 Y 轴的 3D 旋转。
- rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
- transform-origin 允许你改变被转换元素的位置。
- transform-style 规定被嵌套元素如何在 3D 空间中显示。
- perspective 规定 3D 元素的透视效果。