從許多背景圖像中創建一個背景圖像

Question

我已經在CSS中實現了2個背景圖像，以根據Photoshop佈局獲取混合模式樣式。我也有這個權利。但是現在我只想爲這些圖像製作一個動畫。

.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 

你們有什麼想法嗎？

檢查此codepen。我想旋轉的前景圖像（蛛網）無限動畫

Answer 1

只是定義另一個類分配給新<div>在<section>

試試這個。

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

定義這個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; 
} 

希望它有助於