CSS3渐变、过渡、转换、动画

1.CSS3渐变
(1)、什么是渐变
CSS3渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前，你必须使用图像来实现这些效果。但是，通过使用CSS3渐变（gradients），
你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果
更好，因为渐变（gradient）是由浏览器生成的。
CSS3定义了两种类型的渐变（gradients）：
(2)、CSS3渐变的分类
线性渐变（LinearGradients）-向下/向上/向左/向右/对角方向
径向渐变（radial-gradient）-由它们的中心定义
(3)、CSS3线性渐变
为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈
现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。
1、从上到下
下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：
#grad{background-image:linear-gradient(#e66465,#9198e5);}
2、从左到右
下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：
#grad{
height:200px;background-image:linear-gradient(tori
ght,red,yellow);
}
3、对角
下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢
过渡到蓝色：
#grad{
height:200px;background-image:linear-gradient(tobo
ttomright,red,yellow);
}
4、对角使用多个颜色结点
带有多个颜色结点的从上到下的线性渐变：
#grad{background-image:linear-gradient(red,yellow,green);
}
5、使用透明度（transparent）
CSS3渐变也支持透明度（transparent），可用于创建减弱变淡的效果。
为了添加透明度，我们使用rgba()函数来定义颜色结点。rgba()函数中的最后
一个参数可以是从0到1的值，它定义了颜色的透明度：0表示完全透明，1表
示完全不透明。
从左到右的线性渐变，带有透明度：
#grad{background-image:linear-gradient(toright,rgba(255,0,
0,0),rgba(255,0,0,1));}

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

1、颜色结点均匀分布（默认情况下）
#grad{background-image:radial-gradient(red,yellow,green);
}
2、颜色结点不均匀分布
#grad{background-image:radial-gradient(red5%,yellow15%,
green60%);}
3、设置形状
shape参数定义了形状。它可以是值circle或ellipse。其中，circle表示圆形，
ellipse表示椭圆形。默认值是ellipse。
#grad{background-image:radial-gradient(circle,red,yellow,
green);}

2.CSS3过渡
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使
用Flash动画或JavaScript。
(1)、它是如何工作？
CSS3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须
规定两项内容：
1、指定要添加效果的CSS属性
2、指定效果的持续时间。
div{
transition:width2s;-webkit-transition:width2s;/*Safari
*/}
如果未指定的期限，transition将没有任何效果，因为默认值是0。
指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户
鼠标放在一个元素上时：
div:hover{width:300px;}
要添加多个样式的变换效果，添加的属性由逗号分隔：
div{transition:width2s,height2s,transform2s;
-webkit-transition:width2s,height2s,-webkit-trans
form2s;}

(2)、过渡属性
下表列出了所有的过渡属性:
属性描述CSS
transition简写属性，用于在一个属性中设置四个过渡属3
性。
transition-property规定应用过渡的CSS属性的名称。3
transition-duration定义过渡效果花费的时间。默认是0。3
transition-timing-function规定过渡效果的时间曲线。默认是"ease"。3
transition-delay规定过渡效果何时开始。默认是0。3
transform-origin:righttop设置旋转轴心
下面的两个例子设置所有过渡属性
div{transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;/*Safari*/
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}

3.CSS32D转换
(1)、什么是CSS3转换
CSS3转换可以对元素进行移动、缩放、转动、拉长或拉伸。
转换的效果是让某个元素改变形状，大小和位置。

(2)、2D转换
在本章您将了解2D变换方法：
translate()
rotate()
scale()
skew()
matrix()
它们都在transform属性中。
(5)、translate()方法
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移
动。
div{transform:translate(50px,100px);
-ms-transform:translate(50px,100px);/*IE9*/
-webkit-transform:translate(50px,100px);/*SafariandChrome*/
}
translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100
像素。
(6)、rotate()方法
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素
逆时针旋转。
div{transform:rotate(30deg);
-ms-transform:rotate(30deg);/*IE9*/
-webkit-transform:rotate(30deg);/*SafariandChrome*/
}
rotate值（30deg）元素顺时针旋转30度。
transform-origin:righttop;设置旋转轴心
(7)、scale()方法
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的
参数：
-ms-transform:scale(2,3);/*IE9*/
-webkit-transform:scale(2,3);/*Safari*/
transform:scale(2,3);/*标准语法*/
scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。
(8)、skew()方法
包含两个参数值，。
skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
div{transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg);/*IE9*/
-webkit-transform:skew(30deg,20deg);/*SafariandChrome*/
}
skew(30deg,20deg)元素在X轴和Y轴上倾斜20度30度。

4.CSS33D转换
(1)、3D转换
CSS3允许您使用3D转换来对元素进行格式化。
在本节中，您将学到其中的一些3D转换方法：
rotateX()
rotateY()
(2)、rotateX()方法
rotateX()方法，围绕其在一个给定度数X轴旋转的元素。
div{transform:rotateX(120deg);
-webkit-transform:rotateX(120deg);/*Safari与Chrome*/
}
(3)、rotateY()方法
rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。
div{transform:rotateY(130deg);
-webkit-transform:rotateY(130deg);/*Safari与Chrome*/

(4)、3D转换其他方法
函数描述
matrix3d(n,n,n,n,n,n,定义3D转换，使用16个值的4x4矩阵。
n,n,n,n,n,n,n,n,n,n)
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转换元素的透视视图。
课堂练习：3D缩放
5.CSS3动画
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使
用Flash动画或JavaScript。
(3)、@keyframes规则
要创建CSS3动画，你需要了解@keyframes规则。
@keyframes规则是创建动画。
@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新
的样式。
(4)、CSS3动画是什么？
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
当在@keyframes创建动画，把它绑定到一个选择器（动画的名称），否则动
画不会有任何效果。
规定动画的名称，规定动画的时长
请用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%
和100%。
0%是动画的开始，100%是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义0%和100%选择器。
把"myfirst"动画捆绑到div元素，时长：5秒：
当动画为25%及50%时改变背景色，然后当动画100%完成时再次改变：

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

6.CSS3多列布局
CSS3可以将文本内容设计成像报纸一样的多列布局
(1)、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的简写
(2)、创建多列
本章节我们将学习以下几个CSS3的多列属性:
column-count属性指定了需要分割的列数。
以下实例将<div>元素中的文本分为3列：
div{
-webkit-column-count:3;/*Chrome,Safari,Opera*/
-moz-column-count:3;/*Firefox*/
column-count:3;
}
(2)、创建列与列间的间隙
column-gap属性指定了列与列间的间隙。
以下实例指定了列与列间的间隙为40像素：
div{
-webkit-column-gap:40px;/*Chrome,Safari,Opera*/
-moz-column-gap:40px;/*Firefox*/
column-gap:40px;
}
(3)、列边框
column-rule-style属性指定了列与列间的边框样式：
div{
-webkit-column-rule-style:solid;/*Chrome,Safari,Opera*/
-moz-column-rule-style:solid;/*Firefox*/
column-rule-style:solid;
}

CSS3渐变、过渡、转换、动画相关推荐

CSS3的过渡和动画
过渡和动画都是CSS3的重要部分,今天有时间,了解些相关内容并记录下. 在开始之前,首先看看CSS3的转化. 转化 CSS3的转化分为以下几种: translate 移动 rotate 旋转 scal ...
swift动画 —— 颜色渐变以及转换动画
这篇文章是通过结合使用CAGradientLayer.CABasicAnimation以及CAAnimationDelegate来达到颜色渐变以及转换的动画,下面是今天要达成的效果图: 首先创建一个C ...
CSS_渐变过渡_动画
1.渐变指的是:颜色从一个方向到另一个方向进行改变,从一个角度到另外一个角度进行改变线性渐变:方向径向渐变:从中心向四周进行改变背景产生的====由浏览器进行加载显示的====比较均匀,兼容性 ...
css3中3D转换动画效果---transform: rotate3d(x,y,z,) 3D 旋转
CSS3 允许您使用 3D 转换来对元素进行格式化. 转换属性属性描述 CSS transform 向元素应用 2D 或 3D 转换. 3 transform-origin 允许你改变被转换元素的 ...
原 CSS3中的过渡,css3之过渡
CSS3的过渡和转换 CSS3的过渡和转换 1.过渡什么是过渡呢?过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果. 过渡的属性: 属性描述 css transition 简写属性,用 ...
CSS3之2D转换、3D转换
前言:可以配合我上一期博客(过渡与动画)一起看CSS3之过渡与动画 https://blog.csdn.net/weixin_45707229/article/details/125642353 2D ...
09.CSS3渐变、过渡、转换、动画
CSS3渐变 (1).什么是渐变 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradi ...
c语言实现图片过渡效果飞入,用css3实现转换过渡和动画效果
为什么要用css动画替换js动画导致JavaScript效率低的两大原因:操作DOM和使用页面动画. 通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在 ...
过渡动画 css3渐变
1. 过渡动画:是从一个状态渐渐过渡到另一个状态可以使我们的页面边得更加的好看,动感十足,低版本浏览器不支持这个属性不影响页面布局经常和hover 一起搭配使用 /* ...

CSS3渐变、过渡、转换、动画

CSS3渐变、过渡、转换、动画相关推荐

最新文章

热门文章