CSS动态循环指示箭头

最新推荐文章于 2024-09-30 10:47:07 发布

转载最新推荐文章于 2024-09-30 10:47:07 发布 · 846 阅读

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/qq_37682202/article/details/118995326?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edef

文章标签：

#css #css3 #前端

部署运行你感兴趣的模型镜像

.scrollarrows { width: 14px; height: 40px; margin-top: 10px; margin-left: 10px; }
.scrollarrows path.a1 { animation-delay: -1s; -webkit-animation-delay: -1s; }
.scrollarrows path.a2 { animation-delay: -0.5s; -webkit-animation-delay: -0.5s; }
.scrollarrows path.a3 { animation-delay: 0s; -webkit-animation-delay: 0s; }
.scrollarrows path { stroke: #fff; fill: transparent; stroke-width: 2px; animation: arrow 2s infinite; -webkit-animation: arrow 2s infinite; }
@keyframes arrow{
	0% { opacity: 0; }
	40% { opacity: 1; }
	80% { opacity: 0; }
	100% { opacity: 0; }
}

<svg class="scrollarrows">
    <path class="a1" d="M0 0 L6.5 13 L14 0"></path>
    <path class="a2" d="M0 13 L6.5 26 L14 13"></path>
    <path class="a3" d="M0 26 L6.5 39 L14 26"></path>
</svg>

样子如下：

在这里插入图片描述

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

图片生成

Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率