数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 HTML5 中绘制动态动画？
HTML 拥有可以用来绘制动态动画的 div 和 button 元素。使用 Web 技术生成交互式和视觉图形的能力在 HTML5 中被称为动态动画。HTML5 包含许多复杂的工具，使开发人员能够通过结合 HTML、CSS 和 JavaScript 来构建动态且响应式的动画。动画从简单的状态转换扩展到复杂的交互式模型和游戏。在 HTML5 中实现动画的主要优势之一是它与平台无关，可以在各种平台上运行，包括桌面和移动设备。因此，HTML5 为 Web 开发人员提供了一个强大的工具，可以为用户创建引人入胜且动态的 Web 体验。
视觉表示
语法
<button></button>
button 是 HTML 元素，用于定义可点击区域。
<div></div>
div 名称指定 HTML 中的 div 元素。它在 HTML 文档中创建 div 或特定部分。
使用的属性
圆形中使用的属性如下：
width - 定义 div 元素的宽度。
height - 定义高度元素的宽度。
background-color - 设置 div 元素的背景颜色。
animation - 此属性定义用于动态动画的特定元素的移动方向。
border-radius - 定义 div 元素角的圆角。
box-shadow - 为按钮元素定义阴影，看起来像用户交互。
示例 1
在下面的示例中，我们将创建 div 元素来设置框，并使用内联 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
在下面的示例中，我们将创建 button 元素以在光标移到其上时显示动态动画。将使用 h1 元素来表示程序信息。为了创建动态动画，它将使用元素选择器，即 button，并且为了使其更具动态性，它将使用悬停及其内部 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>
结论
我们讨论了 box-shadow 和 animation 属性在 HTML5 中绘制动态动画中的应用。HTML5 是一套强大的工具，用于在网页上呈现交互式动画。以上输出显示了 div 和 button 元素的动态动画。
279 次浏览
