<!DOCTYPE html>
<html>
<head>
<title>逐次展示 动画停留在最后一帧</title>
<style type="text/css">
.animation{
animation:mymove 5s linear;
animation-fill-mode: forwards; /*该属性让动画停留在最后一帧*/
}
@keyframes mymove{
0%{
width:100%;
}
50%{
width:50%;
}
100%{
width:0%;
}
}
</style>
</head>
<body>
<p style="position: relative">我 有 一 头 小 毛 驴,我 从 来 都 不 骑,有 一 天 我 ...<span class="animation" style="width:100%;height:100%;display: inline-block;position:absolute;top:0px;right:0px;background-color: #fff"></span></p>
</body>
</html>
animation 停留在最后一帧 逐字显示
最新推荐文章于 2024-02-27 05:43:07 发布