小编Ben*_*tte的帖子

是否可以为 CSS 蒙版图像设置动画?

我想为 CSS 蒙版图像的“蒙版位置”属性设置动画。蒙版图像本身是一个简单的渐变,我的预期行为是通过更改蒙版位置的值,我可以使背景对象从左到右淡入。但是,是否可以为该属性设置动画?如果没有,是否有解决方法?

.header-image figure {
    mask-image: url("http://thehermitcrab.org/wp-content/themes/the-hermit-theme/images/gradient-mask-straight.png");
    animation: clip-fade 3s;
}

@keyframes clip-fade {
  0% {mask-position: 100% 0%;}
  100% {mask-position: 0% 0%;}
}
Run Code Online (Sandbox Code Playgroud)

HTML:

<div class="header-image">
<figure>
<img src="https://thehermitcrab.org/wp-content/themes/the-hermit-theme/images/footer/crab-footer-chalk-logo.png"/>
</figure>
</div>
Run Code Online (Sandbox Code Playgroud)

谢谢!

css css-animations css-mask

5
推荐指数
1
解决办法
3939
查看次数

使用纯 javascript:如果选中一个单选按钮,则只显示下一部分

我只想在用户选择第一部分中的单选按钮后才显示表单的第二部分。我试图单独使用 javascript 来做到这一点,但没有效果。我很确定问题在于在正确的时间触发该功能。如果我之后用按钮触发它,它就起作用了!但我希望它无需外部按钮即可自动触发。

这是 HTML:

<input type="radio" name="entreprise_ou_particulier" value="Vous êtes un particulier" id="particulier1">
<label for="particulier1">
    <span>
        Je suis un particulier
    </span>
</label>
    
<div class="item" id="declaration2">
    <input type="radio" name="choix_de_produit" value="Déclaration d'impôts" id="declaration1">
    <label for="declaration1">
        <span>
            Déclaration d'impôts
        </span>
    </label>
</div>
Run Code Online (Sandbox Code Playgroud)

和 Javascript:

if (document.getElementById("particulier1").checked) {
    document.getElementById("declaration2").style.display = 'block';
}
else {
    document.getElementById("declaration2").style.display = 'none';
}
Run Code Online (Sandbox Code Playgroud)

非常感谢!!!

html javascript radio-button

0
推荐指数
1
解决办法
93
查看次数

标签 统计

css ×1

css-animations ×1

css-mask ×1

html ×1

javascript ×1

radio-button ×1