Javascript 使用剪切形状设置背景渐变动画

当我单击“检查元素”时，我得到以下信息：

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

我的问题是：

你如何在stripe网站上看到三角形的形状

如何设置动画以使颜色发生变化

像WebFlow这样的东西有利于允许响应设计吗

我明白这是一个巨大的问题，但我完全迷路了，尽管如果你知道我应该读什么东西，我愿意用谷歌搜索

Stripe网站：

我想完成的是：

---

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

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

.triangle{
背景色：红色；
-webkit变换：歪斜（-12度）；
变换：歪斜（-12度）；
高度：120px；
宽度：120px；
}
.隐藏顶部{
/*将三角形的顶部挤出屏幕*/
位置：绝对位置；
顶部：-15px；
左：150px；
}

起初的






隐藏顶部

三角形的

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

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

.triangle{
背景色：红色；
-webkit变换：歪斜（-12度）；
变换：歪斜（-12度）；
高度：120px；
宽度：120px；
}
.隐藏顶部{
/*将三角形的顶部挤出屏幕*/
位置：绝对位置；
顶部：-15px；
左：150px；
}

起初的






隐藏顶部

三角形的

frithjof已经为您提供了使用skew CSS属性实现倾斜效果的完美答案

至于动画渐变效果，我建议查看动画画布渐变。据我所知，这似乎涉及到很多数学问题，这些都是我无法理解的。但我确实在codepen上发现了这个，尽管它是非常简化的版本，也许你们可以对它进行反向工程，找出它运动的原因

HTML

JS

var c=document.getElementById（'canv'）；
var$=c.getContext（'2d'）；
var col=函数（x，y，r，g，b）{
$.fillStyle=“rgb（“+r+”、“+g+”、“+b+”）；
$.fillRect（x，y，1,1）；
}
var R=函数（x，y，t）{
返回（数学层（192+64*数学cos（（x*x-y*y）/300+t））；
}
var G=函数（x，y，t）{
返回（数学层（192+64*Math.sin（（x*x*Math.cos（t/4）+y*y*Math.sin（t/3））/300））；
}
var B=函数（x，y，t）{
返回（数学层（192+64*Math.sin（5*Math.sin（t/9）+（x-100）*（x-100）+（y-100）*（y-100））/1100））；
}
var t=0；
var run=function（）{
对于（x=0；xfrithjof，frithjof已经为您提供了使用skew CSS属性实现倾斜效果的完美答案

至于动画渐变效果，我建议研究动画画布渐变。据我所知，这似乎涉及很多数学问题。但我确实在codepen上发现了这一点，尽管它是非常简化的版本，也许你可以对其进行反向工程，并找出它移动的原因


HTML

JS

var c=document.getElementById（'canv'）；
var$=c.getContext（'2d'）；
var col=函数（x，y，r，g，b）{
$.fillStyle=“rgb（“+r+”、“+g+”、“+b+”）；
$.fillRect（x，y，1,1）；
}
var R=函数（x，y，t）{
返回（数学层（192+64*数学cos（（x*x-y*y）/300+t））；
}
var G=函数（x，y，t）{
返回（数学层（192+64*Math.sin（（x*x*Math.cos（t/4）+y*y*Math.sin（t/3））/300））；
}
var B=函数（x，y，t）{
返回（数学层（192+64*Math.sin（5*Math.sin（t/9）+（x-100）*（x-100）+（y-100）*（y-100））/1100））；
}
var t=0；
var run=function（）{
对于（x=0；xi如果我这样做，我可能会尝试使用SVG。似乎会更容易。在WebGL中查找课程/教程，着色器。@Brad，这样你就不会使用画布了？如果我这样做，我可能会尝试使用SVG。似乎会更容易。在WebGL中查找课程/教程，着色器。@Brad，这样你就不会使用canv了as？非常感谢你的帮助和你的时间！你完全正确，直到你指出它，我才意识到ti不是三角形。快速提问，我已经看到-正在使用webkit转换，这和简单转换有什么区别？甚至你提到的教程也使用canvas，你认为它值得学习吗n？@github292929-webkit-、-moz-、-o-和-ms-被称为它们用于引入新的css功能以实现兼容性。关于画布，我认为如果你仔细阅读Senatricus的答案，你可以得到想要的效果。非常感谢你的帮助和你的时间人！你完全正确，直到你指出了这一点。快速提问，我看到使用了-webkit转换，这与简单转换有什么区别？甚至你提到的教程也使用了canvas，你认为值得学习吗？@github292929-webkit-、-moz-、-o-和-ms-被称为它们是在引入新的css功能时出于兼容性原因而使用的s、 关于canvas，我认为如果你仔细阅读Senatricus的答案，你可以得到想要的效果。非常感谢你的回复，像你这样的人都是圣人。那么我应该尝试学习canvas HTML基础知识吗？你是如何在codePen btw上找到这个的？你认为我甚至可以复制并使用它吗？谢谢！@github2929公平地说，我找到它更幸运t、 只需谷歌搜索“动画画布背景”
<canvas id="canv" width="32" height="32">

body {
  width: 100%;
  margin: 0;
  overflow: hidden;
}

canvas {
  width: 100%;
  height: 100%;
}

var c = document.getElementById('canv');
var $ = c.getContext('2d');


var col = function(x, y, r, g, b) {
  $.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
  $.fillRect(x, y, 1,1);
}
var R = function(x, y, t) {
  return( Math.floor(192 + 64*Math.cos( (x*x-y*y)/300 + t )) );
}

var G = function(x, y, t) {
  return( Math.floor(192 + 64*Math.sin( (x*x*Math.cos(t/4)+y*y*Math.sin(t/3))/300 ) ) );
}

var B = function(x, y, t) {
  return( Math.floor(192 + 64*Math.sin( 5*Math.sin(t/9) + ((x-100)*(x-100)+(y-100)*(y-100))/1100) ));
}

var t = 0;

var run = function() {
  for(x=0;x<=35;x++) {
    for(y=0;y<=35;y++) {
      col(x, y, R(x,y,t), G(x,y,t), B(x,y,t));
    }
  }
  t = t + 0.120;
  window.requestAnimationFrame(run);
}

run();