我一直在研究这个徽标动画。您会注意到,如果您使窗口宽度变小,则徽标会响应。然而,动画糖果背景图像显示在底部。当调整窗口大小时,我很难将其“隐藏”在顶部对象后面。所以我试图隐藏它或使其规模/响应以避免问题
有什么想法吗?
这是我的代码:JS FIDDLE
@keyframes animatedBackground2 {
0% {
background-position: 0px;
}
100% {
background-position: 0px 956px;
}
/* set this to the height of the image */
}
@-webkit-keyframes animatedBackground2 {
0% {
background-position: 0px;
}
100% {
background-position: 0px 956px;
}
/* set this to the height of the image */
}
@-ms-keyframes animatedBackground2 {
0% {
background-position: 0px;
}
100% {
background-position: 0px 956px;
}
/* set this to the height of the image */
}
@-moz-keyframes animatedBackground2 {
0% {
background-position: 0px;
}
100% {
background-position: 0px 956px;
}
/* set this to the height of the image */
}
@-webkit-keyframes Wobble {
from {
-webkit-transform: rotate(6deg);
}
to {
-webkit-transform-origin: center center;
-webkit-transform: rotate(-6deg);
}
}
.candyWobble {
-webkit-animation: Wobble ease-in-out 0.7s infinite alternate;
}
.candy-animate-wrap {
width: 255px;
position: absolute;
height: 200px;
overflow: hidden;
border-radius: 100%;
top: 30px;
}
#animate-area2 {
width: 213px;
height: 956px;
display: flex;
position: absolute;
background-image: url(https://vapesocietysupplies.com/wp-content/uploads/2017/05/scbg-2.jpg);
background-position: 0 0;
background-repeat: repeat-y;
max-width: 277px;
animation: animatedBackground2 8s infinite linear;
-ms-animation: animatedBackground2 8s infinite linear;
-moz-animation: animatedBackground2 8s infinite linear;
-webkit-animation: animatedBackground2 8s infinite linear;
}
<div class="candyCo-VSSlogo">
<img class="candyWobble" src="https://vapesocietysupplies.com/wp-content/uploads/2017/05/CanyCo-textlogo-1.png" style="width:100%;max-width:277px; position:absolute;z-index:2;">
<img class="cover" src="https://vapesocietysupplies.com/wp-content/uploads/2017/05/CanyCo-VSS-Cover-bg.png" style="width:100%;max-width:277px;position:absolute;z-index:1;">
<div class="candy-animate-wrap">
<div id="animate-area2"></div>
</div>
</div>
谢谢!
答案 0 :(得分:1)
我使用了padding-bottom技巧,这有助于在元素中获得恒定的宽高比(它与父宽度相关,而不是与父高度相关)。
此外,还需要更改其他几种样式......太多而不能制作详细列表。
查看结果:
@keyframes animatedBackground2 {
0% {
background-position: 0px;
}
100% {
background-position: 0px 956px;
}
}
@-keyframes Wobble {
from {
transform: rotate(6deg);
}
to {
transform: rotate(-6deg);
}
}
.candy {
width: 100%;
max-width: 277px;
position: relative;
}
.candyWobble {
animation: Wobble ease-in-out 0.7s infinite alternate;
width: 100%;
max-width: 277px;
position: absolute;
z-index: 2;
}
.candy-animate-wrap {
width: 255px;
position: absolute;
height: 0px;
overflow: hidden;
border-radius: 100%;
top: 0px;
padding-bottom: 99%;
max-width: 100%;
}
#animate-area2 {
top: 0px;
}
#animate-area2 {
width: 213px;
height: 956px;
display: flex;
position: absolute;
background-image: url(https://vapesocietysupplies.com/wp-content/uploads/2017/05/scbg-2.jpg);
background-position: 0 0;
background-repeat: repeat-y;
max-width: 277px;
animation: animatedBackground2 8s infinite linear;
}
<div class="candy">
<img class="candyWobble" src="https://vapesocietysupplies.com/wp-content/uploads/2017/05/CanyCo-textlogo-1.png">
<img class="cover" src="https://vapesocietysupplies.com/wp-content/uploads/2017/05/CanyCo-VSS-Cover-bg.png" style="width:100%;max-width:277px;position:absolute;z-index:1;">
<div class="candy-animate-wrap">
<div id="animate-area2"></div>
</div>
</div>