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

【CSS】圆形放大的hover效果

news 2025/12/19 6:50:34

效果

在这里插入图片描述

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

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

编程新知 2025/12/18 16:42:38

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

编程新知 2025/9/24 7:39:50

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

编程新知 2025/12/12 10:30:26

Qt的学习(一)

1.什么是Qt Qt特指用来进行桌面应用开发&#xff08;电脑上写的程序&#xff09;涉及到的一套技术Qt无法开发网页前端&#xff0c;也不能开发移动应用。 客户端开发的重要任务&#xff1a;编写和用户交互的界面。一般来说和用户交互的界面&#xff0c;有两种典型风格&…...

编程新知 2025/12/13 5:29:56

何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡

何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡 背景 我们以建设星云智控官网来做AI编程实践&#xff0c;很多人以为AI已经强大到不需要程序员了&#xff0c;其实不是&#xff0c;AI更加需要程序员&#xff0c;普通人…...

编程新知 2025/12/9 15:13:51

用 Rust 重写 Linux 内核模块实战：迈向安全内核的新篇章

用 Rust 重写 Linux 内核模块实战&#xff1a;迈向安全内核的新篇章 ​​摘要&#xff1a;​​ 操作系统内核的安全性、稳定性至关重要。传统 Linux 内核模块开发长期依赖于 C 语言&#xff0c;受限于 C 语言本身的内存安全和并发安全问题&#xff0c;开发复杂模块极易引入难以…...

编程新知 2025/10/25 19:31:21

OpenGL-什么是软OpenGL/软渲染/软光栅？

‌软OpenGL&#xff08;Software OpenGL&#xff09;‌或者软渲染指完全通过CPU模拟实现的OpenGL渲染方式&#xff08;包括几何处理、光栅化、着色等&#xff09;&#xff0c;不依赖GPU硬件加速。这种模式通常性能较低&#xff0c;但兼容性极强&#xff0c;常用于不支持硬件加速…...

编程新知 2025/12/6 16:50:12

二维数组 行列混淆区分 js

二维数组定义 行 row&#xff1a;是“横着的一整行” 列 column&#xff1a;是“竖着的一整列” 在 JavaScript 里访问二维数组 grid[i][j] 表示 第i行第j列的元素 let grid [[1, 2, 3], // 第0行[4, 5, 6], // 第1行[7, 8, 9] // 第2行 ];// grid[i][j] 表示 第i行第j列的…...

编程新知 2025/11/26 21:51:23