css 实现箭头向下闪动

用心去追梦

于 2024-06-14 16:18:25 发布

阅读量733

点赞数 3

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_33240556/article/details/139684498

版权

要实现一个向下闪动的箭头，可以使用 CSS 动画。下面是一个示例代码，通过 @keyframes 定义动画效果，并应用到箭头元素上：

HTML

首先，在 HTML 中创建一个箭头元素。这里使用一个 div 元素，并添加一个类名 arrow：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flashing Arrow</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="arrow"></div>
</body>
</html>

CSS

在 CSS 中定义箭头的样式和动画效果：

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.arrow {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #000;
    animation: flash 1s infinite;
}

@keyframes flash {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

效果说明

HTML：创建了一个 div 元素，并赋予类名 arrow。
CSS：
- body：设置为 Flexbox 布局，居中显示箭头。
- .arrow：通过 border 属性创建向下的箭头形状，并设置动画效果。
- @keyframes flash：定义一个闪动动画，使箭头在 1 秒内透明度从 1 变为 0，再变回 1，从而实现闪动效果。

结果

以上代码将会在页面中央显示一个向下闪动的箭头。您可以根据需要调整 border 的宽度和颜色，以及 animation 的持续时间和透明度变化，以实现不同的效果。

补充

如果想让箭头看起来更加现代，可以使用 CSS 中的其他属性，比如渐变色：

.arrow {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid;
    border-top-color: linear-gradient(to bottom, #000, #555);
    animation: flash 1s infinite;
}