数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 HTML 中设计波浪图像？
HTML 有一个 SVG 元素，可用于设计波浪图像。波浪图像展示了网页的独特风格，并且在添加动画和过渡属性时变得更加用户互动。波浪设计通常用于登录页面、按钮和网页图像。要创建波浪图像，SVG 元素是设计波浪形状的最佳方法。
语法
<svg viewBox="min-x min-y width height"> <path d="create_path" style="stroke: value_name; fill: value_name;"></path> </svg>
SVG 元素用于绘制图形。
viewBox 属性定义图形的位置和尺寸。min-x 和 min-y 分别表示左右坐标。height 定义图形的高度，width 定义图形的宽度。
Path - 它定义要绘制的路径。
stroke - 该属性适用于任何类型的线条。
fill - 用于填充图形的颜色。
使用的属性
以下属性在两个示例中都使用 -
color - 定义文本的颜色。
text-align - 定义文本居中。
font-size - 定义文本的大小。
background - 定义主体颜色。
overflow - 设置值为 hidden，定义不需要的水平滚动。
position - 设置值为 relative，定义正常位置。
bottom - 设置下侧的垂直位置。
left - 设置水平位置的长度。
top - 设置上侧位置的长度。
animation - 将一种样式更改为另一种样式。
transform - 此属性允许我们移动和旋转图形。
margin-left - 定义元素的左外边距。
波浪图像的可视化表示
示例 1
在此示例中，我们将首先使用内联 CSS 将主体背景颜色设置为黄色，这会将整个页面变成单一颜色。其次，它将使用 div 元素来指定特定部分。然后使用 SVG 元素设置名为 viewbox 的属性并定义所有值，即 min_x、min_y、width 和 height。接下来，使用 path 标签并设置其所有属性，然后获取输出。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body style="background-color: yellow;">
<div>
<svg viewBox="0 0 500 500">
<path d="M0,20 C120,150 180,0 500,100, L500,00 L0,0 Z" style="stroke: none; fill:blue;"></path>
</svg>
</div>
</body>
</html>
示例 2
在此示例中，我们将创建两个 div 元素以设置两个不同的类，即 ocean 和 wave。ocean 类通过定义其某些属性来设置波浪的布局。然后 wave 类使用 background-image、animation、transform 和 @keyframes 属性在网页中构建波浪的动态流动。
<!DOCTYPE html>
<html>
<title>Wave Image</title>
<head>
<style>
.ocean {
height: 5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: powderblue;
}
.wave {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
position: relative;
top: -198px;
width: 3000px;
height: 198px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
transform: translate3d(0, 0, 0); }
@keyframes wave {
0% {
margin-left: 0; }
100% {
margin-left: -1200px;
}
}
</style>
</head>
<body>
<div class="ocean">
<div class="wave"></div>
</div>
</body>
</html>
结论
我们看到了使用 HTML 有两种不同的波浪图像类型。在示例 1 中，SVG 标签通过使用其中的一些引用来绘制波浪图像的图形。但在示例 2 中，CSS 属性（如 animation、transform、position 等）用于创建美丽的波浪图像。波浪图像网站对用户具有更好的可见性。
693 次查看
