नीचे दिया गया एनीमेशन Adobe AE में केवल अतिरिक्त लाल रंग के साथ छवियों के मास्क को स्थानांतरित करके बनाया गया था।

मैं यह पता लगाने की कोशिश कर रहा हूं कि सीएसएस/जेएस में कुछ ऐसा कैसे हासिल किया जाए (क्या यह भी संभव है?) टिंट को स्वयं ब्लेंड मोड द्वारा नियंत्रित किया जा सकता है लेकिन नकाबपोश छवि को हिलाए बिना मास्क/समायोजन परत को हिलाना चुनौतीपूर्ण लगता है।

Desired effect

0
Kacper 22 अक्टूबर 2020, 03:56

1 उत्तर

सबसे बढ़िया उत्तर

CSS मास्क का उपयोग करना संभव है। एक बुनियादी उदाहरण के नीचे जहां ट्रिक में 3 मास्क हैं और हम हर एक की स्थिति को चेतन करते हैं। शेष आसान है, समान छवियों के साथ एक दूसरे के ऊपर दो परतें और शीर्ष एक सम्मिश्रण मोड के साथ:

.box {
  width:500px;
  height:300px;
  padding:80px 200px 80px 80px;
  background:url(https://picsum.photos/id/1074/800/800) center/contain padding-box content-box;
  box-sizing:border-box;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:inherit;
  background-color: red;
  background-blend-mode: darken;
  -webkit-mask:            /* position  / size */
    linear-gradient(#fff 0 0) 90px 0    /80px  100px,
    linear-gradient(#fff 0 0) 50px 100% /60px  60px,
    linear-gradient(#fff 0 0) 100% 50%  /150px 70px;
  -webkit-mask-repeat:no-repeat;
  animation: move 2s linear infinite alternate;
}
@keyframes move {
  to {
    -webkit-mask-position:
        90px 30%,
        50px 70%,
        50%  50%;
  }
}
<div class="box">

</div>
2
Temani Afif 22 अक्टूबर 2020, 01:51