所以我在图像的 CSS 中有一个剪贴蒙版，使用
-webkit-clip-path: inset(0 0 90% 0); 和
剪辑路径:插图(0 0 90% 0)；。我想做的是让剪贴蒙版向下移动，实现 -webkit-clip-path: inset(90% 0 0 0); 的效果
剪辑路径:插图(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>最佳答案
因为 clip-path 可以设置动画，所以简单地使用 transition
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);
}<a onclick="bottomClip()"><img id="duotonetop" src="https://picsum.photos/200/200?image=1067"></a>关于javascript - 如何在 CSS 中向下移动剪贴蒙版？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50478104/