【CSS3】渐变、过渡和动画用法

已于 2023-07-13 12:47:55 修改
阅读量3.8k 收藏 13
点赞数 8
分类专栏： CSS 笔记 文章标签： css css3 animation gradients transition
于 2020-12-30 21:12:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45677671/article/details/111995506
版权

文章目录

一、CSS3渐变（Gradients）

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡（ ie9 及更早版本不支持渐变属性）

1.1、线性渐变（linear-gradients）

  • 如需创建线性渐变，您必须定义至少两个色标。色标是您要呈现平滑过渡的颜色。您还可以设置起点和方向（或角度）以及渐变效果。
background: linear-gradient(direction, color-stop1, color-stop2, ...);
  • direction 取值：
方向值（固定）角度值（任意）描述
to top0deg渐变方向为从下到上
to top right45deg渐变方向为从左下到右上
to right90deg渐变方向为从左到右
to right bottom135deg渐变方向为从左上到右下
to bottom180deg渐变方向为从上到下
to bottom left225deg渐变方向为从右上到左下
to left270deg渐变方向为从右到左
to left top315deg渐变方向为从右下到左上
  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一颗不甘坠落的流星</title>
		<style>
			div {
				width: 100px;
				height: 50px;
				border: 1px solid black;
				float: left;
				margin: 20px;
			}

			#div1 {
				background: linear-gradient(to right, red, green);
			}
			#div2 {
				background: linear-gradient(to top right, red, green, yellow);
			}
			#div3 {
				background: linear-gradient(36deg, red, green, yellow, black);
			}
		</style>
	</head>
	<body>
		<div id="div1">to right</div>
		<div id="div2">to top right</div>
		<div id="div3">36deg</div>
	</body>
	<script type="text/javascript">
	</script>
</html>

在这里插入图片描述

1.2、重复线性渐变（repeating-linear-gradient）

  • 语法：deg表示的是两两颜色之间渐变的距离，可以设百分比值，也可以设px值
background: repeating-linear-gradient(to direction/angle, color deg1, color deg2, ...);
  • 示例：
	<head>
		<meta charset="utf-8">
		<title>一颗不甘坠落的流星</title>
		<style>
			div {
				width: 100px;
				height: 50px;
				border: 1px solid black;
				float: left;
				margin: 20px;
			}

			#div1 {
				background: repeating-linear-gradient(to right, red, yellow 10%, green 20%);
			}

			#div2 {
				background: repeating-linear-gradient(to top right, red, green 30%, yellow 40%);
			}

			#div3 {
				background: repeating-linear-gradient(36deg, red, green 20px, yellow 30px, black 40px);
			}
		</style>
	</head>
	<body>
		<div id="div1">to right</div>
		<div id="div2">to top right</div>
		<div id="div3">36deg</div>
	</body>
	<script type="text/javascript"></script>
	</html>

在这里插入图片描述

1.3、径向渐变（radial-gradient）

  • 径向渐变由其中心定义，如需创建径向渐变，您还必须定义至少两个色标。
background: radial-gradient(x-deg y-deg at x-position y-position, start-color, ..., last-color);
属性描述值
x-position设置圆心的x轴位置百分比%、像素px和其他距离单位等
y-position设置圆心的y轴位置百分比%、像素px和其他距离单位等
x-deg设置x轴距离圆心的位置百分比%、像素px和其他距离单位等
y-deg设置y轴距离圆心的位置百分比%、像素px和其他距离单位等
color设置渐变的颜色百分比%、像素px和其他距离单位等
  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一颗不甘坠落的流星</title>
		<style>
			div {
				width: 100px;
				height: 50px;
				border: 1px solid black;
				float: left;
				margin: 20px;
			}

			#div1 {
				background: radial-gradient(20px 50% at 50% 50%,red, green, yellow);
			}
			#div2 {
				background: radial-gradient(20px 20px at 50% 50%,red, green, yellow);
			}
			#div3 {
				background: radial-gradient(50% 50% at 50px 25px,red, green, yellow);
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
		<div id="div3"></div>
	</body>
	<script type="text/javascript">
	</script>
</html>

在这里插入图片描述

1.4、重复径向渐变（repeating-linear-gradient）

  • 语法：deg表示的是两两颜色之间渐变的距离，可以设百分比值，也可以设px值
background: repeating-linear-gradient(x-deg y-deg at x-position y-position, color deg1, color deg2, ...);

	<head>
		<meta charset="utf-8">
		<title>一颗不甘坠落的流星</title>
		<style>
			div {
				width: 100px;
				height: 50px;
				border: 1px solid black;
				float: left;
				margin: 20px;
			}

			#div1 {
				background: repeating-radial-gradient(20px 50% at 50% 50%,red, green, yellow);
			}
			#div2 {
				background: repeating-radial-gradient(20px 20px at 50% 50%,red, green, yellow);
			}
			#div3 {
				background: repeating-radial-gradient(50% 50% at 50px 25px,red, green, yellow);
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
		<div id="div3"></div>
	</body>
	<script type="text/javascript"></script>
</html>

在这里插入图片描述

二、CSS3过渡（Transition）

CSS3 渐变（gradients）可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

  • ie9及更早版本不支持渐变属性
    在这里插入图片描述

2.1、必填属性

transition-property （属性名称）
transition-duration （花费时间）
属性描述示例
transition-property规定应用过渡的 CSS 属性的名称width、height
transition-duration定义过渡效果花费的时间默认是 0，数字格式（0.5s、1s）
  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一颗不甘坠落的流星</title>
		<style>
			div {
				width: 100px;
				height: 100px;
				border: 1px solid black;
				background-color: yellowgreen;
				float: left;
				margin: 20px;
			}

			#div1 {
				transition: width 0.5s;
			}
			#div1:hover {
				width: 150px;
			}
			#div2 {
				transition: width 1s, height 2s;
			}
			#div2:hover {
				width: 150px;
				height: 150px;
			}

		</style>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
	</body>
	<script type="text/javascript">
	</script>
</html>

在这里插入图片描述

2.2、可选属性

transition-timing-function （时间曲线）
  • transition-timing-function（可选）：规定过渡效果的时间曲线。默认是 “ease”。
属性描述
ease默认先慢，再快，再慢
linear匀速
ease-in由慢到快。
ease-out由快到慢。
ease-in-out由慢到快再到慢。
transition-delay （开始时间）

  • transition-delay（可选）：规定过渡效果何时开始。默认是 0。

  • 示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一颗不甘坠落的流星</title>
		<style>
			div {
				width: 100px;
				height: 100px;
				border: 1px solid black;
				background-color: yellowgreen;
				float: left;
				margin: 20px;
			}

			#div1 {
				transition: width 0.5s  ease-in-out;
			}
			#div1:hover {
				width: 150px;
			}
			#div2 {
				transition: width 1s ease-out 1s, height 2s  ease-in 2s;
			}
			#div2:hover {
				width: 150px;
				height: 150px;
			}

		</style>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
	</body>
	<script type="text/javascript"></script>
</html>

在这里插入图片描述

3.3、简写语法

  • 简写语法：
transition : [ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ] ;
  • 注意：transition-property 和 transition-duration 是必填选项！
  • 示例：
div{
	transition-property: width 1s;
	transition-property: width 1s linear 2s;
}

三、CSS3动画（Animate）

CSS3 动画（animate）可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

  • ie9及更早版本不支持渐变属性
    在这里插入图片描述

3.1、基础用法

@keyframes（创建动画）
/* 
	@keyframes ： 创建属性
	myfirst: 创建的动画名称，自定义
 */
@keyframes myfirst
{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}
  • 也可以使用关键字 “from” 和 “to”（代表 0％（开始）和 100％（完成））
/* 
	@keyframes ： 创建属性
	myfirst: 创建的动画名称，自定义
 */
@keyframes myfirst
{
    from   {background: red; left:0px; top:0px;}
    to  {background: yellow; left:200px; top:0px;}
}
/* 等价于 */
@keyframes myfirst
{
    0％  {background: red; left:0px; top:0px;}
    100％  {background: yellow; left:200px; top:0px;}
}
animation-name（绑定动画）
animation-duration（动画时长）
属性描述是否必填
animation-name规定 @keyframes 动画的名称。必填
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。必填
  • 示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一颗不甘坠落的流星</title>
		<style>
			div {
				width: 100px;
				height: 100px;
				border: 1px solid black;
				background-color: yellowgreen;
				float: left;
				margin: 20px;
			}

			#div1 {
				animation-name: example1;
				animation-duration: 4s;
			}
			#div2 {
				animation-name: example2;
				animation-duration: 1s;
			}
			@keyframes example1 {
			  from {background-color: red;}
			  to {background-color: yellow;}
			}
			@keyframes example2 {
			  0% {background-color: red;}
			  50% {background-color: yellow;}
			  100% {background-color: green;}
			}

		</style>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
	</body>
	<script type="text/javascript"></script>
</html>

在这里插入图片描述

3.2、可选属性

animation-timing-function（速度曲线）
  • animation-timing-function（可选）：规定动画的速度曲线。默认是 “ease”。
属性描述
ease默认先慢，再快，再慢
linear匀速
ease-in由慢到快。
ease-out由快到慢。
ease-in-out由慢到快再到慢。
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
animation-delay（何时开始）
  • animation-delay 属性规定动画开始的延迟时间， 默认是 0。
animation-fill-mode（不播放样式）

  • CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。

  • 在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

值描述
none（默认值）动画在执行之前或之后不会对元素应用任何样式。
forwards元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
backwards元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
both动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。
animation-iteration-count（播放次数）
  • animation-iteration-count：规定动画被播放的次数。默认是 1，infinite无限循环。
animation-direction（逆向播放）
  • animation-direction 属性指定是向前播放、向后播放还是交替播放动画。
值描述
normal动画正常播放（向前）。默认值
reverse动画以反方向播放（向后）
alternate动画先向前播放，然后向后
alternate-reverse动画先向后播放，然后向前
animation-play-state（当前状态）
  • animation-play-state： 规定动画是否正在运行或暂停。默认是 “running”，paused暂停。

3.3、简写语法

  • 简写语法：
transition : [ animation-name ] || [animation-duration ] || [...] ;

  • 注意：animation-name 和 animation-duration 是必填选项！

  • 示例：

div{
	animation: myfirst 5s linear;
	animation: myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst
{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}
  • 示例：
div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
/* 简写就是 */
div {
  animation: example 5s linear 2s infinite alternate;
}
一颗不甘坠落的流星
关注
专栏目录
css3渐变色
fine1998_的博客
05-09 3万+
作用：让元素在两个或多个指定的颜色之间显示平稳的过渡。 种类：分为线性渐变与径向渐变 一、线性渐变 1、向下/向上/向左/向右/对角方向 语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...); direction属性值： to bottom 默认值，从上到下 to top 从左到右 to left
css3的动画效果
xuxuechao6的博客
11-11 327
CSS3 @keyframes 规则 如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。 @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 浏览器支持 属性 浏览器支持 @keyframes      
CSS3渐变属性
葉無聞
05-28 8241
渐变可以使得元素背景更加有灵性并具有生气，虽然我们可以使用背景图片来呈现渐变效果，但却是不够灵活，当想要改变颜色时需要使用图片编辑器重新编辑，而渐变则可以在代码中直接改变颜色就可以了。CSS3提供了两种渐变方式，分别是线性渐变（linear-gradient）和径向渐变（radial-0gradien）。 一、线性渐变（linear-gradient） 线性渐变就是沿着某个方向进行颜色上...
CSS3的一些动画展示
最新发布
2401_86340568的博客
07-22 1329
1. 了解‘过渡’ 2D转换2. 案例1. 1当用户将鼠标悬停在类为.box元素的泡泡背景上时，背景图像的位置会发生变化，并且这种变化会在 2 秒内平滑过渡。背景图像在鼠标悬停时移动，给人一种动态的视觉体验。十分丝滑，且简单。这段代码的总体效果是，我们将鼠标悬停在页面的任意位置时，位于左下角的小火煎会平滑地移动到右上角并旋转30°，同时背景颜色保持不变。
css3 渐变
weixin_33742618的博客
08-09 153
css3 ps: css越来越真正的像一门语言了，css已经有变量了，刚刚看到文档中。一个实验性质的功能。 渐变 渐变分为两种渐变，一种是线性渐变，一种是径向渐变 线性渐变 线性渐变为向上，向下，向左，向右两种渐变方式。 linear-gradient()函数 此为css的一个函数。线性渐变由一个轴即梯度线构成。其上的每个点具有两种或多种颜色。其轴上的每个点具有独立的颜色。为了构建出平滑的渐变，该...
浏览器前缀/ css3 渐变 /
hello world
05-11 1137
浏览器私有前缀 为了浏览器兼容新的css3属性 -ms- -ms-box-shadow IE浏览器专属的CSS属性需添加-ms-前缀 -moz- -moz-box-shadow 所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属性需添加-moz-前缀 -o- -o-box-shadow Opera浏览器专属的CSS属性需添加-o-前缀 -webkit- -webkit-box-shadow 所有基于Web...
CSS3渐变
woyaodangxiaodi的博客
12-16 555
css3、渐变
纯css3渐变背景动画特效.zip
10-15
总的来说，这个压缩包提供了一种利用CSS3实现背景渐变动画的方法，对于想要提升网页设计视觉效果的开发者和设计师来说，这是一个非常有价值的资源。通过学习和应用这些代码，你可以更好地理解和掌握CSS3的新特性，并...
6种CSS3平滑过渡的渐变背景颜色
12-13
在本文中，我们将深入探讨如何使用CSS3来创建平滑过渡的渐变背景颜色效果，主要涉及CSS3的圆形渐变和线性渐变。这些技术不仅为网站设计增加了视觉吸引力，还能提升用户体验，使页面元素在状态变化时更加平滑自然。 ...
CSS3火警提示图标动画特效
07-24
【CSS3火警提示图标动画特效】是一种利用CSS3的强大功能来实现的视觉效果，它通过CSS3的animation属性创建了一种生动的火警图标，伴随着声波振动的动画，以此来模拟火警报警器的工作状态，提升用户体验，增强警示...
12种炫酷CSS3图片切换过渡效果
12-29
在“12种炫酷CSS3图片切换过渡效果”这个主题中，我们将深入探讨这些效果的实现方法和应用场景。 1. **滑动切换**：这种效果通常用于轮播图，图片沿水平或垂直方向平滑滑动，提供了一种流畅的视觉过渡。通过`...
CSS3渐变、过渡、转换、动画
Baiqicute的博客
11-21 1818
CSS3渐变 (1)、什么是渐变 CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。 CSS3 定义了两种类型的渐变（gradients）： (2)、CSS3渐变的分类 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角
25个CSS3 渐变和动画效果教程
weixin_30273501的博客
07-21 125
随着最新版CSS3渐变和动画功能发布，Web开发者在开发的过程中有了更多的选择。实际上，已经有了一些替代的技术，目的都是使网站的建设变得简易，高效和快速。不过CSS3所提供的渐变功能有着显著的优点，特别是对于新手网站管理员。这使得他们有更好的体验，而不仅仅是网站的设计或者开发人员。本文所收集的CSS3动画教程，你都不需要任何代码开发、flash动画或者JavaScript方面的知识，就能感受到它的...
CSS3的渐变（Gradients）
Sefan的博客
03-29 1139
逆战班所学皮毛之渐变，css3渐变可以实现多种颜色之间的过渡，诸如线性渐变、径向渐变，线性渐变又可细分为单一方向渐变、对角渐变、角度渐变，通过设置渐变的位置，形状，尺寸，颜色，从此花花绿绿的世界不是梦！
CSS3 渐变
m0_72759446的博客
10-18 993
除了简单的过渡效果，还可以在渐变中定义多个颜色和位置，控制渐变的方向、角度和形状，以实现更复杂的效果。渐变是CSS3提供的强大功能之一，可以为网页添加更丰富的视觉效果，提升用户体验。这个例子会在元素的背景上创建一个以中心点为起点，从红色到黄色的径向渐变。这个例子会在元素的背景上创建一个从红色到黄色的线性渐变。
CSS3学习，常用常记（渐变）
Sinhaeng_Hhjian
03-24 372
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。 CSS3 定义了两种类型的渐变（gradients）： 线性渐变（Linear Gradi...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一颗不甘坠落的流星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值