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 infinite alternate, rotate 4s linear infinite alternate;
    animation-composition: accumulate;

  }

  label {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    border: 1px solid rgb(255 255 255 / 0.125);
    background: rgb(63 81 181 / 85%);
    color: #fff;
    margin-inline: auto;
    border-radius: 5px;
    box-shadow: 0 0 1px 1px rgb(255 255 255 / 0.125);
    gap: 10px;
    place-self: center;

    & select {
      padding: 0.25em 0.5em;
      min-height: 32px;
      line-height: 1;
    }
  }
}

@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

@layer base {
  body {
    width: 100vw;
    min-height: 100vh;
    font-family: "Exo", "Bungee Shade", cursive, Arial, sans-serif;
    background-color: #557;
    color: #fff;
    padding: 1rem;
  }
}
</style>


  
  
</head>

<body >
  <div class="container">
  <div class="layer">
    
    <label for="layer-1">
      --layer-1:
      <select name="blend-mode" id="layer-1">
    <option value="normal">normal</option>
    <option value="multiply">multiply</option>
    <option value="screen">screen</option&g.........完整代码请登录后点击上方下载按钮下载查看