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

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

news 2026/2/9 6:53:26

效果

思路 

设置 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

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/9/24 23:08:17

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

编程新知 2026/1/25 7:20:01

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2026/1/25 13:32:52

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

编程新知 2026/1/31 9:18:40

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...

编程新知 2026/2/6 10:22:29

uniapp 集成腾讯云 IM 富媒体消息（地理位置/文件）

UniApp 集成腾讯云 IM 富媒体消息全攻略&#xff08;地理位置/文件&#xff09; 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型&#xff0c;核心实现方式&#xff1a; 标准消息类型&#xff1a;直接使用 SDK 内置类型&#xff08;文件、图片等&#xff09;自…...

编程新知 2025/10/25 5:53:05

使用python进行图像处理—图像变换（6）

图像变换是指改变图像的几何形状或空间位置的操作。常见的几何变换包括平移、旋转、缩放、剪切&#xff08;shear&#xff09;以及更复杂的仿射变换和透视变换。这些变换在图像配准、图像校正、创建特效等场景中非常有用。 6.1仿射变换(Affine Transformation) 仿射变换是一种…...

编程新知 2026/1/28 7:51:14

Spring Boot SQL数据库功能详解

Spring Boot自动配置与数据源管理 数据源自动配置机制 当在Spring Boot项目中添加数据库驱动依赖&#xff08;如org.postgresql:postgresql&#xff09;后&#xff0c;应用启动时自动配置系统会尝试创建DataSource实现。开发者只需提供基础连接信息&#xff1a; 数据库URL格…...

编程新知 2025/11/12 14:24:03

Async-profiler 内存采样机制解析：从原理到实现

引言 在 Java 性能调优的工具箱中&#xff0c;async-profiler 是一款备受青睐的低开销采样分析器。它不仅能分析 CPU 热点&#xff0c;还能精确追踪内存分配情况。本文将深入探讨 async-profiler 实现内存采样的多种机制&#xff0c;结合代码示例解析其工作原理。 为什么需要内…...

编程新知 2025/11/28 10:30:19

android计算器代码

本次作业要求实现一个计算器应用的基础框架。以下是布局文件的核心代码&#xff1a; <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"andr…...

编程新知 2025/10/19 16:04:20