css3随笔

时间：2021-12-17 06:02:15

1 rgba和opacity的区别

RGBA即红色R+绿色G+蓝色B+通道Alpha

语法:

R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数| 百分数

A：透明度。取值0~1之间

RGB色彩模式（也翻译为“红绿蓝”，比较少用）是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。

opacity后代元素会随着一起具有透明性，所以我们Opacity中的字随着透明值下降越来越看不清楚，而RGBA不具有这样的问题，RGBA比元素设置CSS的透明度更好，因为单独的颜色可以在不影响整个元素的透明度，他不会影响到元素其他的属性，比如说边框，字体同时也不会影响到其他元素的相关透明度。

opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。

2 animation动画

div

{

    animation: myfirst 20s ease-out infinite alternate;

    -webkit-animation: myfirst 20s ease-out infinite alternate; /* Safari 与 Chrome */

}

@keyframes myfirst

{

        0%,25% {        left: 0px;       }

        30%,50% {       left: -700px;    }

        55%,75% {       left: -1400px;    }

        80%,100% {      left: -2100px;    }

}

　　

属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3
animation-timing-function: value;

animation-timing-function使用的数学函数，称为三次贝塞尔曲线，速度曲线。使用此函数，您可以使用您自己的值，或使用预先定义的值之一：

linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。

animation-direction 属性定义是否循环交替反向播放动画。

注意：如果动画被设置为只播放一次，该属性将不起作用。

normal 默认值。动画按正常播放。
reverse 动画反向播放。
alternate 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。

通过 @keyframes 规则，能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

指定至少这两个CSS3的动画属性绑定向一个选择器：

  • 规定动画的名称
  • 规定动画的时长

3 transform(转换）

div

{

transform: rotate(45deg);

transform-origin:20% 40%;

}

　　

transform-Origin属性允许您更改转换元素的位置。

2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。

默认值是50% 50%;意思是这个元素规定的高宽的50%。即中心。

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 转换元素的透视视图。

相关文章