css 渐变、过渡、动画

CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。

两种:

线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向

径向渐变(radial-gradient)- 由它们的中心定义

1、CSS3 线性渐变

为了创建一个线性渐变,你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)。

下面的实例演示了从左边开始的线性渐变。起点是红色,慢慢过渡到蓝色:

#grad {

height: 200px; background-image: linear-gradient(to right, red , yellow);

}

对角

下面的实例演示了从左上角开始(到右下角)的线性渐变。起点是红色,慢慢过渡到蓝色:

#grad {

height: 200px; background-image: linear-gradient(to bottom right, red, yellow);

}

2、CSS3 径向渐变

径向渐变由它的中心定义。

为了创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(圆形或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。

1、 颜色结点均匀分布(默认情况下)

#grad { background-image: radial-gradient(red, yellow, green); }

2、颜色结点不均匀分布

#grad { background-image: radial-gradient(red 5%, yellow 15%, green 60%); }

3、设置形状

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。

#grad { background-image: radial-gradient(circle, red, yellow, green); }

 

 

3、CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点,必须规定两项内容:

1、指定要添加效果的CSS属性

2、指定效果的持续时间。

div { transition: width 2s; }

如果未指定的期限,transition将没有任何效果,因为默认值是0。

指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时:

div:hover { width:300px; }

过渡属性
下表列出了所有的过渡属性:

属性

描述

CSS

transition

简写属性,用于在一个属性中设置四个过渡属性。

3

transition-property

规定应用过渡的 CSS 属性的名称。

3

transition-duration

定义过渡效果花费的时间。默认是 0。

3

transition-timing-function

规定过渡效果的时间曲线。默认是 "ease"。匀速linear

3

transition-delay

规定过渡效果何时开始。默认是 0。

3

注意:transform-origin: right top 设置旋转轴心

2d转化:

translate() 平移
rotate() 旋转
scale() :scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:
skew():包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。
matrix():
matrix()方法和2D变换方法合并成一个。

matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。

3d转化

函数 描述
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
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 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。
重点:动画 animation

创建动画:@keyframes 动画名{}

属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3
动画设置所有的属性:

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari 与 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

 


6.CSS3多列布局

CSS3 可以将文本内容设计成像报纸一样的多列布局

、CSS3 多列属性
属性

描述

column-count

指定元素应该被分割的列数。

column-fill

指定如何填充列

column-gap

指定列与列之间的间隙

column-rule

所有 column-rule-* 属性的简写

column-rule-color

指定两列间边框的颜色

column-rule-style

指定两列间边框的样式

column-rule-width

指定两列间边框的厚度

column-span

指定元素要跨越多少列

column-width

指定列的宽度,尽量不要与column-count同时使用

columns

设置 column-width 和 column-count 的简写
————————————————
版权声明:本文为CSDN博主「paidaboluo」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/paidaboluo/article/details/121453360

上一篇:playerfeast 玩家盛宴制度模式开发


下一篇:nodejs