Ein Hintergrundbild aus vielen Hintergrundbildern animieren

Question

Ich habe 2 Hintergrundbilder in CSS implementiert, um den Mischmodus-Stil nach Photoshop-Layout zu erhalten. Und das habe ich auch richtig verstanden. Aber jetzt möchte ich nur ein Bild von denen animieren.

.home 
    background: 
     image: url(https://i.stack.imgur.com/XZDsP.jpg), url(https://img.clipartfest.com/d840c9cfc1786dc7013443ac7638dde0_halloween-clip-art-free-spider-spider-web-clipart-png_500-463.png) 
     blend-mode: color-dodge 
     repeat: no-repeat 
     size: cover, contain 
     position: 0, center 
    height: 100vh 

Haben Sie eine Idee, wie das?

überprüfen Sie diese codepen. Ich möchte unendliche Animation für das Vordergrundbild (Spinnennetz) drehen

Answer 1

einfach definieren eine andere Klasse zu neuen <div> in Ihrem <section>

Versuchen Sie, diese zuordnen.

<section class="home"> 
    <div class="rotating"></div> 
</section> 

definieren diese css

/* rotation animation */ 
@-webkit-keyframes rotate { 
    from { -webkit-transform:rotate(0deg); } 
    to { -webkit-transform:rotate(360deg); } 
} 

@-moz-keyframes rotate { 
    from { -moz-transform:rotate(0deg); } 
    to { -moz-transform:rotate(360deg); } 
} 

@-ms-keyframes rotate { 
    from { -ms-transform:rotate(0deg); } 
    to { -ms-transform:rotate(360deg); } 
} 

@-o-keyframes rotate { 
    from { -o-transform:rotate(0deg); } 
    to { -o-transform:rotate(360deg); } 
} 

.rotating { 
    position:absolute; 
    width:100%; 
    height:100%; 
    background-image: url(https://img.clipartfest.com/d840c9cfc1786dc7013443ac7638dde0_halloween-clip-art-free-spider-spider-web-clipart-png_500-463.png); 
    -webkit-transform-origin: 50% 50%; 
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 1.5s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    -moz-transform-origin: 50% 50%; 
    -moz-animation-name: rotate; 
    -moz-animation-duration: 1.5s; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function: linear; 
    -ms-transform-origin: 50% 50%; 
    -ms-animation-name: rotate; 
    -ms-animation-duration: 1.5s; 
    -ms-animation-iteration-count: infinite; 
    -ms-animation-timing-function: linear; 
    -o-transform-origin: 50% 50%; 
    -o-animation-name: rotate; 
    -o-animation-duration: 1.5s; 
    -o-animation-iteration-count: infinite; 
    -o-animation-timing-function: linear; 
} 

Hoffe, es hilft