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

【CSS】圆形放大的hover效果

news 2026/4/3 18:52:00

效果

在这里插入图片描述

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

Hi3519 DV500上跑YOLOv5n，从7秒到34毫秒：一个模型算子优化带来的200倍加速实战

Hi3519 DV500上YOLOv5n性能优化实战&#xff1a;从7秒到34毫秒的200倍加速秘诀 当我们在嵌入式设备上部署目标检测模型时&#xff0c;性能往往是最大的挑战。最近在Hi3519 DV500芯片上部署YOLOv5n模型的经历让我深刻体会到了这一点——最初的推理时间竟然长达7秒&#xff0c;完…...

编程新知 2026/4/3 18:34:18

7B、14B、80B大模型参数量解析：性能、成本与选择全攻略！

本文解析了7B、14B、80B大模型参数量代表的含义及其对模型能力、资源消耗、训练与推理成本的影响。参数量越大&#xff0c;模型表达能力越强&#xff0c;但资源需求与成本也越高。7B适合轻量级任务与低预算场景&#xff0c;14B兼顾性能与成本&#xff0c;80B适用于追求顶尖性能…...

编程新知 2026/4/3 18:05:31

Excel数据合并工具软件：一键汇总无压力

办公经常收到多份表格需要合并&#xff0c; Excel合并常踩坑。 单元格合表没用。 表头丢了更闹心。 为啥用它&#xff1f; 之前工具处理合并单元格失效、表头无法保留。 这款刚好补上短板。 核心功能 Excel数据合并工具。 省心好用。 核心就一事&#xff1a; 多Excel…...

编程新知 2026/4/3 17:21:03

保姆级教学：用FUTURE POLICE和MySQL管理你的语音字幕数据

保姆级教学&#xff1a;用FUTURE POLICE和MySQL管理你的语音字幕数据 1. 为什么需要管理语音字幕数据&#xff1f; 想象一下这样的场景&#xff1a;你刚刚用FUTURE POLICE处理了100个会议录音&#xff0c;得到了精确到毫秒的字幕文件。这些文件散落在各个文件夹里&#xff0c…...

编程新知 2026/4/3 17:10:48

证书创建方法说明

生成证书 方法一&#xff1a;合适&#xff08;临时测试&#xff0c;不需要管理&#xff09; 快速生成脚本&#xff08;一键完成&#xff09; 创建 create_lan_cert.sh&#xff1a; #!/bin/bash# 配置参数 IP_ADDR"192.168.1.100" # 修改为你的局域网IP DAYS365…...

编程新知 2026/4/3 16:09:53

离散化与差分结合应用例题精讲

一、离散化是什么&#xff1f; 1.为什么用离散化 引入&#xff1a;当题目给我们几个区间涂色&#xff0c;总长为20亿&#xff0c;要求我们统计最后有颜色的区域。 聪明的我们立刻就想建立一个数组&#xff0c;每接收到一个区间就遍历该区间打上标记。最后遍历整个数组统计带…...

编程新知 2026/4/3 15:17:15

RyTuneX：WinUI3驱动的Windows性能优化引擎

RyTuneX&#xff1a;WinUI3驱动的Windows性能优化引擎 【免费下载链接】RyTuneX RyTuneX is a cutting-edge optimizer built with the WinUI 3 framework, designed to amplify the performance of Windows devices. Crafted for both Windows 10 and 11. 项目地址: https:/…...

编程新知 2026/4/3 14:21:44

Ostrakon-VL-8B构建智能相册：基于自然语言的照片检索与回忆生成

Ostrakon-VL-8B构建智能相册&#xff1a;基于自然语言的照片检索与回忆生成 你有没有过这样的经历&#xff1f;手机里存了几千张照片&#xff0c;想找一张去年夏天在山上拍的照片&#xff0c;却要翻上十几分钟&#xff0c;甚至最后也没找到。或者&#xff0c;看着一堆旅行照片…...

编程新知 2026/4/3 13:21:05

Qwen3.5-9B-AWQ-4bit视觉理解效果实测：表格截图OCR准确率与语义概括质量分析

Qwen3.5-9B-AWQ-4bit视觉理解效果实测&#xff1a;表格截图OCR准确率与语义概括质量分析 1. 模型概述 Qwen3.5-9B-AWQ-4bit是一个支持图像理解的多模态模型&#xff0c;能够结合上传图片与文字提示词&#xff0c;输出中文分析结果。这个量化版本特别适合处理图片主体识别、场…...

编程新知 2026/4/3 13:21:05

Unity零基础入门指南：借助快马AI生成你的第一个可交互3D场景

Unity零基础入门指南&#xff1a;借助快马AI生成你的第一个可交互3D场景 作为一个刚接触Unity的新手&#xff0c;我完全理解那种面对空白项目时的迷茫感。好在最近发现了InsCode(快马)平台&#xff0c;它让我这个编程小白也能快速创建出像模像样的3D交互场景。下面我就分享一下…...

编程新知 2026/4/3 12:42:35