css实现blend-mode动画效果代码-html代码-BFW代码库

css实现blend-mode动画效果代码

代码语言：html

代码描述：css实现blend-mode动画效果代码，可设置不同的图层。

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

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

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

  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Comfortaa:300,700|Bungee+Shade|Josefin+Sans:400&display=swap"/>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Gochi+Hand&display=swap"/>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap"/>
  
  
  
<style>
@layer reset, base, layout, blend;

@layer blend {
  .result {
    --layer-1: overlay;
    --layer-2: multiply;
    --layer-3: screen;
    background-blend-mode: var(--layer-1), var(--layer-2), var(--layer-3);
  }
}

@layer layout {
  
  @property --deg {
    syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
  }
  
  @-webkit-keyframes rotate {
    to {
      --deg: 1080deg;
    }
  }
  
  @keyframes rotate {
    to {
      --deg: 1080deg;
    }
  }
  
  @-webkit-keyframes b{
  100% {background-position: -150% -150%, 50%, 50%;}
}
  
  @keyframes b{
  100% {background-posit.........完整代码请登录后点击上方下载按钮下载查看