CSS 仿微信群头像

<!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>
        .base-avatar-box {
            margin: 0 auto;
            margin-top: 300px;
            background-color: #e8e8e8;
             140px;
            height: 140px;
        }

        .base-img {
            padding: 2px;
            box-sizing: border-box;
        }

        .avatar-box-1 {
            margin: 0 auto;
            margin-top: 300px;
            background-color: #e8e8e8;
             140px;
            height: 140px;
        }

        .avatar-box-1 .img {
            padding: 2px;
            box-sizing: border-box;
             100%;
            height: 100%;
        }

        .avatar-box-2 {
            margin: 0 auto;
            margin-top: 300px;
            background-color: #e8e8e8;
             140px;
            height: 140px;
            display: flex;
            align-items: center;
        }

        .avatar-box-2 .img {
            padding: 2px;
            box-sizing: border-box;
             50%;
            height: 50%;
        }

        .avatar-box-3 {
            margin: 0 auto;
            margin-top: 300px;
            background-color: #e8e8e8;
             140px;
            height: 140px;
            position: relative;
        }

        .avatar-box-3 .img {
            padding: 2px;
            box-sizing: border-box;
             50%;
            height: 50%;
        }

        .avatar-box-3 .img:nth-of-type(1) {
            position: absolute;
            top: 1px;
            left: 50%;
            transform: translateX(-50%);
        }

        .avatar-box-3 .img:nth-last-child(2) {
            position: absolute;
            bottom: 1px;
            left: 1px;
        }

        .avatar-box-3 .img:nth-last-child(1) {
            position: absolute;
            bottom: 1px;
            right: 1px;
        }

        .avatar-box-4 {
            margin: 0 auto;
            margin-top: 300px;
            background-color: #e8e8e8;
             140px;
            height: 140px;
            position: relative;
        }

        .avatar-box-4 .img {
            padding: 2px;
            box-sizing: border-box;
             50%;
            height: 50%;
        }

        .avatar-box-4 .img:nth-of-type(1) {
            position: absolute;
            top: 1px;
            left: 1px;
        }

        .avatar-box-4 .img:nth-of-type(2) {
            position: absolute;
            top: 1px;
            right: 1px;
        }

        .avatar-box-4 .img:nth-last-child(2) {
            position: absolute;
            bottom: 1px;
            left: 1px;
        }

        .avatar-box-4 .img:nth-last-child(1) {
            position: absolute;
            bottom: 1px;
            right: 1px;
        }

        .avatar-box-5 {
            margin: 0 auto;
            margin-top: 300px;
            background-color: #e8e8e8;
             140px;
            height: 140px;
            position: relative;
        }

        .avatar-box-5 .img {
            padding: 2px;
            box-sizing: border-box;
             33.333333333333336%;
            height: 33.333333333333336%;
        }

        .avatar-box-5 .img:nth-of-type(1) {
            position: absolute;
            top: 16.666666666666668%;
            left: 16.666666666666668%;
        }

        .avatar-box-5 .img:nth-of-type(2) {
            position: absolute;
            top: 16.666666666666668%;
            right: 16.666666666666668%;
        }

        .avatar-box-5 .img:nth-last-child(3) {
            position: absolute;
            bottom: 16.666666666666668%;
            left: 1px;
        }

        .avatar-box-5 .img:nth-last-child(2) {
            position: absolute;
            bottom: 16.666666666666668%;
            left: 50%;
            transform: translateX(-50%);
        }

        .avatar-box-5 .img:nth-last-child(1) {
            position: absolute;
            bottom: 16.666666666666668%;
            right: 1px;
        }

        .avatar-box-6 {
            margin: 0 auto;
            margin-top: 300px;
            background-color: #e8e8e8;
             140px;
            height: 140px;
            position: relative;
        }

        .avatar-box-6 .img {
            padding: 2px;
            box-sizing: border-box;
             33.333333333333336%;
            height: 33.333333333333336%;
        }

        .avatar-box-6 .img:nth-of-type(1) {
            position: absolute;
            top: 16.666666666666668%;
            left: 1px;
        }

        .avatar-box-6 .img:nth-of-type(2) {
            position: absolute;
            top: 16.666666666666668%;
            left: 50%;
            transform: translateX(-50%);
        }

        .avatar-box-6 .img:nth-of-type(3) {
            position: absolute;
            top: 16.666666666666668%;
            right: 1px;
        }

        .avatar-box-6 .img:nth-last-child(3) {
            position: absolute;
            bottom: 16.666666666666668%;
            left: 1px;
        }

        .avatar-box-6 .img:nth-last-child(2) {
            position: absolute;
            bottom: 16.666666666666668%;
            left: 50%;
            transform: translateX(-50%);
        }

        .avatar-box-6 .img:nth-last-child(1) {
            position: absolute;
            bottom: 16.666666666666668%;
            right: 1px;
        }

        .avatar-box-7 {
            margin: 0 auto;
            margin-top: 300px;
            background-color: #e8e8e8;
             140px;
            height: 140px;
            position: relative;
        }

        .avatar-box-7 .img {
            padding: 2px;
            box-sizing: border-box;
             33.333333333333336%;
            height: 33.333333333333336%;
        }

        .avatar-box-7 .img:nth-of-type(1) {
            position: absolute;
            top: 1px;
            left: 50%;
            transform: translateX(-50%);
        }

        .avatar-box-7 .img:nth-last-child(6) {
            position: absolute;
            top: 33.333333333333336%;
            left: 1px;
        }

        .avatar-box-7 .img:nth-last-child(5) {
            position: absolute;
            top: 33.333333333333336%;
            left: 50%;
            transform: translateX(-50%);
        }

        .avatar-box-7 .img:nth-last-child(4) {
            position: absolute;
            top: 33.333333333333336%;
            right: 1px;
        }

        .avatar-box-7 .img:nth-last-child(3) {
            position: absolute;
            bottom: 1px;
            left: 1px;
        }

        .avatar-box-7 .img:nth-last-child(2) {
            position: absolute;
            bottom: 1px;
            left: 50%;
            transform: translateX(-50%);
        }

        .avatar-box-7 .img:nth-last-child(1) {
            position: absolute;
            bottom: 1px;
            right: 1px;
        }

        .avatar-box-8 {
            margin: 0 auto;
            margin-top: 300px;
            background-color: #e8e8e8;
             140px;
            height: 140px;
            position: relative;
        }

        .avatar-box-8 .img {
            padding: 2px;
            box-sizing: border-box;
             33.333333333333336%;
            height: 33.333333333333336%;
        }

        .avatar-box-8 .img:nth-of-type(1) {
            position: absolute;
            top: 1px;
            left: 16.666666666666668%;
        }

        .avatar-box-8 .img:nth-of-type(2) {
            position: absolute;
            top: 1px;
            right: 16.666666666666668%;
        }

        .avatar-box-8 .img:nth-last-child(6) {
            position: absolute;
            top: 33.333333333333336%;
            left: 1px;
        }

        .avatar-box-8 .img:nth-last-child(5) {
            position: absolute;
            top: 33.333333333333336%;
            left: 50%;
            transform: translateX(-50%);
        }

        .avatar-box-8 .img:nth-last-child(4) {
            position: absolute;
            top: 33.333333333333336%;
            right: 1px;
        }

        .avatar-box-8 .img:nth-last-child(3) {
            position: absolute;
            bottom: 1px;
            left: 1px;
        }

        .avatar-box-8 .img:nth-last-child(2) {
            position: absolute;
            bottom: 1px;
            left: 50%;
            transform: translateX(-50%);
        }

        .avatar-box-8 .img:nth-last-child(1) {
            position: absolute;
            bottom: 1px;
            right: 1px;
        }

        .avatar-box-9 {
            margin: 0 auto;
            margin-top: 300px;
            background-color: #e8e8e8;
             140px;
            height: 140px;
            position: relative;
        }

        .avatar-box-9 .img {
            padding: 2px;
            box-sizing: border-box;
             33.333333333333336%;
            height: 33.333333333333336%;
        }

        .avatar-box-9 .img:nth-of-type(1) {
            position: absolute;
            top: 1px;
            left: 1px;
        }

        .avatar-box-9 .img:nth-of-type(2) {
            position: absolute;
            top: 1px;
            left: 50%;
            transform: translateX(-50%);
        }

        .avatar-box-9 .img:nth-of-type(3) {
            position: absolute;
            top: 1px;
            right: 1px;
        }

        .avatar-box-9 .img:nth-last-child(6) {
            position: absolute;
            top: 33.333333333333336%;
            left: 1px;
        }

        .avatar-box-9 .img:nth-last-child(5) {
            position: absolute;
            top: 33.333333333333336%;
            left: 50%;
            transform: translateX(-50%);
        }

        .avatar-box-9 .img:nth-last-child(4) {
            position: absolute;
            top: 33.333333333333336%;
            right: 1px;
        }

        .avatar-box-9 .img:nth-last-child(3) {
            position: absolute;
            bottom: 1px;
            left: 1px;
        }

        .avatar-box-9 .img:nth-last-child(2) {
            position: absolute;
            bottom: 1px;
            left: 50%;
            transform: translateX(-50%);
        }

        .avatar-box-9 .img:nth-last-child(1) {
            position: absolute;
            bottom: 1px;
            right: 1px;
        }
        button {
        margin-top: 20px;
         50px;
        height: 50px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="home">
            <div :class="'avatar-box-'+imagesListLength">
              <img class="img" :src="value" v-for="(value,index) in list" :key="index">
            </div>
            <button v-for="(value,index) in 9" :key="index" @click="handelButton(value)">{{value}}</button>
        </div>

    </div>



    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                 // 图片列表
                imagesList:[
                    'https://p.qqan.com/up/2021-11/2021112939567277.jpg',
                    'https://p.qqan.com/up/2021-10/20211022937536544.jpg',
                    'https://p.qqan.com/up/2021-10/2021103204816802.jpg',
                    'https://p.qqan.com/up/2021-9/2021927102125629.jpg',
                    'https://p.qqan.com/up/2021-9/2021911014596085.jpg',
                    'https://p.qqan.com/up/2021-8/20218181014444686.jpg',
                    'https://p.qqan.com/up/2021-7/2021728934463632.jpg',
                    'https://p.qqan.com/up/2021-5/20215271037572047.jpg',
                    'https://p.qqan.com/up/2021-6/2021610943126511.jpg'
                ],
                // 图片列表长度
                imagesListLength: 1
            },
            computed: {
                list: function() {
                return this.imagesList.slice(0, this.imagesListLength);
                }
            },
            methods:{
                // 点击button切换图片数量
                handelButton(val) {
                    this.imagesListLength = val;
                }
            }
        })
    </script>
</body>

</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/shaozhu520/p/15502755.html