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 的简写 |
css 渐变、过渡、动画相关推荐
- 13渐变 过渡 动画 利用多张图片制作动图
13渐变 过渡 动画 利用多张图片制作动图 一.渐变 线性渐变 设置普通渐变background:linear-gradient(颜色1,颜色2)设置渐变比例background:linear-gra ...
- CSS(二)——Flex布局 边框 渐变 过渡 动画
学习CSS第二周的总结 一. Flex布局 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结束位 ...
- css滤镜属性渐变_使用滤镜对CSS渐变进行动画处理
css滤镜属性渐变 Officially, gradients can't yet be animated. However, using CSS filters, you can animate t ...
- CSS 渐变背景动画的实现
前言 渐变是CSS函数,例如linear-gradient()可以创建一个沿着直线的两种或多种颜色之间的渐进过渡的背景图像,请注意这是一种特殊的图像.在CSS中background-image是支持离 ...
- 纯css 渐变背景色动画 文字贴合环绕图片
渐变背景色动画 渐变色背景是不能通过 纯css 动画设置的.所以换一种思路通过 background-size 设置背景的大小,让我们渐变色背景一开始的时候不展示全部的背景,然后通过css动画改变 b ...
- vue-transition过渡动画
如何给Vue控制的元素添加过渡动画 vue-transitions 1.1 将需要执行动画的元素放到transition组件中 1.2 当transition组件中的元素显示时会自动查找.v-ente ...
- CSS高级篇——过渡动画
CSS Transitions 让我们不写一行 JavaScript 代码也能实现过渡动画. 举一个最简单的例子: a:link {color: hsl(36,50%,50%); } a:hover ...
- css3-12 transition+css或transform实现过渡动画
css3-12 transition+css或transform实现过渡动画 一.总结 一句话总结:首先要设置hover后的效果,然后在transition里面指定执行哪些样式和执行时间为多长. 1. ...
- css 入场动画_React系列十四 React过渡动画
在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验. 当然,我们可以通过原生的CSS来实现这些过渡动画,但是React社区为我们提供了react-transition-g ...
最新文章
- 【转】卡尔曼滤波算法详细推导(相当值得一看)
- MapReduce将小文件合并成大文件,并设置每个切片的大小的案例
- SAP Marketing Cloud的profile dashboard
- 异常的概念和Java异常体系结构
- Thinkphp开发时关闭缓存的方法
- MapReduce的模式、算法和用例
- struts1 mysql config_详解Struts1中的struts-config.xml配置文件【一】
- C++ Primer 读书笔记 - 第二章
- superset报错
- BZOJ1013球形空间产生器sphere 高斯消元
- 「数据新星」Databricks 崛起启示录
- 手机电阻屏和电容屏哪个好?电容屏和电阻屏的区别!
- startup_stm32xxxx.s文件问题
- vue switch组件
- Android listview图片刷新闪烁
- 【李宏毅机器学习】TransFormer框架基础储备知识(p51) 学习笔记 | 全程手码,放心食用
- oracle触发器调试日志,Oracle 11g 触发器调试记录Error: PLS-00201: identifier'SYS.DBMS_SYSTEM' must be declared...
- KST-51单片机利用HC138芯片驱动数码管显示
- 转:技术牛人画技术配图的经验分享
- 2021年上半年软件设计师考试评估解析