前端 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,一经查实,立即删除!

相关文章

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个&…

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

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

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

在当今企业运营中&#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;它是一种将批处理和流…

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;​…

螺栓的拧紧扭矩计算

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

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、提…

geojson文件默认已有的style会导致webGL渲染错误处理办法

geojson文件默认已有的style会导致webGL渲染错误处理办法 相关链接&#xff1a; 功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技 代码&#xff1a; export function showDraw(isFlyTo) {removeLayer()graphicLayer new mars3d.layer.GeoJsonLayer({data: {type: &quo…

有两个长方柱,其高、宽、长分别为12,20,25;10,14,20。求它们的体积。编写一个基于对象的程序,在类中用带参数的构造函数对数据成员初始化

在上一篇文章中的构造函数不带参数&#xff0c;在函数体中对数据成员赋初值。这种方式使该类的每一个对象的数据成员都得到同一组初值&#xff08;例中各个对象的数据成员的初值均为0)。但有时用户希望对不同的对象赋予不同的初值&#xff0c;这时就无法使用上面的办法来解决了…

Open AI 前 Superalignment部门研究员Leopold Aschenbrenner的关于Superintelligence担忧的真挚长文

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

理解MySQL数据库主键:从基础概念到实践

一、前言 在关系型数据库中&#xff0c;主键&#xff08;Primary Key&#xff09;是一个至关重要的概念。它不仅用于唯一标识表中的每一行数据&#xff0c;还在保证数据完整性和执行高效查询方面发挥着重要作用。本篇文章将深入探讨MySQL数据库主键的相关知识&#xff0c;包括…

基于ESP8266串口WIFI模块ESP-01S在Station模式(即接收无线信号( WiFi))下实现STC单片机与手机端网路串口助手相互通信功能

基于ESP8266串口WIFI模块ESP-01S在Station模式(即接收无线信号( WiFi))下实现STC单片机与手机端网路串口助手相互通信功能 ESP8266_01S引脚功能图ESP8266_01S原理图ESP8266_01S尺寸图检验工作1、USB-TTL串口工具(推荐使用搭载CP2102芯片的安信可USB-T1串口)与ESP8266_01S…

基于前馈神经网络的姓氏分类任务(基础)

1、认识前馈神经网络 What is it 图1-1 前馈神经网络结构 人们大多使用多层感知机&#xff08;英语&#xff1a;Multilayer Perceptron&#xff0c;缩写&#xff1a;MLP&#xff09;作为前馈神经网络的代名词&#xff0c;但是除了MLP之外&#xff0c;卷积神经网络&#xff08…

Orangepi Zero2使用外设驱动库wiringOP驱动蜂鸣器

目录 一、安装外设驱动库 1.1 wiringPi外设SDK安装&#xff1a; 二、使用wiringOP库驱动蜂鸣器 2.1 蜂鸣器的硬件连接&#xff1a; 2.2 使用wiringOP库实现蜂鸣器滴滴响&#xff1a; 2.3 设置vim代码显示格式&#xff1a; 一、安装外设驱动库 1.1 wiringPi外设SDK安装&a…