效果为:
树枝
html:
<div class="background-tree">
<div class="tree-left"></div>
<div class="tree-right"></div>
</div>
css(url中的图片放自己的图片,随之修改@keyframe中的数值,就可以实现想要的效果)
.background-tree {
overflow: hidden;
.tree-left {
position: absolute;
left: -16vw;
top: 34vw;
width: 39.2vw;
height: 38.27vw;
background-image: url("");
background-repeat: no-repeat;
background-size: 100%;
animation-name: jello;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
z-index: -1;
}
@keyframes jello {
from,
11.1%,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
44.4% {
-webkit-transform: skewY(-1.125deg);
transform: skewY(-1.125deg);
}
55.5% {
-webkit-transform: skewY(0.5625deg);
transform: skewY(0.5625deg);
}
66.6% {
-webkit-transform: skewY(-0.78125deg);
transform: skewY(-0.78125deg);
}
77.7% {
-webkit-transform: skewY(0.890625deg);
transform: skewY(0.890625deg);
}
88.8% {
-webkit-transform: skewY(-0.1953125deg);
transform: skewY(-0.1953125deg);
}
}
.tree-right {
position: absolute;
right: -3vw;
top: 27vw;
width: 32.27vw;
height: 31.47vw;
background-image: url("");
background-repeat: no-repeat;
background-size: 100%;
animation-name: jello;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-timing-function: linear;
z-index: -1;
}
}