Question

我有一个图像圈图像，我无法根据需要设置动画

<div class="icon>
    <div class="absoulte">count</div>
   <img src="circle_image_src">
</div>

如何在没有javascript反弹动画的css中进行操作图像应从150％开始，然后转到100％并停在那里，

2-在动画中。当有一个计数数字时，我希望圆圈变为150％，然后将计数div absoulte更改为somethins（自由文本），然后返回100％（如果有帮助，我有角度范围变量）

thx for help

Answer 1

要更改图像的比例，请尝试使用此关键帧：

@keyframes bounce {
    0% {transform: scale(2, 2);}
    100% {transform: scale(1, 1);}
}

这可能是这样的：

＆＃13;

.icon {
	background-image: url("http://icons.veryicon.com/ico/System/Icons8%20Metro%20Style/Logos%20Wikipedia.ico");
	position: absolute;
	top: 30%;
	left: 30% ;
	width: 256px;
	height: 256px;
	animation: bounce 2s forwards;
}

@keyframes bounce {
	0% {transform: scale(2, 2);}
	100% {transform: scale(1, 1);}
}

＆＃13;

<div class="icon"></div>

＆＃13;

详细了解CSS3 @keyframes Rule

弹跳动画从150％到100％-css

1 个答案: