css 渐变、过渡、动画

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

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

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

设置形状-shape -----circle 表示圆形,ellipse 表示椭圆形 默认值是 ellipse


 

添加效果CSS属性

效果持续时间

transition默认值是0。

过渡属性

transition

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

transition-property

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

transition-duration

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

transition-timing-function

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

transition-delay

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

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

2d转化:

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

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


 

3d转化

函数 描述
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)16 个值的 4x4 矩阵。
translate3d(x,y,z)  3D 转化。
translateX(x)  X 轴的值。
translateY(y)  Y 轴的值。
translateZ(z)  Z 轴的值。
scale3d(x,y,z) 缩放转换。
scaleX(x)  X 轴的值。
scaleY(y) Y 轴的值。
scaleZ(z)  Z 轴的值。
rotate3d 旋转
rotateX--  X 轴旋转
rotateY--  Y轴旋转
rotateZ-  Z轴旋转

perspective(n)-定义 3D 转换元素的透视视图


 

@keyframes -规定动画
animation- 所有动画属性的简写属性

animation-name-  @keyframes 动画的名称

animation-duration -动画完成一个周期花费的秒或毫秒

animation-timing-function -动画的速度曲线

animation-fill-mode- 当动画不播放时

animation-delay- 动画何时开始

animation-iteration-count- 动画被播放的次数

animation-direction -动画是否在下一周期逆向地播放

animation-play-state -动画是否正在运行或暂停

动画设置所有的属性:



6.CSS3多列布局

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

CSS3 多列属性

column-count-元素应该被分割的列数。

column-fill-如何填充列

column-gap-列与列之间的间隙

 column-rule-* 属性的简写

column-rule-color-两列间边框的颜色

column-rule-style-两列间边框的样式

column-rule-width-两列间边框的厚度

column-span-元素要跨越多少列

column-width-列的宽度,不要与column-count同时使用

上一篇:使用turtle库绘制红色五角星图形


下一篇:俄罗斯方块游戏(选做)