所以我在图像的CSS中有一个剪贴蒙版，使用
clip-path: inset(0 0 90% 0);和
-webkit-clip-path: inset(90% 0 0 0);。我想要做的就是让剪贴蒙版向下移动，实现clip-path: inset(90% 0 0 0);和@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>。
如何使用vanilla Javascript，没有jQuery为它设置动画，以便它从先前状态移动到后一状态？
完整代码：
.headerposition:absolute
答案 0 :(得分：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);
}<a onclick="bottomClip()"><img id="duotonetop" src="https://picsum.photos/200/200?image=1067"></a>