要实现滚动的动画，有两行关键的css代码。
animation-timeline: view();
这个是css新特性，可以模仿js一样监听到scroll事件，且更为丝滑。但是要注意的是此功能是css3的新实验功能，目前仅 Chrome Canary (115以上)版本浏览器支持此特性，view()代表了进入视图窗口后的监听，scroll()代表了滑动的监听，例如scroll(root x)表示使用最外层的x轴的滚动条的滚动进度，scroll(root y)使用滚动容器的 y 轴上的滚动进度，这里使用的是view()参数。
animation-range: entry 0 cover 30%;
这个也是css的新特性，代表的是动画的持续范围。网上有更详细的教程。CSS 滚动驱动动画 animation-range-CSDN博客
其中entry 0 表示的是进入的时候是0，cover 30%，就是视图进入30%的时候是动画结束帧。
放上源码。注释的内容其实就是进入视图之后的变化，可以自由发挥。基本上以透明度opacity和scale大小居多。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐出dom</title>
<style>
.block{
width: 800px;
/* height:100px; */
display: flex;
justify-content: space-between;
margin:50px auto;
animation: donghua linear;
animation-timeline: view();
animation-range: entry 0 cover 30%;
}
.one{
height: 100px;
width: 300px;
background-color: skyblue;
}
.two{
height: 100px;
width: 200px;
background-color: yellow;
}
@keyframes donghua{
0%{
opacity: 0;
/* height:0px; */
scale: 0.5;
/* transform: translateX(-100px); */
/* clip-path: inset(100% 100% 0 0); */
}
100%{
opacity: 1;
/* height:100px; */
scale: 1;
/* transform: translateX(0px); */
/* clip-path: inset(0 0 0 0); */
}
}
}
</style>
</head>
<body>
<div class="block">
<div class="one"></div>
<div class="two"></div>
<div class="two"></div>
</div>
<div class="block">
<div class="one"></div>
<div class="two"></div>
<div class="two"></div>
</div>
<div class="block">
<div class="one"></div>
<div class="two"></div>
<div class="two"></div>
</div>
.....此处有一堆block元素
</body>
</html>
扫一扫
973
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
