玩玩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 @ 2021-03-25 18:52  plle  阅读(269)  评论(0)  编辑  收藏  举报