我在这个网站上看到了这个动画，点击右上角的按钮来激活这个动画
我尝试使用@keyframes来实现这个动画，但它并没有完美地工作（它在这个动画运行期间显示卡住）。 下面是我的代码：
body {
margin: 0;
padding: 0;
}
.wrapper {
position: absolute;
width: 100%;
height: 100%;
top: 0;
background-color: rgba(18, 16, 16, 0.8);
z-index: 1;
animation: 1s flush ease;
}
@keyframes flush {
0% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0);
;
}
20% {
clip-path: polygon(68% 0, 100% 0, 100% 100%, 0 100%, 0 28%);
}
40% {
clip-path: polygon(100% 27%, 100% 34%, 100% 100%, 0 100%, 0 56%);
}
60% {
clip-path: polygon(100% 63%, 100% 78%, 100% 100%, 0 100%, 18% 100%);
}
80% {
clip-path: polygon(100% 84%, 100% 97%, 100% 100%, 0 100%, 52% 100%);
}
100% {
clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
}
}<body>
<div class="wrapper"></div>
</body>这是一个代码片段，其功能与您共享的网站类似。
它只依赖于转换而不是动画，插入一些javascript来触发转换并正确处理页面的状态:)
let state = 'top'
const content = document.getElementById("content")
function onTransitionEnd() {
if (state === 'bot') {
onClick();
}
}
function onClick() {
content.classList.remove("top");
content.classList.remove("mid");
content.classList.remove("bot");
switch (state) {
case 'top': {
state = 'mid';
content.classList.add("mid");
break;
}
case 'mid': {
state = 'bot';
content.classList.add("bot");
break;
}
case 'bot': {
state = 'top';
content.classList.add("top");
break;
}
}
}html, body {
margin: 0;
height: 100%;
overflow: auto;
}
.content {
height: 100%;
position: relative;
overflow: hidden;
}
.fixed {
position: absolute;
z-index: 2;
background: transparent;
display: flex;
justify-content: space-between;
width: 100%;
}
.base {
position: absolute;
background-image: url("https://static.lpnt.fr/images/2017/01/27/6846655-6846643-g-jpg_4053869_1000x667.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 100%;
width: 100%;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
}
.animated {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.animated-border {
position: absolute;
background: lightgreen;
width: 100%;
height: 50px;
}
.animated-background {
position: absolute;
background: lightgreen;
width: 100%;
height: 130%;
transform: skewY(-5deg) translateY(0);
transform-origin: 0 0;
transition-property: transform;
transition-duration: 0.25s;
transition-timing-function: ease-out;
}
.animated-content {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
font-weight: bold;
opacity: 1;
transition-property: opacity;
transition-duration: 0.5s;
transition-delay: 0.125s;
transition-timing-function: ease-out;
}
.content.top .animated-background {
transform: skewY(-5deg) translateY(-120%);
transition-duration: 0s;
}
.content.bot .animated-background {
transform: skewY(-5deg) translateY(120%);
}
.content.top .animated-content {
opacity: 0;
}
.content.mid .animated-content {
}
.content.bot .animated-content {
transition-delay: 0s;
transition-duration: 0s;
opacity: 0;
}<div id="content" class="content top">
<div class="fixed">
<strong>Super App</strong>
<button onclick="onClick()">
X
</button>
</div>
<div class="base">
</div>
<div id="animated" class="animated" ontransitionend="onTransitionEnd()" >
<div class="animated-background"></div>
<div class="animated-content">
Animated
</div>
</div>
</div>