时间戳

首页 > 解决方案 > 具有切口形状的动画背景渐变

javascript - 具有切口形状的动画背景渐变

问题描述

当我单击检查元素时，我得到这个： 它似乎使用画布，所以我应该为此做一门课程吗？

我能想到的另一个选择是类似于 Kahoot 网站的 css 关键帧，所以你可以说一个可以改变颜色的矩形。

我的问题是：

  1. 您如何获得在条纹网站上看到的三角形形状。
  2. 您如何对其进行动画处理以使颜色发生变化？
  3. 像 web-flow 这样的东西是否有利于允许响应设计？

我理解这是一个很大的问题，但是如果您对我应该阅读的内容有任何想法，我愿意在谷歌上搜索内容，但我完全迷失了。

条纹网站：https ://stripe.com/gb

我想完成的事情：

在此处输入图像描述

标签： javascripthtmlcss

解决方案

三角形是通过倾斜图像来实现的，如果您进一步检查三角形，您会注意到三角形继续在屏幕顶部。

这是他们如何实现它的粗略版本。查看包含画布的 div 以了解更多详细信息（它具有 HomepageHeroGradient、Gradient 和 isLoaded 类）

.triangle {
  background-color:red;
  -webkit-transform: skewY(-12deg);
  transform: skewY(-12deg);
  height:120px;
  width:120px;
}

.hide-top {
  /* force the top of the triangle outside the screen */
  position:absolute;
  top:-15px;
  left: 150px;
}
<div class="triangle">
  <br>
  <br>
  <br>
  original
</div>

<div class="triangle hide-top">
  <br>
  <br>
  <br>
  hide the top<br>
  of the triangle
  
</div>

关于他们是如何得到漂亮的颜色的，我不完全确定。但我知道它是由 javascript 动画的，因为如果您在页面上禁用 JavaScript，它就不起作用。

我最好的猜测是，你看到的波浪是某种 sin wave Tutorial of sinewave in canvas。他们为其添加了某种模糊效果。

关于webflow，我不知道。我从来没有使用过它。但是根据他们的教程，它看起来很棒。由于 webflow 允许您添加自定义 JavaScript，它应该是可能的。

推荐阅读