玩玩CSS,写一个图标堆叠效果

遇到有人问如下效果怎么写，一时兴起，自己写一个玩玩。

 

 

 

看到这个样子，首先应该考虑一下 DOM 结构，以我的观点，把DOM结构设计为如下形式：

 

    <div>
        <img src="./img1.png" />
        <img src="./img2.png" />
        <img src="./img3.png" />
    </div>

即，一个 DIV 中包含图片，对于左侧的文字，这里考虑使用 ::before CSS实现。

 

首先，我们建立整个的 HTML 如下，

复制代码
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css"></style>
</head>
<body>
    <div>
        <img src="./img1.png" />
        <img src="./img2.png" />
        <img src="./img3.png" />
    </div>
</body>
</html>
复制代码

我们将 like 列表的 CSS 样式命名为 like-list, 在 style 标签中添加如下代码：

 

复制代码
.like-list {
  height: 40px;
  width: 300px;
  padding: 5px;
  border: none;
  float: right;
  background-color: lightseagreen;
  margin-right: 0;
  border-radius: 30px 0 0 30px;
}
复制代码

然后，将样式附加到div，整体代码修改如下：

复制代码
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
    .like-list {
      height: 40px;
      width: 300px;
      padding: 5px;
      border: none;
      float: right;
      background-color: lightseagreen;
      margin-right: 0;
      border-radius: 30px 0 0 30px;
    }
</style>
</head>
<body>
    <div class="like-list">
        <img src="./img1.png" />
        <img src="./img2.png" />
        <img src="./img3.png" />
    </div>
</body>
</html>
复制代码

显示效果如下：

 

 嗯，外层效果出来了，我们再把下面几张图片下载下来，放在和HTML文件相同位置：

 

 

 

 

 

 刷新浏览器，我们看到如下效果：

 

 

图片变得好大，调整一下，添加如下样式：

 

.like-list> img {
  margin: 0;
  height: 30px;
  width: 30px;
  border-radius: 30px;
  border: 3px solid white;
  margin-left: -15px;
}

再看：

 

嗯，有点样子了，接下来，添加文本，我们就不多创建DOM节点了，再添加如下CSS:

复制代码
.like-list::before {
  height: 30px;
  width: 30px;
  content: "Like";
  color: white;
  position: relative;
  top: -15px;
  margin-right: 15px;
}
复制代码

再看效果：

 

 

 好了，效果出来了，全部代码如下：

复制代码
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .like-list {
            height: 35px;
            width: 300px;
            border-radius: 30px 0 0 30px;
            border: none;
            float: right;
            background-color: lightseagreen;
            margin-right: 0;
            padding: 5px;
        }

           .like-list > img {
                margin: 0;
                height: 30px;
                width: 30px;
                border-radius: 30px;
                border: 3px solid white;
                margin-left: -15px;
            }

            .like-list::before {
                height: 30px;
                width: 30px;
                content: "Like";
                color: white;
                position: relative;
                top: -15px;
                margin-right: 15px;
            }
</style>
</head>
<body>
    <div class="like-list">
        <img src="./img1.png" />
        <img src="./img2.png" />
        <img src="./img3.png" />
    </div>
</body>
</html>
复制代码

总结一下，这里主要使用了 border-radius CSS设置圆角，用border设置边框，然后使用 margin-left: -15px; 进行了图片堆叠。

 

最近准备发奋了，要多写些东西分享了，欢迎关注下面公众号，更多文章期待与你相遇：

 

 

posted @   plle  阅读(702)  评论(0)  编辑  收藏  举报
编辑推荐：
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 一个奇形怪状的面试题：Bean中的CHM要不要加volatile？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示