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; width: 140px; height: 140px; } .base-img { padding: 2px; box-sizing: border-box; } .avatar-box-1 { margin: 0 auto; margin-top: 300px; background-color: #e8e8e8; width: 140px; height: 140px; } .avatar-box-1 .img { padding: 2px; box-sizing: border-box; width: 100%; height: 100%; } .avatar-box-2 { margin: 0 auto; margin-top: 300px; background-color: #e8e8e8; width: 140px; height: 140px; display: flex; align-items: center; } .avatar-box-2 .img { padding: 2px; box-sizing: border-box; width: 50%; height: 50%; } .avatar-box-3 { margin: 0 auto; margin-top: 300px; background-color: #e8e8e8; width: 140px; height: 140px; position: relative; } .avatar-box-3 .img { padding: 2px; box-sizing: border-box; width: 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; width: 140px; height: 140px; position: relative; } .avatar-box-4 .img { padding: 2px; box-sizing: border-box; width: 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; width: 140px; height: 140px; position: relative; } .avatar-box-5 .img { padding: 2px; box-sizing: border-box; width: 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; width: 140px; height: 140px; position: relative; } .avatar-box-6 .img { padding: 2px; box-sizing: border-box; width: 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; width: 140px; height: 140px; position: relative; } .avatar-box-7 .img { padding: 2px; box-sizing: border-box; width: 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; width: 140px; height: 140px; position: relative; } .avatar-box-8 .img { padding: 2px; box-sizing: border-box; width: 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; width: 140px; height: 140px; position: relative; } .avatar-box-9 .img { padding: 2px; box-sizing: border-box; width: 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; width: 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>