【CSS】圆形放大的hover效果

效果

在这里插入图片描述

index.html

<!DOCTYPE html>
<html>
  <head>
    <title> Document </title>
    <link type="text/css" rel="styleSheet" href="index.css" />
  </head>
  <body>
    <div class="avatar"></div>
  </body>
</html>

index.css

body{
  width: 100vw;
  height: 100vh;
  margin: 0;
  /* 弹性盒 */
  display: flex;
  /* 水平居中 */
  justify-content:  center;
  /* 垂直居中 */
  align-items: center;
  /* backgroud: #191c29 */
  background: #fff;
}
.avatar{
  /*设置背景图像*/
  background: url(./avatar.png) center / cover;
  /*设置元素宽度*/
  width: 200px;
  /*设置元素高度*/
  height: 200px;
  /*设置元素的圆角半径*/
  border-radius: 50%;
  /*设置鼠标指针 - 手型*/
  cursor: pointer;
  /*设置元素为相对定位*/
  position: relative;
}

.avatar::before,.avatar::after{
  content: '';
  /*设置before和after为绝对定位*/
  position: absolute;
  /* 等同于 `top: 0; right: 0; bottom: 0; left: 0;` */ 
  inset: 0;
  /*设置before和after为继承父元素的圆角值*/
  border-radius: inherit;
}

.avatar::before{
  /* 设置before的背景颜色*/ 
  background: rgba(0, 0, 0, 0.7);
}

/* http://tools.jb51.net/code/css3path */
.avatar::after{
  /*设置after为继承父元素的背景图像*/
  background: inherit;
  /*设置元素裁剪路径,默认其半径为0%,圆心为 50% 50%*/
  clip-path: circle(0% at 50% 50%);
  /*设置转化过度时长,使其平滑过度到鼠标移入状态*/
  transition: 0.5s;
}

.avatar:hover::after{
  /*设置鼠标移入时元素的裁剪路径,半径为50%,圆心为 50% 50%*/
  clip-path: circle(50% at 50% 50%);
}

avatar.png

在这里插入图片描述


扩展

你可以使用CSS3 剪贴路径(Clip-path)在线生成器将元素裁剪成任意你想要裁剪的形状。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/63653.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

机器学习常用Python库安装

机器学习常用Python库安装 作者日期版本说明Dog Tao2022.06.16V1.0开始建立文档 文章目录 机器学习常用Python库安装Anaconda简介使用镜像源配置 Pip简介镜像源配置 CUDAPytorch安装旧版本 TensorFlowGPU支持说明 DGL简介安装DGLLife RDKitscikit-multilearn Anaconda 简介 …

英语使用场景口语

HOTEL ENGLISH hotel motel inn b&b Process 1.booking a room can i reserve a room? reservation do you have and singles? double room standard room deluxe room presidential suite do you have a pick-up service? 2.checking in where is the recept…

MySQL的数据插入总结(不存在就插入,存在就更新)

MySQL的数据插入总结(不存在就插入&#xff0c;存在就更新) 1. on duplicate key update 当在insert语句后面带上ON DUPLICATE KEY UPDATE 子句&#xff0c;而要插入的行与表中现有记录的惟一索引或主键中产生重复值&#xff0c;那么就会发生旧行的更新&#xff1b;如果插入的…

AI 绘画Stable Diffusion 研究(五)sd文生图功能详解(下)

大家好&#xff0c;我是风雨无阻。 上一篇文章详细介绍了sd文生图的功能及使用注意事项&#xff0c;感兴趣的朋友可以前往查看&#xff1a;AI 绘画Stable Diffusion 研究&#xff08;四&#xff09;sd文生图功能详解&#xff08;上&#xff09; 。 那今天这篇文章&#xff0c;我…

sigmoid ReLU 等激活函数总结

sigmoid ReLU sigoid和ReLU对比 1.sigmoid有梯度消失问题&#xff1a;当sigmoid的输出非常接近0或者1时&#xff0c;区域的梯度几乎为0&#xff0c;而ReLU在正区间的梯度总为1。如果Sigmoid没有正确初始化&#xff0c;它可能在正区间得到几乎为0的梯度。使模型无法有效训练。 …

【Github】Uptime Kuma:自托管监控工具的完美选择

简介&#xff1a; Uptime Kuma 是一款强大的自托管监控工具&#xff0c;通过简单的部署和配置&#xff0c;可以帮助你监控服务器、VPS 和其他网络服务的在线状态。相比于其他类似工具&#xff0c;Uptime Kuma 提供更多的灵活性和自由度。本文将介绍 Uptime Kuma 的功能、如何使…

C#--设计模式之单例模式

单例模式大概是所有设计模式中最简单的一种&#xff0c;如果在面试时被问及熟悉哪些设计模式&#xff0c;你可能第一个答的就是单例模式。 单例模式的实现分为两种&#xff1a; 饿汉式&#xff1a;在静态构造函数执行时就立即实例化。懒汉式&#xff1a;在程序执行过程中第一…

C++类的定义和对象的创建

一、问题引入 C类和对象到底是什么意思&#xff1f; 1、C 中的类&#xff08;Class&#xff09;可以看做C语言中结构体&#xff08;Struct&#xff09;的升级版。结构体是一种构造类型&#xff0c;可以包含若干成员变量&#xff0c;每个成员变量的类型可以不同&#xff1b; …

K8s的高可用搭建

高可用技术搭建 在master节点上需要部署&#xff1a;keepalived、haproxy

Linux 信号signal处理机制

Signal机制在Linux中是一个非常常用的进程间通信机制&#xff0c;很多人在使用的时候不会考虑该机制是具体如何实现的。signal机制可以被理解成进程的软中断&#xff0c;因此&#xff0c;在实时性方面还是相对比较高的。Linux中signal机制的模型可以采用下图进行描述。 每个进程…

openGauss学习笔记-33 openGauss 高级数据管理-视图

文章目录 openGauss学习笔记-33 openGauss 高级数据管理-视图33.1 语法格式33.2 参数说明33.3 示例 openGauss学习笔记-33 openGauss 高级数据管理-视图 视图与基本表不同&#xff0c;是一个虚拟的表。数据库中仅存放视图的定义&#xff0c;而不存放视图对应的数据&#xff0c…

Misc取证学习

文章目录 Misc取证学习磁盘取证工具veracryto挂载fat文件DiskGenius 磁盘取证例题[RCTF2019]disk 磁盘[](https://ciphersaw.me/ctf-wiki/misc/disk-memory/introduction/#_2)内存取证工具volatility 内存取证例题数字取证赛题0x01.从内存中获取到用户admin的密码并且破解密码 …

Maven: ‘mvn‘ is not recognized as an internal or external command

下载并配置好Maven之后&#xff0c;CMD测试安装是否成功&#xff1a;mvn -v 提示&#xff1a; mvn is not recognized as an internal or external command, operable program or batch file. 检查环境变量&#xff1a; MAVEN_HOME: %MAVEN_HOME%\bin: 看上去没问题&#x…

【Java】异常处理 之 Java的异常

Java的异常 在计算机程序运行的过程中&#xff0c;总是会出现各种各样的错误。 有一些错误是用户造成的&#xff0c;比如&#xff0c;希望用户输入一个int类型的年龄&#xff0c;但是用户的输入是abc&#xff1a; // 假设用户输入了abc&#xff1a; String s "abc&quo…

uniapp微信小程序底部弹窗自定义组件

基础弹窗效果组件 <template><view><viewclass"tui-actionsheet-class tui-actionsheet":class"[show ? tui-actionsheet-show : ]"><view class"regional-selection">底部弹窗</view></view><!-- 遮罩…

行业追踪,2023-08-07

自动复盘 2023-08-07 凡所有相&#xff0c;皆是虚妄。若见诸相非相&#xff0c;即见如来。 k 线图是最好的老师&#xff0c;每天持续发布板块的rps排名&#xff0c;追踪板块&#xff0c;板块来开仓&#xff0c;板块去清仓&#xff0c;丢弃自以为是的想法&#xff0c;板块去留让…

el-popover使用自定义图标

使用el-popover实现鼠标点击或浮动到自定义图标上弹出表格弹窗&#xff0c;官方文档上使用的是按钮el-button&#xff0c;如果想换成图标或其他的组件的话直接把el-button替换掉即可。注意替换之后的组件一定要加slot“reference”&#xff0c;不然组件是显示不出来的。 代码如…

前端小练习:案例5.律动爱心

目录 一.效果预览图 二.实现思路 ​编辑 1.html部分 2.css部分 三.完整代码 一.效果预览图 二.实现思路 想要实现爱心律动效果并不难&#xff0c;核心点是关键帧动画。 定义律动爱心需要的元素块&#xff0c;使用定位或者弹性布局等方法&#xff08;定位元素不适合布局&…

zookeeper和kafka

目录 一、zookeeper理论 1.1、zookeeper定义 1.2、zookeeper工作机制 1.3、zookeeper特点 1.4、zookeeper的数据结构 1.5、zookeeper应用场景 1.6、zookeeper的选举机制 二、部署Zookeeper 集群 2.1、环境准备 2.2、安装 Zookeeper 2.3、修改配置文件 2.4、配置…

百度智能创做AI平台

家人们好&#xff0c;在数字化时代&#xff0c;人工智能正引领着一场前所未有的创新浪潮。今天&#xff0c;我们将为大家介绍百度智能创做AI平台&#xff0c;这个为创意赋能、助力创作者的强大工具。无论你是创意工作者、内容创作者&#xff0c;还是想要释放内心创造力的个人&a…