【CSS3】渐变、过渡和动画用法
文章目录
-
- 一、CSS3渐变（Gradients）
-
- 1.1、线性渐变（linear-gradients）
- 1.2、重复线性渐变（repeating-linear-gradient）
- 1.3、径向渐变（radial-gradient）
- 1.4、重复径向渐变（repeating-linear-gradient）
- 二、CSS3过渡（Transition）
-
- 2.1、必填属性
-
- transition-property （属性名称）
- transition-duration （花费时间）
- 2.2、可选属性
-
- transition-timing-function （时间曲线）
- transition-delay （开始时间）
- 3.3、简写语法
- 三、CSS3动画（Animate）
-
- 3.1、基础用法
-
- @keyframes（创建动画）
- animation-name（绑定动画）
- animation-duration（动画时长）
- 3.2、可选属性
-
- animation-timing-function（速度曲线）
- animation-delay（何时开始）
- animation-fill-mode（不播放样式）
- animation-iteration-count（播放次数）
- animation-direction（逆向播放）
- animation-play-state（当前状态）
- 3.3、简写语法
一、CSS3渐变（Gradients）
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡（ ie9 及更早版本不支持渐变属性）
1.1、线性渐变（linear-gradients）
- 如需创建线性渐变，您必须定义至少两个色标。色标是您要呈现平滑过渡的颜色。您还可以设置起点和方向（或角度）以及渐变效果。
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction取值：
| 方向值（固定） | 角度值（任意） | 描述 |
|---|---|---|
| to top | 0deg | 渐变方向为从下到上 |
| to top right | 45deg | 渐变方向为从左下到右上 |
| to right | 90deg | 渐变方向为从左到右 |
| to right bottom | 135deg | 渐变方向为从左上到右下 |
| to bottom | 180deg | 渐变方向为从上到下 |
| to bottom left | 225deg | 渐变方向为从右上到左下 |
| to left | 270deg | 渐变方向为从右到左 |
| to left top | 315deg | 渐变方向为从右下到左上 |
- 示例：
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 rightdiv>
<div id="div2">to top rightdiv>
<div id="div3">36degdiv>
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 rightdiv>
<div id="div2">to top rightdiv>
<div id="div3">36degdiv>
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;
}