svg+css实现颜色相互融合动画效果代码-html代码-BFW代码库

svg+css实现颜色相互融合动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现颜色相互融合动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap");
* {
  box-sizing: border-box;
  margin: auto;
}

body {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at bottom left, #0f0f0f, #f0f0f0);
  overflow: hidden;
  perspective: 1440px;
  filter: url(#goo);
}

svg {
  display: none;
}

.tri {
  position: relative;
  height: 25vh;
  aspect-ratio: 1/1;
  margin: 5vh auto auto auto;
}
.tri.flipped {
  margin: auto auto 5vh auto;
  rotate: 180deg;
}
.tri .glass {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #f0f0f07f;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  backdrop-filter: blur(8px);
  animation: moveUp 0.6s ease-in-out infinite alternate;
}
.tri .glass.top {
  clip-path: polygon(50% 0%, 75% 50%, 50% 70%, 25% 50%);
}
.tri .glass.right {
  clip-path: polygon(100% 100%, 50% 100%, 50% 70%, 75% 50%);
  animation-name: moveRight;
  animation-delay: 0.2s;
}
.tri .glass.left {
  clip-path: polygon(0% 100%, 50% 100%, 50% 70%, 25% 50%);
  animation-name: moveLeft;
  animation-delay: 0.4s;
}
.tri .glass.red {
  background: #ff0000af;
}
.tri .glass.green {
  background: #00ff00af;
}
.tri .glass.blue {
  background: #0000ffaf;
}
.tri .glass.cyan {
  background: #00ffffaf;
}
.tri .glass.magenta {
  background: #ff00ffaf;
}
.tri .glass.yellow {
  background: #ffff00af;
}
.tri .glass.light {
  animation: none;
  mix-blend-mode: darken;
}
.tri .glass.dark {
  background: #0f0f0f7f;
  animation: none;
  mix-blend-mode: lighten;
}
@key.........完整代码请登录后点击上方下载按钮下载查看