Comment faire en sorte que le mode de fusion ignore certains arrière-plans ?
P粉418351692
P粉418351692 2023-09-15 10:20:50
0
1
589

Veuillez voir l'image ci-dessous :

Imaginez le rectangle bleu en bas, avec le mode de fusion Mix : Différence, monte lentement vers le haut. Je veux qu'il ignore la bande rouge et reste bleu lorsqu'il la traverse, mais utilise le mode de fusion Mix lorsqu'il se trouve sur la bande verte. Comment puis-je faire cela?

P粉418351692
P粉418351692

répondre à tous(1)
P粉023326773

Vous pouvez mettre le mode de fusion Mélange sur les rectangles où vous souhaitez changer le rectangle bleu et le laisser sur les rectangles où vous ne souhaitez pas changer le rectangle bleu.

Voici un exemple simple :

<style>
  .green {
    width: 200px;
    height: 100px;
    background: lime;
    mix-blend-mode: difference;
  }
  
  .red {
    width: 200px;
    height: 100px;
    background: red;
  }
  
  .blue {
    width: 100px;
    height: 100px;
    background: blue;
    animation: move 5s infinite linear;
    osition: absolute;
  }
  
  @keyframes move {
    0% {
      margin-top: 0px;
    }
    100% {
      margin-top: -300px;
    }
  }
</style>
<div class="green"></div>
<div class="red"></div>
<div class="blue"></div>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal