数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何动态创建“@-Keyframe” CSS 动画？
在 CSS 中，`@keyframes` 规则指定元素在动画过程中应经历的一系列样式。在本文中，我们将学习如何使用 `@-keyframe` 规则中的这些序列来创建动态动画。在 CSS 中，能够响应用户交互或更改来为网页上的组件创建动画被称为动态动画。文本、图形和按钮都是可以用来创建视觉上吸引人和引人入胜的用户体验的组件示例。
然后，这些样式通过 `animation` 属性应用于元素，该属性设置动画的持续时间、计时函数和其他属性。
@-keyframe 动画的视觉表示
语法
以下语法在示例中使用：
<div></div>
标签在 HTML 文档中定义元素或区块。
@keyframe mymove {
}
@keyframes 规定元素的移动位置，例如 top、bottom、left、right。Keyframes 是控制动态动画的更好技术。
属性
示例中使用的属性如下：
text-align - 将 h1 元素定义为居中。
color - 定义 h1 元素的颜色。
width - 定义 div 元素的宽度。
height - 定义 div 元素的高度。
position - 定义绝对值，显示固定值。
animation - 通过动态动画移动来定义值。
border-radius - 定义角边框的半径。
background - 定义 div 元素的背景颜色。
opacity - 定义 div 元素的不透明度级别。
示例 1
在这个示例中，我们将使用两个 div 元素，使用 `border-radius` 属性创建一个圆形。为了使圆形移动，它将使用 `@keyframe` 动画来设置 CSS 属性。这在网页输出中表示动态动画。
<!DOCTYPE html>
<html>
<head>
<style>
h1{
text-align: center;
color: red;
}
div {
width: 100px;
height: 100px;
position: absolute;
animation: mymove 10s infinite;
border-radius: 50px;
background: grey;
opacity: 0.8;
}
@keyframes mymove {
10% {top: 110px;}
25% {bottom: 200px;}
75% {right: 250px}
100% {bottom: 300px;}
}
</style>
</head>
<body style="background: gold;">
<h1>The Animation using @keyframe</h1>
<div></div>
<div><div>
</body>
</html>
示例 2
在这个示例中，我们将创建一个 div 元素来设置单个框，并使用元素选择器（即 div）来定义其属性。为了使 div 元素动态移动，它将使用 `animation` 属性和 `keyframe` 类（来设置移动位置）。
<!DOCTYPE html>
<html>
<head>
<style>
h1{
text-align: center;
color: red;
}
div {
width: 100px;
height: 100px;
position: absolute;
animation: mymove 10s infinite;
background: purple;
opacity: 0.2;
}
@keyframes mymove {
10% {top: 110px;}
50% {bottom: 200px;}
40% {left: 50px;}
30% { right:70px;}
}
</style>
</head>
<body style="background: powderblue;">
<h1>The Animation using @keyframe</h1>
<div></div>
</body>
</html>
结论
以上两个输出显示了使用 CSS 动画表示动态动画。Keyframes 通过在其中设置一些 CSS 属性来使用 `@-keyframe` 类表示。Div 元素根据用户的喜好进行设计，形状可以是正方形、圆形、矩形等。
542 次浏览
