css实现颜色切换

最新推荐文章于 2024-09-29 13:21:02 发布

dcloud_jibinbin

最新推荐文章于 2024-09-29 13:21:02 发布

阅读量3.2k

点赞数

文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/weixin_45665589/article/details/122400446

版权

平时我们写代码的时候，可能会碰到类似这样的需求，比如有一个滚动区域来展示一些内容，一个竖着的导航条显示进度，随着滚动的进行，导航条对应的元素改变颜色（参考微信的通讯录）。然后做一个小的demo来实现基础的颜色切换。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width:200px;
            height:200px;
            border:1px solid black;
            display:flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .box .circle{
            width:20px;
            height:20px;
            border-radius:50%;
            margin-left:10px;
            background-color: orange;
        }

        .box .circle:focus{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class = "box">
        <div class = "circle" tabindex="1"></div>
        <div class = "circle" tabindex="1"></div>
        <div class = "circle" tabindex="1"></div>
        <div class = "circle" tabindex="1"></div>
        <div class = "circle" tabindex="1"></div>
    </div>
</body>
</html>

效果图如下：

在这里插入图片描述
纯css的话，我们可通过使用css伪类实现点击元素变色的效果，两个伪类分别是:active, :focus。:active它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。:focus在用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。