likes
comments
collection
share

使用CSS打造带有状态指示器的头像

作者站长头像
站长
· 阅读数 61

使用CSS打造带有状态指示器的头像

关于如何仅使用 CSS 创建带有状态指示器的头像的教程。

HTML

对于 HTML，我们只需要一个带有“avatar”类的 div 元素和一个带有“status”元素的 span 元素。该元素将指示状态。

默认值为离线，通过添加active类，状态指示灯将变为绿色。

现在，我们将为其添加一个active类。

<div class="avatar">
    <span class="status active"></span>
</div>

CSS

对于 CSS，首先我们将为头像设置样式。

我们将其宽度和高度设置为 40x40 像素。

一个 3px 宽的圆形边框，纯深蓝色。

我们将它的位置设置为相对。

当然，还有图像。我们将背景图像设置为 url 图像，它的大小覆盖整个 40x40 区域，位置设置为中心。

.avatar {
    width: 40px;
    height: 40px;
    border: 3px rgb(48, 69, 96) solid;
    border-radius: 6px;
    position: relative;
    background-image: url('https://p26-passport.byteacctimg.com/img/user-avatar/075a1a3122b48f09fa93780c520fb1e5~300x300.image');
    background-size: cover;
    background-position: center;
}

我们的状态指示器将是 6x6 像素大小，带有半径设置为 50% 的深色边框，这将形成一个圆圈。

我们将它的位置设置为绝对，并且将 top 和 right 设置为 0，将 transform translate 设置为 40% 和 -40%，它将位于右上角。

最后，我们将其背景设置为深灰色。这是离线状态的样子。默认一个。

.status {
    width: 6px;
    height: 6px;
    border: 2px solid rgb(48, 69, 96);
    border-radius: 50%;
    position: absolute;
    right: 0px;
    top: 0px;
    transform: translate(40%, -40%);
    background-color: rgb(33, 34, 35);
}

现在我们将为active类设置样式。

这个类我们将被附加到一个状态元素。

我们将覆盖 background-color 属性，并将其设置为绿色。

.active {
    background-color: rgb(48, 249, 75);
}

现场示例

最后

就是这样。后续只需要移除active这个类名 , 或者添加这个类目就行了, 谢谢阅读。❤️

往期精彩

转载自:https://juejin.cn/post/7152724596779646983
评论
请登录