当前位置： 首页 > news >正文

【CSS】圆形放大的hover效果

news 2026/5/20 11:28:17

效果

在这里插入图片描述

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）在线生成器将元素裁剪成任意你想要裁剪的形状。
在这里插入图片描述

相关文章：

【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"></…...

编程日记 2023/8/6 7:51:41

work weekly

每周汇报&#xff1a;围绕着项目范围及需求内容完成情况多少、人力资源情况、整体进度情况、成本情况、【范围】多少工作、【资源】投入多少人、【时间】花费多少时间、【成本】花了多少钱 【质量】一般没有特别要求的默认软件开发过程规范要求响应时间 【沟通】这里不说了 …...

编程日记 2023/8/6 7:50:40

Mac端口扫描工具

端口扫描工具 Mac内置了一个网络工具 网络使用工具 按住 Command 空格 然后搜索 “网络实用工具” 或 “Network Utility” 即可 域名/ip转换Lookup ping功能 端口扫描 https://zhhll.icu/2022/Mac/端口扫描工具/ 本文由 mdnice 多平台发布...

编程日记 2023/8/6 7:49:39

如何隐藏开源流媒体EasyPlayer.js视频H.265播放器的实时录像按钮？

目前我们TSINGSEE青犀视频所有的视频监控平台&#xff0c;集成的都是EasyPlayer.js版播放器&#xff0c;它属于一款高效、精炼、稳定且免费的流媒体播放器&#xff0c;可支持多种流媒体协议播放&#xff0c;包括WebSocket-FLV、HTTP-FLV&#xff0c;HLS&#xff08;m3u8&#x…...

编程日记 2023/8/6 7:48:37

Spring Cloud Eureka 和 zookeeper 的区别

CAP理论 在了解eureka和zookeeper区别之前&#xff0c;我们先来了解一下这个知识&#xff0c;cap理论。 1998年的加州大学的计算机科学家 Eric Brewer 提出&#xff0c;分布式有三个指标。Consistency&#xff0c;Availability&#xff0c;Partition tolerance。简称即为CAP。…...

编程日记 2023/8/6 7:47:37

Golang之路---04 并发编程——信道/通道

信道/通道 如果说 goroutine 是 Go语言程序的并发体的话&#xff0c;那么 channel&#xff08;信道&#xff09; 就是 它们之间的通信机制。channel&#xff0c;是一个可以让一个 goroutine 与另一个 goroutine 传输信息的通道&#xff0c;我把他叫做信道&#xff0c;也有人将…...

编程日记 2023/8/6 7:46:36

【Rust 基础篇】Rust派生宏：自动实现trait的魔法

导言 Rust是一门现代的、安全的系统级编程语言&#xff0c;它提供了丰富的元编程特性&#xff0c;其中派生宏&#xff08;Derive Macros&#xff09;是其中之一。派生宏允许开发者自定义类型上的trait实现&#xff0c;从而在编译期间自动实现trait。在本篇博客中&#xff0c;我…...

编程日记 2023/8/6 7:45:34

PHP8的程序结构-PHP8知识详解

在做任何事情之前&#xff0c;都需要遵循一定的规则。在PHP8中&#xff0c;程序能够安照人们的意愿执行程序&#xff0c;主要依靠程序的流程控制语句。 不管多复杂的程序&#xff0c;都是由这些基本的语句组成的。语句是构造程序的基本单位。程序执行的过程就是执行程序语句的…...

编程日记 2023/8/6 7:44:32

Spring Cloud +UniApp 智慧工地云平台源码，智能监控和AI分析系统，危大工程管理、视频监控管理、项目人员管理、绿色施工管理

一套智慧工地云平台源码&#xff0c;PC管理端APP端平板端可视化数据大屏端源码 智慧工地可视化系统利用物联网、人工智能、云计算、大数据、移动互联网等新一代信息技术&#xff0c;通过工地中台、三维建模服务、视频AI分析服务等技术支撑&#xff0c;实现智慧工地高精度动态仿…...

编程日记 2023/8/6 7:43:32

“科创中国”青百会轮值主席吴甜：以大语言模型为代表的AI将引发产业变革

8月1日&#xff0c;“科创中国”青年百人会&#xff08;后文简称青百会&#xff09;联合百度举办“青创汇”高端对话&#xff0c;围绕人工智能技术创新与产业发展交流研讨&#xff0c;同时正式成立“科创中国”青年百人会女性工作委员会。该委员会将鼓励更多女性投身科技创新事…...

编程日记 2023/8/6 7:42:28

【Git /Github】知识学习

1.新手入门视频Github 新手够用指南 | 全程演示&个人找项目技巧放送_哔哩哔哩_bilibili 找开源项目的一些途径 • https://github.com/trending/ 指定一些语言显示出star数较高的项目 • https://github.com/521xueweihan/HelloGitHub 定期分析各种项目 • https://g…...

编程日记 2023/8/6 7:41:25

【雕爷学编程】Arduino动手做（181）---Maixduino AI开发板2

37款传感器与执行器的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止这37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&am…...

编程日记 2023/8/6 7:40:24

PHP 编译问题PEAR package PHP_Archive not installed的解决

php 的编译时需要依赖pear package &#xff0c;目前的问题错误"PEAR package PHP_Archive not installed"&#xff0c;已经明显报出这个问题。 因此编译使用参数 --without-pear 将pear 屏蔽掉编译安装后&#xff0c;再进行安装&#xff1b;同时因为phar 属于pear…...

编程日记 2023/8/6 7:39:22

【探索Linux】—— 步步学习强大的命令行工具 P.1（Linux简介）

目录 前言 一、Linux简介 二、linux的不同发行版本 三、Linux的开源性质 四、Linux的特点 五、Linux代码演示&#xff08;仅供参考&#xff09; 总结 前言 前面我们讲了C语言的基础知识&#xff0c;也了解了一些数据结构&#xff0c;并且讲了有关C的一些知识&#xff…...

编程日记 2023/8/6 7:38:20

STM32 CubeMX USB_OCO(USB_转串口)

STM32 CubeMX STM32 CubeMX 定时器&#xff08;普通模式和PWM模式&#xff09; STM32 CubeMX一、STM32 CubeMX 设置USB时钟设置USB使能UBS功能选择 二、代码部分添加代码实验效果 ![请添加图片描述](https://img-blog.csdnimg.cn/a7333bba478441ab950a66fc63f204fb.png)printf发…...

编程日记 2023/8/6 7:37:19

使用JProfiler进入JVM分析

要评测JVM&#xff0c;必须将JProfiler的评测代理加载到JVM中。这可以通过两种不同的方式发生&#xff1a;在启动脚本中指定-agentpath VM参数&#xff0c;或者使用attach API将代理加载到已经运行的JVM中。 JProfiler支持这两种模式。添加VM参数是评测的首选方式&#xff0c;集…...

编程日记 2023/8/6 7:36:18

高级web前端开发工程师的职责说明（合集）

高级web前端开发工程师的职责说明1 职责&#xff1a; 1、根据需求文档&#xff0c;完成PC端、移动端页面及交互的开发&#xff0c;并保证兼容性和确保产品具有优质的用户体验; 2、熟练使用 HTML 、 CSS 、 JS 、 Ajax 等技术&#xff0c;能解决各种浏览器兼容性问题&#xff…...

编程日记 2023/8/6 7:35:16

powerdesigner各种字体设置；preview字体设置；sql字体设置

1.设置左侧菜单&#xff1a; 步骤如下&#xff1a; tools —> general options —> fonts —> defalut UI font ,选择字体样式及大小即可&#xff0c;同下图。 2.设置preview字体大小&#xff08;sql预览&#xff09; 步骤如下&#xff1a; tools —> general o…...

编程日记 2023/8/6 7:34:15

MyBatis查询数据库（4）

前言&#x1f36d; ❤️❤️❤️SSM专栏更新中&#xff0c;各位大佬觉得写得不错&#xff0c;支持一下&#xff0c;感谢了&#xff01;❤️❤️❤️ Spring Spring MVC MyBatis_冷兮雪的博客-CSDN博客 终于到了MyBatis最后一篇&#xff0c;这篇讲的是动态SQL的使用。 复杂情…...

编程日记 2023/8/6 7:33:11

Python3 处理PDF之PyMuPDF 入门

PyMuPDF 简介 PyMuPDF是一个用于处理PDF文件的Python库&#xff0c;它提供了丰富的功能来操作、分析和转换PDF文档。这个库的设计目标是提供一个简单易用的API,使得开发者能够轻松地在Python程序中实现PDF文件的各种操作。 PyMuPDF的主要特点如下&#xff1a; 跨平台兼容性&a…...

编程日记 2023/8/6 7:32:10

STM32串口调试玄学翻车？从XCOM 2.3到2.0的降级避坑实录

STM32串口调试的版本陷阱&#xff1a;当XCOM 2.3让你的开发板"沉默"时 调试嵌入式系统时&#xff0c;最令人抓狂的莫过于硬件一切正常&#xff0c;代码毫无问题&#xff0c;但串口就是拒绝工作。最近在STM32F103ZET6开发板上遇到了一个诡异现象&#xff1a;同一块板子…...

编程新知 2026/5/20 10:36:03

别再只用结构体了！C++17/20实战中std::tuple的5个高效替代场景（附代码）

别再只用结构体了&#xff01;C17/20实战中std::tuple的5个高效替代场景&#xff08;附代码&#xff09; 当我们需要在C中组合多个不同类型的数据时&#xff0c;结构体(struct)通常是首选方案。但现代C&#xff08;特别是C17/20&#xff09;中的std::tuple提供了一种更灵活的选…...

编程新知 2026/5/20 8:30:38

3步搭建你的游戏串流魔法：用Sunshine让游戏无处不在

3步搭建你的游戏串流魔法&#xff1a;用Sunshine让游戏无处不在 【免费下载链接】Sunshine Self-hosted game stream host for Moonlight. 项目地址: https://gitcode.com/GitHub_Trending/su/Sunshine 还在为不能随时随地玩电脑游戏而烦恼吗&#xff1f;想象一下&#…...

编程新知 2026/5/20 8:28:32

从STM32F103到GD32F303：如何用CubeMX和Keil5低成本‘平替’升级你的项目？

从STM32F103到GD32F303&#xff1a;低成本高性能迁移实战指南 在嵌入式开发领域&#xff0c;芯片选型往往需要在性能与成本之间寻找平衡点。对于已经熟悉STM32F103系列开发但面临成本压力或性能瓶颈的工程师来说&#xff0c;GD32F303系列提供了一个极具吸引力的替代方案。这款国…...

编程新知 2026/5/20 6:33:14

跨域空间匹配（CDSM）：解锁摄像头与雷达融合的3D感知新范式

1. 为什么自动驾驶需要跨域空间匹配技术 当你坐在一辆自动驾驶汽车里&#xff0c;最不希望看到的就是系统把前方停着的卡车误判成广告牌。这种错误在单一传感器系统中其实很常见——摄像头可能因为逆光看不清物体轮廓&#xff0c;雷达又难以识别物体的具体形状。这就是为什么我…...

编程新知 2026/5/20 6:28:54

UCCL：GPU网络传输的性能优化与创新

1. UCCL&#xff1a;GPU网络传输的革命性创新在分布式机器学习训练场景中&#xff0c;GPU集群间的通信效率往往成为制约系统整体性能的关键瓶颈。传统基于TCP/IP的传输协议由于内核协议栈处理和多次数据拷贝等问题&#xff0c;难以满足现代AI训练任务对低延迟和高带宽的严苛要求…...

编程新知 2026/5/20 6:24:32

TVA视觉新范式：工业视觉的百年未有之大变局（4）

重磅预告&#xff1a;本专栏将独家连载系列丛书《智能体视觉技术与应用》部分精华内容&#xff0c;该书是世界首套系统阐述“因式智能体”视觉理论与实践的专著&#xff0c;特邀美国 TypeOne 公司首席科学家、斯坦福大学博士 Bohan 担任技术顾问。Bohan先生师从美国三院院士、“…...

编程新知 2026/5/20 4:30:10

2026年支持人民币计价的金价追踪APP有哪些

家人们谁懂啊&#xff01;上周我发小蹲了3个月的50克古法金镯子终于下手&#xff0c;结账的时候才傻了眼&#xff1a;她之前用来盯金价的APP默认是美元离岸价&#xff0c;自己换算的时候忘了算汇率差和国内基础金价的浮动&#xff0c;预估的总价和实际付款差了快1800&#xff0…...

编程新知 2026/5/20 3:25:56

三步法实战指南：用FanControl打造静音高效的Windows风扇控制系统

三步法实战指南&#xff1a;用FanControl打造静音高效的Windows风扇控制系统 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_T…...

编程新知 2026/5/20 2:18:57

get_kline_serial 用法：K 线序列长度、末尾行与新 bar 判定

前言 分钟线、小时线策略里&#xff0c;指标几乎都挂在 get_kline_serial 返回的序列上。我常见三类报错&#xff1a;长度不够就访问 iloc[-20]、把未收盘的 close 当成定稿信号、以及同一根 K 线里重复下单。下面按天勤量化里的订阅方式、长度防护和与 is_changing 的配合写一…...

编程新知 2026/5/20 1:41:10