首页 > 其他分享 >圆形放大的hover效果

圆形放大的hover效果

时间:2024-03-13 11:33:33浏览次数:24  
标签:hover clip 50% 圆形 avatar path circle 50px 放大

<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

相关文章

  • 在HTML界面显示图片略缩图 , 点击图片放大显示
    HTML样式 <divid="outerdiv"style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;"> <divid="innerdiv"style="position:absolute;"> <imgid=&......
  • 音频功率放大器方案LM4863替代DP4863
    音频放大器是在产生声音的输出元件上重建输入的音频信号的设备,其重建的信号音量和功率级都要理想——如实、有效且失真低。音频范围为约20Hz~20000Hz,因此放大器在此范围内必须有良好的频率响应。根据应用的不同,功率大小差异很大,从耳机的毫瓦级到TV或PC音频的数瓦,再到“迷你”家庭立......
  • powerpoint: 放大缩小动画
    一,设置放大动画1,选中图片->工具栏动画标签栏下,选中放大/缩小:属性值:设置为400%选中平滑开始、平滑结束触发器:设置为单击:2,使图片放大后位置在屏幕中间选择图片,选择路径动画->直线:把动画的目标位置:红色的圆点,拖动到页面的中间:选中位置动画,计时的开始:设置为:......
  • 蜂窝基站和信号放大器的区别介绍
    蜂窝基站和信号放大器在移动通信网络中起着不同的作用,它们的主要区别如下:定义和用途:蜂窝基站:也称为公用移动通信基站,是移动设备接入互联网的接口设备,也是无线电台站的一种形式。它提供无线覆盖,使得用户可以在其覆盖范围内进行通信。信号放大器:也称为手机信号放大器或直放站,......
  • C# GDI+绘制网络获取指定QQ圆形头像框
    某论坛的评论区模块,发现这功能很不错,琢磨了一晚上做了大致一样的,用来当做注册模块的头像绑定功能,下面通过实例代码给大家介绍下C#获取指定QQ头像绘制圆形头像框GDI(Graphics)的方法,感兴趣的朋友一起看看吧。效果图:完全代码(下方有详细解读)1234567891011......
  • 微信小程序设置hover-class="none"无效的解决方法
    如上,切换自定义菜单栏,tab会出现点击状态,设置hover-class="none"无效。其实这个问题其实很简单,简单到都想不到,看下出现点击态的组件样式,大概率应该是有设置 cursor:pointer; ,删除掉就好了,问题解决。来看下cursor: pointer;其实这个通常是使用在PC端的,当光标移动到链接导航上......
  • 【Filament】绘制圆形
    1前言​Filament环境搭建中介绍了Filament的Windows和Android环境搭,绘制三角形中介绍了绘制纯色和彩色三角形,绘制矩形中介绍了绘制纯色和彩色矩形,本文将使用Filament绘制圆形。2绘制圆形​本文项目结构如下,完整代码资源→Filament绘制圆形。2.1自定义基......
  • 【libGDX】使用Mesh绘制圆形
    1前言​使用Mesh绘制三角形中介绍了绘制三角形的方法,使用Mesh绘制矩形中介绍了绘制矩形的方法,本文将介绍绘制圆形的方法。​libGDX以点、线段、三角形为图元,没有提供绘制圆形的接口。要绘制圆形边框,必须通过割圆法逼近圆形;要绘制圆形的内部,必须通过三角形逼近圆形,如......
  • 放大镜
    事件onmouseover鼠标移动到某元素之上触发事件onmousemove鼠标在某元素之上移动时触发事件onmouseout鼠标从某元素之上移出时触发事件dom对象offsetLeft返回元素水平偏移量(从上到下开始计算)offsetTop返回元素垂直偏移量(从左到右开始计算)对选择框设置绝对布局......
  • echarts绘制世界地图的时候显示南海诸岛的局部放大图
    ehcarts在绘制中国地图的时候,判断geo的map为china的时候会自动加上南海诸岛的局部放大图。产品想在绘制世界地图的时候也加上南海诸岛,搞了半天没搞定,请教的同事搞定了。同事在此:简书ID:昊桐_260c。解决办法就是把南海诸岛的地图数据直接放在注册的JSON里面。{     ......