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-position: -150% -150%, 50%, 50%;}
}
  
  .container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    max-width: 80vw;
    margin-inline: auto;
    margin-bottom: 1rem;

    .layer {
      display: grid;

      width: 100%;
      aspect-ratio: 4 / 3;
      outline: 1px dashed #09f;

      &:nth-child(1) {
        background: repeating-radial-gradient(#000 0 0.0001%, #fff 0 0.0002%)
          60% 60%/3000px 3000px;
      }
      &:nth-child(2) {
        background: url("//repo.bfw.wiki/bfwrepo/image/6505446ef2d12.png")
          no-repeat center / cover;
      }

      &:nth-child(3) {
        background: repeating-conic-gradient(from var(--deg, 0deg) at center, orange 0 1%,#0000 0 2%)
      }
    }
  }

  .result {
    --deg: 0;
    width: min(100% - 2rem, 300px);
    aspect-ratio: 4 / 3;
    outline: 1px solid #09f;
    margin-inline: auto;
    background: repeating-radial-gradient(#000 0 0.0001%, #fff 0 0.0002%) 60% 60%/3000px 3000px,
      url("//repo.bfw.wiki/bfwrepo/image/6505446ef2d12.png")
        no-repeat center / cover,
      repeating-conic-gradient(from var(--deg, 0deg) at center, orange 0 1%,#0000 0 2%);
    -webkit-animation: b .2s ease-in-out infinite alternate, rotate 4s linear infinite alternate;
            animation: b .2s ease-in-out i.........完整代码请登录后点击上方下载按钮下载查看