css两张箭头图片实现上下切换

基础概念

CSS（层叠样式表）是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。通过CSS，可以控制网页的布局和外观。

类型

CSS箭头图片通常通过以下几种方式实现：

纯CSS实现：通过CSS的边框和伪元素来创建箭头效果。
背景图片：使用背景图片来显示箭头。
SVG图标：使用SVG格式的图标来实现箭头效果。

应用场景

CSS箭头图片常用于导航栏、按钮、下拉菜单等需要指示方向的场景。

示例代码

以下是一个使用纯CSS实现上下切换箭头的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Arrow Toggle</title>
    <style>
        .arrow {
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            cursor: pointer;
        }
        .up {
            border-bottom: 5px solid black;
        }
        .down {
            border-top: 5px solid black;
        }
    </style>
</head>
<body>
    <div class="arrow up" id="arrow"></div>
    <script>
        document.getElementById('arrow').addEventListener('click', function() {
            this.classList.toggle('up');
            this.classList.toggle('down');
        });
    </script>
</body>
</html>

解释

HTML部分：创建一个div元素，并赋予其arrow类。
CSS部分：
- .arrow类定义了箭头的基本样式，包括宽度和高度为0，边框设置为透明，以及鼠标悬停时的指针样式。
- .up类定义了向上箭头的样式，通过设置border-bottom为黑色来实现。
- .down类定义了向下箭头的样式，通过设置border-top为黑色来实现。