如何在 HTML5 中绘制动态动画?
HTML 包含可用于绘制动态动画的 division 和 button 元素。在 HTML5 中，使用 Web 技术生成交互式可视化图形的能力被称为动态动画。HTML5 包含许多复杂的工具，使开发者能够通过结合 HTML、CSS 和 JavaScript 来构建动态且响应迅速的动画。动画的范围从简单的状态转换扩展到复杂的交互式模型和游戏。使用 HTML5 实现动画的主要优势之一是它与平台无关，可以在包括桌面和移动设备在内的各种平台上运行。因此，HTML5 为 Web 开发者提供了一个强大的工具，帮助他们为用户打造引人入胜且动态的 Web 体验。
视觉呈现
语法
<button></button>
按钮是定义可点击区域的 HTML 元素。
<div></div>
div 名称在 HTML 中指定了分区元素。它在 HTML 文档中创建分区或特定部分。
使用的属性
圆圈中使用的属性如下:-
width - 定义分区元素的宽度。
height - 定义高度元素的宽度。
background-color - 设置分区元素的背景颜色。
animation - 此属性定义用于动态动画的特定元素的移动方向。
border-radius - 定义分区元素角的边框半径。
box-shadow - 定义按钮元素的阴影，使其看起来像用户交互。
示例 1
在下面的示例中，我们将创建 division 元素来设置框，并使用内联 CSS 使框通过 border-radius 属性呈现理想的形状。为了实现动态动画，它使用名为 animation 的属性，该属性设置框在水平模式下的无限移动。接下来，它使用内部 CSS 中的 @keyframe move 来控制动画的移动。
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Animation in HTML and CSS</title>
<style>
@keyframes move {
0% {
transform: translateX(0);
}
50% {
transform: translateX(600px);
}
100% {
transform: translateX(0);
}
}
</style>
</head>
<body>
<h1>Dynamic Animation</h1>
<div style="width: 100px; height: 100px; background-color: red;
animation: move 2s ease-in-out infinite; border-radius:30px;">
</div>
</body>
</html>
示例 2
在下面的示例中，我们将创建按钮元素，以便在光标移动到按钮上方时显示动态动画。我们将使用 h1 元素来表示程序信息。为了实现动态动画，我们将使用元素选择器(例如按钮)，而为了使其更具动态性，我们将使用内部 CSS 来实现悬停效果。
<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head>
<style>
button{
box-shadow: 0 0 5px cyan,0 0 25px;
}
button:hover{
box-shadow: 0 0 5px cyan, 0 0 25px cyan, 0 0 50px cyan, 0 0 100px cyan, 0 0 200px cyan;
}
</style>
</head>
<body>
<center>
<h1>Dynamic animation on button</h1>
<button>Click Here</button>
</center>
</body>
</html>
结论
我们讨论了在 HTML5 中如何使用 box-shadow 和 animation 属性来绘制动态动画。HTML5 是一套强大的工具，可以实现网页上的交互式动画。上面的输出展示了 division 和 button 元素的动态动画。
