我已经在 CSS 中实现了 2 个背景图像,以根据 Photoshop 布局获得混合模式样式。我也猜对了。但现在我只想为其中的一张图片制作动画。
.home
background:
image: url(/image/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 .我想为前景图像(蜘蛛网)旋转无限动画
最佳答案
只需定义另一个类分配给新的<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;
}
希望对你有帮助
关于jquery - 从许多背景图像中动画化一个背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41478994/