如何在 CSS 中向下移动剪贴蒙版？答案

【问题标题】：How do I move a clipping mask down in CSS?如何在 CSS 中向下移动剪贴蒙版？
【发布时间】：2020-03-07 20:37:30
【问题描述】：

所以我在图像的 CSS 中有一个剪贴蒙版，使用 -webkit-clip-path: inset(0 0 90% 0); 和 clip-path: inset(0 0 90% 0);。我想要做的是让剪贴蒙版向下移动，达到-webkit-clip-path: inset(90% 0 0 0);的效果和 clip-path: inset(90% 0 0 0);。如何使用 vanilla Javascript 而非 jQuery 为它设置动画，以便它从前一个状态移动到后一个状态？

完整代码：

@font-face {
    font-family: Fraktur;
    src: url(typefaces/BreitkopfFraktur.ttf);
}

@font-face {
    font-family: Noe;
    src: url(typefaces/noe.ttf);
}

html {
    background-image: url(images/hero.jpg);
    overflow-x: hidden; 
    overflow-y: auto; 

}

body {
    text-align: center;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

h1 {
    font-family: Fraktur;
    margin-top: 15%;
    color: white;
    font-size: 12em;
    display: inline;
}
#duotonetop {
    padding: 0 0 0 0;
    -webkit-clip-path: inset(0 0 90% 0);
    clip-path: inset(0 0 90% 0);
    height: auto;
    position: fixed;
    display: block;
        transform: translateY(-500px);
}

.cont {
    margin-top: 15%;
}

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="css/style.css">
 
</head>

<body>
    <center>
        <div class="cont">
            <span class="js-animate" data-speed="2" data-position="top" style="transform: translate3d(0px, 0px, 0px);">
                <h1>a</h1>
            </span>
            <h1>m</h1>
            <h1>s</h1>
            <h1>t</h1>
            <h1>e</h1>
            <h1>r</h1>
            <h1>d</h1>
            <h1>a</h1>
            <h1>m</h1>
        </div>
    </center>
    <a onclick="bottomClip()"><img id="duotonetop" src="css/images/hero_duotone.png"></a>
<script>
    function bottomClip() {
    document.getElementById("duotonetop").style.clip = "inset(90% 0 0 0)";
}

function reClip() {
    document.getElementById("duotonetop").style.clip = "inset(0 0 90% 0)";
}
</script>
</body>

</html>

【问题讨论】：

标签： javascript html css css-animations clip-path

【解决方案1】：

只需使用过渡，因为clip-path 可以动画

function bottomClip() {
  document.getElementById("duotonetop").classList.toggle("move");
}

body {
  text-align: center;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
}

a {
 display:inline-block;
}

#duotonetop {
  padding: 0 0 0 0;
  clip-path: inset(0 0 90% 0);
  display: block;
  transition: 1s all;
}

#duotonetop.move {
  clip-path: inset(90% 0 0 0);
}

&lt;a onclick="bottomClip()"&gt;&lt;img id="duotonetop" src="https://picsum.photos/200/200?image=1067"&gt;&lt;/a&gt;

【讨论】：