Question

我的问题是我希望每2秒将字体大小减少10％

<div class="reduce"> text </div>

.reduce{
transition: 2s linear all;
font-size : 20px;
}

我怎么能用css做呢？

Answer 1

你能做到的一种方法是通过css动画：

div {

    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 15s; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 15s;
    animation-fill-mode: forwards;/*leaves properties at values from the end of animation*/
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {font-size: 20px;}
    100% {font-size: 0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {font-size: 20px;}
    100% {font-size: 0px;}
}

<div>text</div>

字体大小线性变化。如果您希望在不同的步骤中进行这些更改，可以将它们设置为某些特定值：

@keyframes example {
    0%   {font-size: 20px;}
    10%   {font-size: 18px;}
    20%  {font-size: 17px;}
   30%   {font-size: 16px;}
/* etc...*/
}

希望有所帮助

Answer 2

我知道您要求css唯一解决方案，但只需几行jquery即可使其正常运行。您必须设置一个间隔并使用两个不同的函数在一定时间后更改font-size。

var textuptimer = setInterval(textup, 1000);
function textup() {
    $(".heart").css("font-size", "1em");
}

var textdowntimer = setInterval(textdown, 2000);
function textdown() {
    $(".heart").css("font-size", "0.8em");
}

Here 是一个工作小提琴。

interval减少CSS中文本的字体大小

2 个答案: