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

前端 CSS 经典：图层放大的 hover 效果

news 2026/3/26 19:29:33

效果

思路 

设置 3 层元素，最上层元素使用 clip-path 裁剪成圆，hover 改变圆大小，添加过渡效果。

实现代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width"/><title>document</title><style>body {background: #000;}.avatar {background: url(../../../images/demo/img.jpg);background-size: cover;height: 200px;width: 200px;border-radius: 50%;cursor: pointer;position: relative;}.avatar::after,.avatar::before {content: "";position: absolute;inset: 0;border-radius: 50%;}.avatar::before {background: rgba(0, 0, 0, 0.5);}.avatar::after {background: inherit;clip-path: circle(0% at 50% 50%);transition: 0.3s;}.avatar:hover::after {clip-path: circle(50% at 50% 50%);}</style></head><body><div class="avatar"></div><script></script></body>
</html>

相关文章：

前端 CSS 经典：图层放大的 hover 效果

效果 思路 设置 3 层元素&#xff0c;最上层元素使用 clip-path 裁剪成圆&#xff0c;hover 改变圆大小&#xff0c;添加过渡效果。 实现代码 <!DOCTYPE html> <html lang"en"><head><meta charset"utf-8" /><meta http-eq…...

编程日记 2024/6/27 14:27:44

Flutter实现页面间传参

带参跳转 步骤 在router中配置这个路由需要携带的参数,这里的参数是 arguments,注意要用花括号包裹参数名称 在相应组件中实现带参构造函数 在state类中可以直接使用${widget.arguments}来访问到传递的参数 在其他页面中使用Navigator.pushNamed()带参跳转...

编程日记 2024/6/27 14:26:42

如何在Java中实现安全编码

如何在Java中实现安全编码 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在当今数字化和网络化的时代&#xff0c;安全编码成为软件开发中至关重要的一环。特…...

编程日记 2024/6/27 14:24:40

C#开发-集合使用和技巧（八）集合中的排序Sort、OrderBy、OrderByDescending

C#开发-集合使用和技巧&#xff08;八&#xff09;集合中的排序Sort、OrderBy、OrderByDescending List<T>.Sort()方法签名使用场景示例升序实现效果 降序实现效果 IEnumerable<T>.OrderBy()方法签名使用场景示例实现效果 Enumerable<T>.OrderByDescending()…...

编程日记 2024/6/27 14:23:39

仓库管理系统

摘 要 随着电子商务的快速发展和物流行业的蓬勃发展&#xff0c;仓库管理成为了企业重要的一环。仓库管理涉及到商品的入库、出库、库存管理等一系列操作&#xff0c;对于企业的运营效率和成本控制具有重要影响。传统的仓库管理方式往往依赖于人工操作和纸质记录&#xff0c;存…...

编程日记 2024/6/27 14:22:37

AI绘画Stable Diffusion：超级质感真人大模型，逼真青纯！

大家好&#xff0c;我是设计师阿威 今天和大家分享一个具有超级质感的基于SD1.5的真人大模型&#xff1a;极致质感-DgirlV5&#xff0c;该模型追求质感的不断优化&#xff0c;细到发丝&#xff0c;当前最新版本是V5.1&#xff0c;修正了V5版本整体色彩发红的问题。 作者对该模…...

编程日记 2024/6/27 14:21:36

CMake笔记之CMAKE_INSTALL_PREFIX详解以及ROS中可执行文件为什么会在devel_lib中

CMake笔记之CMAKE_INSTALL_PREFIX详解以及ROS中可执行文件为什么会在devel_lib中 code review! 文章目录 CMake笔记之CMAKE_INSTALL_PREFIX详解以及ROS中可执行文件为什么会在devel_lib中1.CMAKE_INSTALL_PREFIX详解变量作用设置 CMAKE_INSTALL_PREFIX示例影响范围常见用法特别…...

编程日记 2024/6/27 14:20:35

数据结构之二叉树的超详细讲解(3)--(二叉树的遍历和操作)

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 数据结构之二叉树的超详细讲解(3)--(二叉树的遍历和操作) 收录于专栏【数据结构初阶】 本专栏旨在分享学习数据结构学习的一点学习笔记&#xff0c;欢迎大家在评…...

编程日记 2024/6/27 14:19:34

Arduino - 旋转编码器 - 伺服电机

Arduino - 旋转编码器 - 伺服电机 Arduino - Rotary Encoder In this tutorial, We are going to learn how to program Arduino to rotate a servo motor according to the rotary encoder’s output value. 在本教程中&#xff0c;我们将学习如何对Arduino进行编程&#xff…...

编程日记 2024/6/27 14:18:33

儿童电动音乐牙刷OTP芯片方案：NV040C，耐温耐压，抗干扰能力强

一&#xff1a;方案背景概述 随着科技的飞速发展&#xff0c;源于对儿童口腔健康深入细致的关怀&#xff0c;以及对现代科技在日常生活用品中应用的不断追求&#xff0c;儿童电动音乐牙刷OTP芯片方案的诞生。 二&#xff1a;芯片简介 NV040C语音芯片是一款性能稳定、适合工厂量…...

编程日记 2024/6/27 14:17:31

Sentinel链路流控模式失效的解决方法

解决方法 1、在pom.xml中增加sentinel-web-servlet的依赖&#xff0c;我使用的版本是1.7.1 <dependency><groupId>com.alibaba.csp</groupId><artifactId>sentinel-web-servlet</artifactId> </dependency>2、在项目中添加一个FilterCon…...

编程日记 2024/6/27 14:16:30

Web应用安全测试-专项漏洞（一）

Web应用安全测试-专项漏洞&#xff08;一&#xff09; 专项漏洞部分注重测试方法论&#xff0c;每个专项仅列举一个例子。实际测试过程中&#xff0c;需视情况而定。 文章目录 Web应用安全测试-专项漏洞&#xff08;一&#xff09;Web组件&#xff08;SSL/WebDAV&#xff09;漏…...

编程日记 2024/6/27 14:14:27

VMware ESXi 8.0U2c macOS Unlocker OEM BIOS Huawei (华为) FusionServer 定制版

VMware ESXi 8.0U2c macOS Unlocker & OEM BIOS Huawei (华为) FusionServer 定制版 ESXi 8.0U2 标准版&#xff0c;Dell (戴尔)、HPE (慧与)、Lenovo (联想)、Inspur (浪潮)、Cisco (思科)、Hitachi (日立)、Fujitsu (富士通)、NEC (日电)、Huawei (华为)、xFusion (超聚…...

编程日记 2024/6/27 14:13:25

python中的高阶函数介绍

在Python中&#xff0c;高阶函数是指那些可以接受函数作为参数或者返回函数作为结果的函数。这种特性使得函数式编程成为可能&#xff0c;并且可以编写出更加简洁和灵活的代码。以下是Python中一些常用的高阶函数&#xff1a; map() map() 函数接受一个函数和一个可迭代对象作为…...

编程日记 2024/6/27 14:11:22

华为OD机试 - 石头剪刀布游戏（Java 2024 D卷 200分）

华为OD机试 2024D卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;D卷C卷A卷B卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测…...

编程日记 2024/6/27 14:10:21

[开发|java] LocalDate转化为LocalDateTime

要将 java.time.LocalDate 转换为 java.time.LocalDateTime&#xff0c;你需要指定一天中的时间。因为 LocalDate 只包含日期部分&#xff08;年、月、日&#xff09;&#xff0c;而 LocalDateTime 包含日期和时间&#xff08;时、分、秒、纳秒&#xff09;&#xff0c;所以在转…...

编程日记 2024/6/27 14:09:19

介绍几种 MySQL 官方高可用方案

前言&#xff1a; MySQL 官方提供了多种高可用部署方案&#xff0c;从最基础的主从复制到组复制再到 InnoDB Cluster 等等。本篇文章以 MySQL 8.0 版本为准&#xff0c;介绍下不同高可用方案架构原理及使用场景。 1.MySQL Replication MySQL Replication 是官方提供的主从同…...

编程日记 2024/6/27 14:08:18

IMU坐标系与自定义坐标系转化

1.首先示例图为例&#xff1a; 虚线黑色角度为IMU的坐标系&#xff1b;实线为自定义坐标系&#xff1b; 矫正&#xff1a;&#xff08;默认angleyaw为IMU采的数据角度&#xff09; angleyaw_pt angleyaw-25;if(-180<angleyaw&&angleyaw<-155) // 角度跳变问…...

编程日记 2024/6/27 14:07:17

《STM32 HAL库》RCC 相关系列函数详尽解析—— HAL_RCC_OscConfig()

观前提示&#xff1a;函数完整代码在文末&#xff0c;本文梳理了函数HAL_RCC_OscConfig()的主要逻辑和实现方法f105时钟树详解图 HAL_RCC_OscConfig() 函数介绍&#xff1a; 此函数是一个用于初始化RCC&#xff08;Reset and Clock Control&#xff09;振荡器&#xff08;Osc…...

编程日记 2024/6/27 14:06:15

手动将jar包导入本地Maven仓库

1、进入存放jar包的目录&#xff0c;可以先放进仓库底下 2、cmd回车 3、执行命令&#xff0c;看到BUILD SUCCESS就是成功了 -DgroupId、-DartifactId、-Dversion、-Dfile记得换成自己对应的 mvn install:install-file -DgroupIdcom.github.03 -DartifactIdonvif -Dversion1.0…...

编程日记 2024/6/27 14:05:14

南京四季旅游攻略：最美时节去最美地方

南京四季旅游攻略&#xff1a;最美时节去最美地方 &#x1f338;&#x1f343;&#x1f342;❄️本文作者&#xff1a;南京码农 发布日期&#xff1a;2026年3月26日 关键词&#xff1a;南京旅游、四季景点、旅游攻略、南京必去、季节推荐前言&#xff1a;南京&#xff0c;一座四…...

编程新知 2026/3/26 18:50:40

ESP32 SPI性能调优指南：从80MHz时钟到DMA配置，避开那些坑

ESP32 SPI性能调优实战&#xff1a;突破80MHz时钟与DMA配置的终极指南 当你在ESP32项目中遇到SPI通信速度瓶颈时&#xff0c;是否曾为如何突破80MHz时钟限制而苦恼&#xff1f;是否在配置DMA时踩过各种坑&#xff1f;本文将带你深入ESP32 SPI性能优化的核心领域&#xff0c;从硬…...

编程新知 2026/3/26 18:50:40

League Toolkit：重新定义英雄联盟游戏体验的智能辅助工具

League Toolkit&#xff1a;重新定义英雄联盟游戏体验的智能辅助工具 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 价值定位&am…...

编程新知 2026/3/26 18:22:28

功能关键词 AI 短剧爆发：Sora、Pixverse、可灵视频重构影视行业（中外模型对比）

c.myliang.cn深耕 AI 内容创作与 SEO 优化多年&#xff0c;聚焦 2026 年百度 SEO/GEO 关键词布局&#xff0c;结合 AI 短剧行业爆发趋势&#xff0c;帮影视从业者快速掌握 Sora、Pixverse、可灵视频等中外模型实操技巧&#xff0c;适配百度算法与行业需求&#xff0c;低成本打造…...

编程新知 2026/3/26 18:22:28

Claude Remote Control 技术详解：跨设备无缝协作的远程会话控制方案

Claude Remote Control 技术详解：跨设备无缝协作的远程会话控制方案 声明： 📝 作者：甜城瑞庄的核桃（ZMJ） 原创学习笔记，欢迎分享，但请保留作者信息及原文链接哦～ 引言 在现代软件开发场景中,开发者经常需要在多个设备间切换工作环境。Claude Code 推出的 Remote Con…...

编程新知 2026/3/26 17:57:54

pyNastran：工程仿真领域的Python变革者——打破商业软件垄断的技术突围

pyNastran&#xff1a;工程仿真领域的Python变革者——打破商业软件垄断的技术突围 【免费下载链接】pyNastran A Python-based interface tool for Nastrans file formats 项目地址: https://gitcode.com/gh_mirrors/py/pyNastran 价值定位&#xff1a;重新定义工程仿真…...

编程新知 2026/3/26 17:21:32

熵值法实战避坑指南：从数据标准化到权重计算，新手最容易踩的3个雷

熵值法实战避坑指南&#xff1a;从数据标准化到权重计算&#xff0c;新手最容易踩的3个雷 第一次用熵值法做综合评价时&#xff0c;我盯着屏幕上几乎相同的权重值发愣——这和教科书上"差异越大权重越高"的描述完全不符。直到深夜排查才发现&#xff0c;原来在数据标…...

编程新知 2026/3/26 16:57:19

LeaguePrank终极指南：安全打造个性化英雄联盟游戏体验

LeaguePrank终极指南&#xff1a;安全打造个性化英雄联盟游戏体验 【免费下载链接】LeaguePrank 项目地址: https://gitcode.com/gh_mirrors/le/LeaguePrank LeaguePrank是一款基于英雄联盟LCU API开发的个性化定制工具&#xff0c;让玩家能够在不违反游戏规则的前提下…...

编程新知 2026/3/26 16:49:16

利用VMware虚拟机在本地模拟星图GPU平台环境测试MogFace-large

利用VMware虚拟机在本地模拟星图GPU平台环境测试MogFace-large 想试试最新的MogFace-large人脸检测模型&#xff0c;但手头没有现成的云GPU服务器&#xff1f;或者想先在本地环境里跑通流程&#xff0c;验证一下效果再上云&#xff1f;今天就来分享一个非常实用的方法&#xf…...

编程新知 2026/3/26 16:16:58

SAM3图片分割模型入门：无需训练，输入提示词即可提取物体掩码

SAM3图片分割模型入门&#xff1a;无需训练&#xff0c;输入提示词即可提取物体掩码 1. 什么是SAM3图片分割模型 SAM3&#xff08;Segment Anything Model 3&#xff09;是2025年发布的一款革命性图像分割模型&#xff0c;它彻底改变了传统需要大量标注数据训练的模式。这个模…...

编程新知 2026/3/26 15:50:39