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

效果

思路 

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/35444.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

怎么在view销毁的时候 把bitmap recycle

在Android开发中&#xff0c;当一个视图&#xff08;View&#xff09;因为某些原因&#xff08;比如屏幕旋转、配置更改等&#xff09;不再被使用时&#xff0c;应当释放其所占用的资源&#xff0c;尤其是当这些资源是可变的&#xff08;mutable&#xff09;并且占用大量内存时…

RSA非对称加密-openssl命令及C语言实现

RSA加密算法是一种非对称加密算法。在公开密钥加密和电子商业中RSA被广泛使用。本文介绍如何使用openssl命令和C代码实现基础的RSA加/解密和签名/验签功能。 一、openssl命令实现RSA加解密 1、生成私钥和公钥 生成私钥 openssl genrsa -out private.key 2048 #…

前端 CSS 经典:mix-blend-mode 属性

前言&#xff1a;这是一个混合属性&#xff0c;作用是将两个颜色混合生成一个新颜色。可以将视频和文字相融合&#xff0c;产生动态文字效果。 效果 实现代码 <!DOCTYPE html> <html lang"en"><head><meta charset"utf-8" />&l…

cuav系列飞控关于MAIN-IO 的输出数量控制

在无人机设置中&#xff0c;经常涉及到使用AUX辅助通道来控制附属设备&#xff0c;或者直接把主控输出通道放到AUX。但是CUAV系列飞控按照常规设置并不能正常启用AUX输出&#xff0c;通过查看飞控源码找到 原因 一些机型例如24001使用了12个电机&#xff0c;常规主通道只有8个&…

深度清洁:使用npm prune命令优化你的Node.js项目

标题&#xff1a;深度清洁&#xff1a;使用npm prune命令优化你的Node.js项目 在Node.js的世界中&#xff0c;随着项目的不断扩展&#xff0c;package.json文件中的依赖项可能会变得冗余和膨胀。未使用的依赖项不仅会占用不必要的磁盘空间&#xff0c;还可能引入安全风险。幸运…

【神经网络】CNN网络:深入理解卷积神经网络

&#x1f388;个人主页&#xff1a;豌豆射手^ &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进步&#xff01; CNN网络&#xff1a;深入理解…

Leetcode 股票买卖

买卖股票最佳时机 I II 不限制交易次数 prices [7,1,5,3,6,4] 启发思路&#xff1a;最后一天发生了什么&#xff1f; 从第0天到第5天结束时的利润 从第0天到第4天结束时的利润 第5天的利润 &#xff08;第5天的利润&#xff1a;0/-4/4&#xff09; 关键词&#xff1a;天…

Java中请写出最常见的10个RuntimeException

在Java中&#xff0c;RuntimeException是所有未检查异常&#xff08;Unchecked Exception&#xff09;的基类&#xff0c;未检查异常不需要显式地捕获或声明在方法签名中。以下是10个最常见的RuntimeException子类&#xff1a; NullPointerException 当应用程序试图在需要对象的…

常用的企业级快速传输大文件平台

在当今企业运营中&#xff0c;数据管理成了一项不可或缺的任务。企业每日需处理庞大的数据量&#xff0c;这包括高清视频、大量数据集和复杂的设计图纸等大型文件。然而&#xff0c;传统的文件传输手段&#xff0c;比如通过电子邮件发送附件或使用FTP服务&#xff0c;已经难以满…

完成一个有趣的Web期末大作业(html、css、javascript、MySQL、Node.js)

题目&#xff1a;学校老师的要求很开放&#xff0c;要自己做一个感兴趣的网页&#xff0c;要求使用基础的html、css和javascript&#xff0c;后端要使用数据库。 网上都是各种管理系统&#xff0c;看多了觉得没啥意思&#xff0c;要做一个自己感兴趣的网站。近几年沉迷犬夜叉这…

“论大数据处理架构及其应用”写作框架,软考高级,系统架构设计师

论文真题 大数据处理架构是专门用于处理和分析巨量复杂数据集的软件架构。它通常包括数据收集、存储、处理、分析和可视化等多个层面&#xff0c;旨在从海量、多样化的数据中提取有价值的信息。Lambda架构是大数据平台里最成熟、最稳定的架构&#xff0c;它是一种将批处理和流…

达梦数据库增删改查语句

库名&#xff08;CONFIRMATION&#xff09; 表名&#xff08;APP_CONF_NODE&#xff09;&#xff0c;字段&#xff08;USER_ACCOUNTS&#xff09; 前言&#xff1a;创建表 CREATE TABLE "CONFIRMATION"."APP_CONF_NODE" ("ID" BIGINT IDENTITY(…

AI图书下载:《ChatGPT百万富翁-最快赚钱之道》

《ChatGPT百万富翁-最快赚钱之道》&#xff08;ChatGPT Millionaire. The Fastest Way To Make Real Money&#xff09;是一本集合了五本书内容的作品&#xff0c;由Harper Hanz编写&#xff0c;旨在探讨如何利用ChatGPT这一强大的自然语言处理系统创造被动收入。 以下是该书各…

Mysql索引和事务

一、索引是做什么的? 很多时候&#xff0c;当你的应用程序进行SQL查询速度很慢时&#xff0c;应该想想是否可以建索引。 大多数MySQL索引(PRIMARY KEY、UNIQUE、INDEX和FULLTEXT)在B树中存储。只是空间列类型的索引使用R-树&#xff0c;并且MEMORY表还支持hash索引。 索引是…

Ubuntu-22.04 安装禅道

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…

使用setpci 读取/修改pci寄存器

setpci setpci是一个查询和修改pci寄存器的linux 命令: root@PTWH0108:~# setpci --help Usage: setpci [<options>] (<device>+ <reg>[=<values>]*)*General options: -f Dont complain if theres nothing to do -v Be …

螺栓的拧紧扭矩计算

对于采用控制扭矩方式拧紧的螺栓连接而言&#xff0c;螺栓扭矩是一个非常重要的参数&#xff0c;扭矩的大小决定了螺栓预紧力的大小&#xff0c;而螺栓预紧力又是预紧型螺栓连接的灵魂。前文讨论了螺栓扭矩的校验&#xff0c;即如何验证螺栓扭矩是否满足设计要求&#xff0c;与…

脚本工具库】划分图像数据集(附源码)

在机器学习和深度学习任务中&#xff0c;数据集的划分是非常重要的一步。我们通常需要将数据集划分为训练集、验证集和测试集&#xff0c;以便进行模型训练和评估。手动操作不仅耗时&#xff0c;而且容易出错。为了解决这个问题&#xff0c;我们可以编写一个Python脚本&#xf…

python-登录界面-demo

文章目录 前言python-登录界面-demo 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人每天的运气都不会太差&#xff0c;实在白嫖的话&#xff0c;那欢迎常来啊!!! python-…

Flask之表单

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 目录 一、HTML表单 二、使用Flask-WTF处理表单 2.1、定义WTForms表单类 2.2、输出HTML代码 2.3、在模板中渲染表单 三、处理表单数据 3.1、提…