如何在你的网站上添加纯CSS波浪

DebugUsery
379 阅读7分钟

如何在你的网站上添加纯CSS浪花

在你的网站上添加动画，可以让你的网站看起来更活泼，对用户更有吸引力，它可以增加网站的存在感，并提高转化率。使用JavaScript添加动画的缺点是，它们会降低网站的性能，尤其是当开发者未能选择一个优化的库时。

然而，这样的问题是有转机的，那就是使用纯CSS和HTML。

目标

在这篇文章中，我们将使用纯CSS和HTML来为一个类似于本视频中的网站添加动画。

前提条件

要跟上本教程的进度，你应该具备以下条件。

  • 有HTML和CSS的基本知识。
  • 你喜欢的代码编辑器。

学习要点

  • 什么是CSS动画。
  • 使用CSS动画比使用JavaScript动画的优势。
  • 如何使用CSS动画属性。会有一个示范。
  • 我们将制作一个纯CSS的波浪动画，我将向你展示如何将其添加到网站中。

CSS动画

CSS动画让一个元素逐渐从一种CSS配置样式转变为另一种。

它们包含几个组成部分。

  • 一个配置CSS动画的样式。
  • 一堆关键帧，表明动画样式将如何开始和结束。
  • 也可以有中间的航点。

使用CSS动画的优点

使用CSS动画的一些优点，特别是与JavaScript等脚本驱动的动画技术相比，包括。

  • 简单性，你不必学习复杂的编程概念。
  • 使用CSS动画时，你可以让浏览器控制动画的顺序。这优化了性能和效率。

浏览器通过减少在不可见的标签中运行的动画的更新时间来实现这一目的。

  • 良好的加载分数。CSS动画的加载效果很好，即使是在中等的系统负载下。使用JavaScript往往会使简单的动画加载效果不佳。

如何使用CSS动画属性

要创建一个CSS动画，你必须用animation property 及其子属性来设计你想要动画的元素。

  • animation property 可以让你配置持续时间等值。
  • 它并不决定动画的自然外观，因为它是通过利用@keyframes at-rule.

使用"@关键帧规则 "定义动画顺序

在你设置了你的动画的子属性，并确保animation-duration 优先级后，你需要定义动画的顺序或外观。这是通过使用配置一个以上的关键帧来实现的。@keyframes rule.

要遵循的步骤

  • 做一个HTML文件，在body标签里面，写一个<div> 标签，类别为blue-parent，两个子元素有自己的<div> 标签，并且各自有一个类别为blue-child 。

记住，给我们的HTML元素以类和ID，可以使我们更容易在其他文件中引用它们。

<div class="blue-parent">
  <div class="blue-child"></div>
  <div class="blue-child"></div>
</div>
  • 创建<style> 标签，为我们的主体设置一个背景，并给它一个辐射状的渐变背景。

径向背景创建一个图像，在两个或多个颜色之间逐步过渡，从一个原点向外扩散。它的形状可以是一个椭圆或一个圆形。

  • 我们将在0%、35%和100%处添加三个色站值，前两个色站的颜色值为rgba (245,254,234,1) ，最后一个色站的十六进制值为#B7E8EB 。

你会注意到，在远离中心的地方，背景呈现出一个椭圆，三种不同的颜色相互重叠。最后一个色站的值是最外面的颜色。

  • 我们通过将body标签的overflow属性值设置为hidden ，来防止任何滚动的发生。

  • 然后，我们用blue-parent 类来设计<div> 元素的样式，使其在任何时候都处于页面的底部。

.blue-parent { 
  width:100%;
  height: 7%;
  background: #016890;
  position: absolute;
  left:0;
  bottom:0;
  }
  • 类为blue-parent 的<div> 标签是一个父元素，有两个子元素<div> 标签，每个标签的类为blue-child 。

现在我们将给它们每个人一个从网络上获得的背景。

背景将两个<div> 标签的背景都设置为一个看起来像波峰的东西的图像。

然后将其设置为重复，使其看起来像一条长链一样一直在屏幕上。

  • 我们通过设置top属性为负值，给它们一个宽度和高度，然后设置animation属性，使这两个<div> ，使它们处于彼此的上方。

我们使用一种速记方法来描述所有的动画子属性，而不是逐行写出每个子属性。

  • 我们首先给我们的动画一个名字：wave-one ，我们将用这个名字和@keyframes rule ，来设置动画的关键帧。

  • 然后，我们通过设置动画持续时间为8s，使其在8秒内完成一个周期。

.blue-child {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/waves.svg) repeat-x;
  min-height: 197px;
  position: absolute;
  width: 6400px;
  top: -197px;

  • 使用cubic-bezier() 函数设置animation-timing-function属性。这个函数定义了一个由四个点定义的立方贝塞尔曲线。

  • 然后我们将animation-iteration-count ，以使动画永远运行。

animation: wave-one 8s cubic-bezier (0.37, 0.44, 0.64, 0.54) infinite;

不设置其他的动画属性，允许计算机在渲染动画时使用这些属性的默认值。

  • 给元素一个变换属性，值为translate3d. translate3d ，用来定义一个三维平移（以矢量为值），以创造一个三维效果。

最后为两个<div> 标签定义的一组CSS规则如下。

.blue-child {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/waves.svg) repeat-x; 
  position: absolute;
  min-height: 197px;
  position: absolute;
  width: 6400px;
  top: -197px;
  animation: wave-one 8s cubic-bezier (0.37, 0.44, 0.64, 0.54) infinite;
  transform: translate3d (0, 0, 0);
}
  • 使用nth-type伪类选择类.blue-child 的第二个子元素。
.blue-child:nth-of-type(2) {
  top: -174px;

我们把它设置在第一个子元素的正下方。接下来，继续设置动画属性。

  • 我们将两个动画命名为wave-one和crests。然后我们用animation-delay属性设置动画wave-one。

  • 此外，让我们把它设置成一个负值，让它先启动。

animation: wave-one 8s cubic-bezier (0.37, 0.44, 0.64, 0.54) -.124s

  • 我们有第二个动画：crests, ，它将需要8s 来完成一个周期，并且有一个easy的动画定时功能。这意味着该动画将缓慢地开始，快速地进行，并缓慢地结束。

  • 它将有一个负值作为它的animation-delay 属性值。

  • 然后它被设置为永远运行（无限）。接下来，我们继续，将元素的不透明度值设置为1 ，以区别于第一个元素。

.blue-child:nth-of-type(2) {
  top: -174px;
  animation: wave-one 8s cubic-bezier (0.37, 0.44, 0.64, 0.54) -.124s infinite, crests 8s ease -1.24s infinite;
  opacity: 1;
  }

在定义动画的序列时，我们使用@keyframes rule 。这使我们能够定义我们的动画在某些时候的 "行为"。在我们的例子中，我们将首先为wave-one 动画定义一个关键帧。我们定义两个时间停顿：0% 和100% 。

  • 在开始状态，我们将设置左边距为0 ，然后在停止状态设置一个负值为1600 像素。这使得元素可以从右向左移动。
@keyframes wave-one {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1600px;
  }
}

  • 我们定义一个转换属性，其值为translate3d ，并设置y值从负值变为正值。

  • 然后这个值又变回负值，使第二个子元素上下移动，完成波浪形动画的构建。

@keyframes crests {
  0%, 100% {
    transform: translate3d (0, -24px, 0);
  }
  50% {
    transform: translate3d (0, 4px, 0);
  }
}

我们的最终代码将看起来像这样。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="code on wavess .css">
  <title>Document</title>
</head>
<body>
  <div class="blue-parent">
    <div class="blue-child"></div>
    <div class="blue-child"></div>
  </div>
</body>
</html>

CSS

html, body {height: 100%;}
body {
  background: radial-gradient (ellipse at center, rgba(245,254,234,1) 0%, rgba(245,254,234,1) 35%, #B7E8EB 100%);
  overflow: hidden;
}
.blue-parent { 
  width:100%;
  height: 7%;
  background: #016890;
  position: absolute;
  left:0;
  bottom:0;
}

.blue-child {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/waves.svg) repeat-x; 
  position: absolute;
  min-height: 197px;
  position: absolute;
  width: 6400px;
  top: -197px;
  animation: wave-one 8s cubic-bezier (0.37, 0.44, 0.64, 0.54) infinite;
  transform: translate3d (0, 0, 0);
}

.blue-child:nth-of-type(2) {
  top: -175px;
  animation: wave-one 8s cubic-bezier( 0.37, 0.44, 0.64, 0.54) -.124s infinite, crests 8s ease -1.24s infinite;
  opacity: 1;
}

@keyframes wave-one {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1600px;
  }
}

@keyframes crests {
  0%, 100% {
    transform: translate3d(0,-24px,0);
  }
  50% {
    transform: translate3d(0,5px,0);
  }
}

我们最终的网站将有一个从右到左移动的波浪形动画。

总结

仅仅使用HTML和CSS，我们已经创建了一个波浪动画，这个动画很容易实现，而且会提高网站的性能。没有人想要一个加载缓慢的网站。在创建你的网站时，要始终牢记这一点。

我希望这个教程能帮助你开发一个高效的、反应迅速的网站。谢谢你阅读本教程。

编码愉快

avatar
文章
阅读
粉丝