如何在 HTML 中设计波浪图像?

htmlweb developmentfront end technology更新于 2024/7/3 6:36:17

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 分别表示左侧和右侧的坐标。高度定义图形的高度，宽度定义图形的宽度。
Path - 定义要绘制的路径。
stroke - 此属性适用于任何类型的线条。
fill - 将颜色填充到图形中。

使用的属性

两个示例中使用的属性如下:

color - 定义文本的颜色。
text-align - 定义文本居中。
font-size - 定义文本的大小。
background - 定义背景的颜色
overflow − 将值设置为 hidden，表示隐藏，从而避免不必要的水平滚动。
position − 将值设置为relative，表示正常位置。
bottom − 设置下侧的垂直位置。
left − 设置水平位置的长度。
top − 设置上侧位置的长度。
animation − 更改样式。
transform − 此属性允许我们移动和旋转图形。
margin-left − 定义元素。

波浪图像的可视化表示

示例 1

在此示例中，我们首先使用内联 CSS 将正文背景颜色设置为黄色，该 CSS 将整个页面变为单一颜色。其次，使用 division 元素指定特定部分。然后使用 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

在本例中，我们将创建两个分区元素，分别设置两个不同的类，即 ocean 和 wave。ocean 类通过定义其一些属性来设置波浪的沉降样式。wave 类则使用背景图像、动画、transform 和 @keyframe 的属性，在网页中构建波浪的动态流动。

<!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>