渐变、过渡、转换、动画

最新推荐文章于 2024-09-19 16:37:46 发布

敲敲敲之

最新推荐文章于 2024-09-19 16:37:46 发布

阅读量1.2k

点赞数 41

分类专栏： HTML CSS 文章标签：前端 css html css3

本文链接：https://blog.csdn.net/m0_72498273/article/details/140624723

版权

HTML CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1. CSS3渐变

CSS3 线性渐变

backgroud-image:linear-gradient（梯度变化曲线）()

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

1、从上到下

下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：

#grad { background-image: linear-gradient(#e66465, #9198e5); }

2、从左到右

#grad {

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

}

3、对角

#grad {

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

}

4、使用透明度（transparent）

CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

从左到右的线性渐变，带有透明度：

#grad {background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); }

CSS3 径向渐变

backgroud-image:radial-gradient()

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

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[ˈsɜːkl] 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

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

CSS3过渡

transition: 过渡属性名称过渡效果花费的时间时间曲线延迟

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

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

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

在css3中新增属性有浏览器的兼容性

适用于谷歌和safar 属性前边加-webket-

适用于欧鹏属性前加-o-

适用于火狐属性前加-moz-

适用于IE9+ 属性前加-ms-

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property ˈprɒpəti/	规定应用过渡的 CSS 属性的名称。
transition-duration djuˈreɪʃn/	持续时间定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease慢速开始"。linear匀速时间曲线网站（cubic-bezier.com）可以使用贝塞尔曲线 transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
transition-delay /dɪˈleɪ/	延迟规定过渡效果何时开始。默认是 0。

综合设置

要过渡的css属性周期时间曲线延迟

-webkit-transition:background-color 3s linear 1s,width 10s linear 2s;

CSS3转换

（2D） CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸

transform:

translate(x轴10px，y轴20px）；移动 x轴向右移动10像素向下20像素

rotate（30dge）；旋转顺时针转动30度

transform-origin（起源）:right top 设置旋转轴心

scale（2，3）；缩放 x轴放大2倍，y轴放大3倍

skew（30deg，20deg）；倾斜元素在x轴y轴倾斜30度20度

skewX();表示只在X轴(水平方向)倾斜。

skewY();表示只在Y轴(垂直方向)倾斜。

div { transform: rotate(30deg);

-ms-transform: rotate(30deg); /* IE 9 */

-webkit-transform: rotate(30deg); /* Safari and Chrome */

}

transform的translate百分比单位是相对于元素自身的尺寸进行计算的。

例如，如果一个元素的宽度为100px，如果使用translateX(50%)，那么元素将会在水平方向上向右移动50px（即100px的一半）

（3D) CSS3 允许您使用 3D 转换来对元素进行格式化。

otateX()方法，围绕其在一个给定度数X轴旋转的元素。

rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

(1) 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 转换元素的透视视图。，如果一个盒子延x轴旋转90度，那么他就看不到了，设置从何处查看一个元素的角度，属性值元素距离视图的距离，以像素计

CSS3动画

1定义动画属性

属性	描述
@keyframes（关键帧）	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 "ease"。（linear匀速） cubic-bezier曲线 animation: move2 3s cubic-bezier(.31,1.32,.72,.27)
animation-fill-mode	设置动画最终停留的状态backwards:停留在初始状态 forwards/both:停留在结束状态/
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。infinite（无穷的）重复播放
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。reverse反转 alternate先正后返 alternate-reverse先反后正
animation-play-state steɪt/状态	规定动画是否正在运行或暂停。默认是 "running"。paused