CSS动态循环指示箭头

最新推荐文章于 2024-06-17 10:41:41 发布

zhang-php

最新推荐文章于 2024-06-17 10:41:41 发布

阅读量2.3k

点赞数 1

分类专栏： CSS html5

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_37682202/article/details/118995326

版权

html5 同时被 2 个专栏收录

50 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

这段代码展示了如何使用 SVG 和 CSS 动画创建一个连续滚动的箭头效果。`.scrollarrows` 类定义了箭头的大小和位置，而 `.scrollarrowspath` 类则设置了箭头的路径和动画。`@keyframes arrow` 定义了动画的透明度变化，使得箭头看起来在不断移动。

摘要由CSDN通过智能技术生成

.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>

样子如下：