圓形放大的hover效果

小珍珠在河里敲代码發表於2024-03-13
<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>

相關文章