数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何创建 CSS3 关键帧动画？
要在 CSS3 中创建关键帧动画，请定义各个关键帧。关键帧将控制 CSS3 中的中间动画步骤。关键帧是网页动画的规则。动画属性与关键帧一起使用来控制动画。让我们看看语法：
语法
@keyframes animationname {selector {styles;}}
上面，
animationname - 动画的名称。
selector - 这是关键帧选择器，即动画持续时间 %。
styles - 这些是 CSS 样式属性
将矩形动画化为圆形
创建一个矩形并将其动画化为圆形。动画持续时间设置为 5 秒。from 和 to 表示动画从当前样式更改为新样式。以下是使用 CSS3 创建关键帧动画的示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: rgb(218, 78, 36);
border: 4px solid rgb(0, 0, 0);
position: relative;
animation: circleMove 5s infinite;
}
@keyframes circleMove {
from {
left: 0px;
border-radius: 0px;
}
to {
left: 200px;
border-radius: 50%;
}
}
</style>
</head>
<body>
<h1>CSS3 keyframe example</h1>
<div></div>
</body>
</html>
一个动画包含多个选择器
设置了一个包含多个选择器的动画。选择器的 CSS 样式是 top 属性。为每个选择器设置动画持续时间的百分比。我们创建了一个矩形并对其进行了动画处理：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: blue;
border: 5px solid red;
position: relative;
animation: myrct 4s infinite;
}
@keyframes myrct {
0% {top: 0px;}
20% {top: 150px;}
40% {top: 80px;}
60% {top: 50px;}
80% {top: 80px;}
100% {top: 150px;}
}
</style>
</head>
<body>
<h1>CSS3 keyframe example</h1>
<p>Check the below animation...</p>
<div></div>
</body>
</html>
一个动画包含多个选择器和样式
不仅可以选择器，还可以使用关键帧每次更改样式。设置的样式包括 top、bottom、left 属性。此外，在动画的每个步骤中，背景颜色和文本颜色都会频繁变化：
@keyframes myrct {
0% {top: 0px; left: 10px; background: red; color: black;}
20% {bottom: 150px; left: 20px; background: green; color: white;}
40% {bottom: 80px; left: 50px; background: blue; color: white;}
60% {top: 50px; left: 75px; background: orange; color: white;}
80% {bottom: 80px; left: 50px; background: yellow; color: black;}
100% {bottom: 150px; left: 20px; background: navy; color: white;}
}
示例
让我们来看一个包含多个选择器和样式的示例，以对矩形进行动画处理：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: blue;
border: 5px solid red;
position: relative;
animation: myrct 4s infinite;
}
@keyframes myrct {
0% {top: 0px; left: 10px; background: red; color: black;}
20% {bottom: 150px; left: 20px; background: green; color: white;}
40% {bottom: 80px; left: 50px; background: blue; color: white;}
60% {top: 50px; left: 75px; background: orange; color: white;}
80% {bottom: 80px; left: 50px; background: yellow; color: black;}
100% {bottom: 150px; left: 20px; background: navy; color: white;}
}
</style>
</head>
<body>
<h1>CSS3 keyframe example</h1>
<p>Check the below animation...</p>
<div>Our rectangle</div>
</body>
</html>
更新于：2023-12-14
202 次浏览
广告