<template> <div class="container"> <div class="avatar"></div> </div> </template> <script lang="ts" setup> import { ref } from 'vue'; </script> <style lang="scss" scoped> // clip-path: circle(); // 以元素的中心点为圆的中心点,最小宽度一半为圆的半径。 // clip-path: circle(50%); // 半径50%; // clip-path: circle(at 50% 50%); // 中心点位置在x:50%,y:50%。 // clip-path: circle(50% at 50% 50%); // 半径50%;中心点位置在x:50%,y:50%。 // clip-path: circle(50px at 50px 50px); // 半径50px;中心点位置在x:50px,y:50px。 .avatar{ background: url('https://picsum.photos/200/300') center; width: 200px; height: 200px; border-radius: 50%; cursor: pointer; position: relative; border: 5px solid #000; } .avatar::before,.avatar::after{ content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; transition: all 0.3s; left: 0; top: 0; } .avatar::before{ background: rgba(0,0,0,0.5); } .avatar::after{ background: inherit; clip-path: circle(0% at 50% 50%); } .avatar:hover::after{ clip-path: circle(50% at 50% 50%); } </style>
标签:hover,clip,50%,圆形,avatar,path,circle,50px,放大 From: https://www.cnblogs.com/Jansens520/p/18070273