CSS平移实现双开门效果
CSS平移实现双开门效果
一共要三张图片,一张作为父级背景,两张为兄弟左右布局
父子结构布局
一张作为父级背景,两张为兄弟左右布局。之后添加鼠标悬停效果,两张子图分别从左右平移
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NAGhI82m-1722616487491)(https://i-blog.csdnimg.cn/direct/462214b141c9402bb3aa03cd288e9691.png)]
照片
fm.img
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jf4ZF2w6-1722616487493)(https://i-blog.csdnimg.cn/direct/9f5333b93aef4f878584e137cbe43e61.jpeg#pic_center)]
bg.img
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yDTyaV7r-1722616487494)(https://i-blog.csdnimg.cn/direct/8090cdbddf8a4c1aac5d7367c266cfb6.jpeg#pic_center)]
代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS平移实现双开门效果</title><style>* {margin: 0;padding: 0;}.father {display: flex;margin: 0 auto;width: 1366px;height: 600px;background-image: url(img/bg.jpg);overflow: hidden;}.father .left,.father .right {width: 50%;height: 600px;background-image: url(img/fm.jpg);transition: all 0.5s;}.father .right {/* right表示精灵图从右面取 */background-position: right 0;}.father:hover .left {transform: translate(-100%);}.father:hover .right {transform: translateX(100%);}</style>
</head>
<body><div class="father"><div class="left"></div><div class="right"></div></div>
</body>
</html>
相关文章:
CSS平移实现双开门效果
CSS平移实现双开门效果 一共要三张图片,一张作为父级背景,两张为兄弟左右布局 父子结构布局 一张作为父级背景,两张为兄弟左右布局。之后添加鼠标悬停效果,两张子图分别从左右平移 [外链图片转存失败,源站可能有防盗链机制,建议…...
3096. 得到更多分数的最少关卡数目
3096. 得到更多分数的最少关卡数目 题目链接:3096. 得到更多分数的最少关卡数目 代码如下: class Solution { public:int minimumLevels(vector<int>& possible) {int s0;//两个玩家能得到的分数和for(int x:possible){sx0?-1:1;}int t0;/…...
AGI思考探究的意义、价值与乐趣Ⅳ
探究in context或Prompt对于LLM来说其根本意义,in context & Prompt Learning带给我们更深一层的提示是什么? 文章里的探索希望能够将in context或Prompt置身于一个更全局的视角来看待:将其视为在真实世界中时空认知流形所映射为数据流形…...
《数据结构》(C语言版)第1章 绪论(上)
第1章 绪论 1.1 数据结构的研究内容1.2 基本概念和术语 1.1 数据结构的研究内容 N.沃思(Niklaus Wirth)教授提出: 程序算法数据结构 电子计算机的主要用途 早期:主要用于数值计算 后来:非数值计算,复杂的具有一定结构…...
【Pyhton】数据类型之详讲字符串(上)
本篇文章将详细讲解字符串: 1、定义 定义字符串时,字符串的内容被双引号,单引号,三单引号,三双引号中的其中一个被括住。 例如: 双引号: v1"haha" 单引号: v1hahah…...
算法小白的进阶之路(力扣6~8)
💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小…...
【期货】收盘点评。昨天说的,p2409棕榈油在今天或者周一会走出行情
收盘点评 昨天说的,p2409棕榈油在今天或者周一会走出行情。事实就是如此。震荡了几天了,波幅不大的来回震荡,其实主力是不想震荡的,但是不震荡自己的货和行情走不出来。所以我昨天就说,应该就是这一两天会走出一波小行…...
LBS 开发微课堂|Polyline绘制优化:效果更丰富,性能更佳!
为了让广大的开发者 更深入地了解 百度地图开放平台的技术能力 轻松掌握满满的技术干货 更加简单地接入 开放平台的服务 我们特别推出了 “位置服务(LBS)开发微课堂” 系列技术案例 第一期的主题是 《Polyline 绘制优化升级》 你还想了解哪些…...
VS Code设置C++编译器路径
C_Cpp.default.compilerPath是C/C编译器路径; python.condaPath是conda路径....
laravel项目配置
创建laravel项目 composer create-project --prefer-dist laravel/laravel 项目名称生成项目key php artisan key:generate.清理配置缓存 php artisan config:clearlaravel生成代码 官网链接 php artisan make:model Flight --all生成Flight类相关的文件,对应数…...
Python试讲
Python试讲 导语Python简介Python及其特点如何使用Python Python与计算计算变量 导语 本次试讲内容如下:Python简介与使用,Python与基本运算 辅助教材为 《趣学Python编程》和《Python编程从入门到实践》 Python简介 Python是目前入门最简单最好学的…...
RESTful API
RESTful API是一种基于REST (Representational State Transfer) 架构风格的应用程序编程接口。它通过使用HTTP协议的不同方法(如GET、POST、PUT、DELETE等)来对资源进行操作和传输数据。 使用RESTful API构建web应用程序需要遵循以下几个步骤࿱…...
NEEP-EN2-2020-Text1
英二-2020-Text 1 摘自新科学家(New scientist)2018年11月的文章《Rats can make friends with robot rats and will rescue them when stuck》。 以下为个人解析,非官方公开标准资料,可能有误,仅供参考。(…...
摩托罗拉E6系统研究
这是很久以前研究摩托罗拉E6刷机包时总结的一些经验,不一定准确但留个纪念,希望会制作刷机包的高手交流学习。 ------------------------------------------------------------------------------------------------------------------------------- 摩…...
Spring中,ApplicationContext主要的实现类型包括?
Spring中,ApplicationContext主要的实现类型包括FileSystemXmlApplicationContext、ClassPathXmlApplicationContext、XmlWebApplicationContext、AnnotationConfigWebApplicationContext。 FileSystemXmlApplicationContext:这个实现从一个…...
JavaScript青少年简明教程:事件及处理
JavaScript青少年简明教程:事件及处理 在编程语言中,事件(Event)是一种使程序能够响应特定操作或条件发生的机制。它允许程序中的不同部分(比如对象、类或模块)在发生某些特定情况时互相通信或协作。事件驱…...
node_exporter
目录 指标详解常用指标 指标详解 指标描述node_arp_entriesARP(Address Resolution Protocol)表中的条目数量,用于将IP地址映射到MAC地址。node_boot_time_seconds系统启动时间的Unix时间戳,表示从1970年1月1日以来的秒数。node…...
近期在看
1. C Primer 2. 深入理解 FFmpeg 3. 鸿蒙 sdk 开发...
C++篇:C++入门基础(1)
C前言: C 的发展历史可以追溯到1979年,当时C语言以其效率和灵活性成为广泛使用的系统编程语言,但它也有一些限制,例如缺乏直接支持面向对象编程(OOP)的特性。 之后Bjarne Stroustrup(也就是C之父)是C的创始…...
【Linux】网络编程_3
文章目录 十、网络基础5. socket编程socket 常见APIsockaddr结构简单的UDP网络程序 未完待续 十、网络基础 5. socket编程 socket 常见API // 创建 socket 文件描述符 (TCP/UDP, 客户端 服务器) int socket(int domain, int type, int protocol);// 绑定端口号 (TCP/UDP, 服…...
OpenClaw安全实践:Qwen3-VL:30B本地化+飞书权限管控
OpenClaw安全实践:Qwen3-VL:30B本地化飞书权限管控 1. 为什么需要安全自动化 去年我接手了一个棘手的任务:团队每周需要从上百份PDF报告中提取关键数据,整理成统一格式的Excel表格。手动操作不仅耗时,还容易出错。当我尝试用Pyt…...
LM386集成功放电路实战:从零搭建到波形调试全记录(附实测数据)
LM386集成功放电路实战:从零搭建到波形调试全记录(附实测数据) 在电子设计领域,音频功率放大器一直是基础却充满挑战的课题。LM386作为经典的集成功放芯片,以其低功耗、高增益和易用性著称,成为入门者和资深…...
滴滴盖亚计划ETA数据集实战:如何用Python处理智能交通数据(附完整代码)
滴滴盖亚ETA数据集实战:Python智能交通数据处理全流程解析 引言:智能交通时代的ETA技术价值 在早高峰的深圳深南大道上,网约车司机王师傅刚接单就面临抉择:系统推荐的三条路线中,哪一条能最快到达乘客上车点…...
Python从入门到精通(03章):变量、数据类型与类型转换
Python从入门到精通(第03章):变量、数据类型与类型转换 开头导语 这是本系列第03章。本文采用“知识点讲解 错误示例 正确写法 自测清单”的结构,目标是让你不仅能看懂,还能独立写出可运行代码。建议你边看边敲&…...
GIS工作者必看:如何用SimpleGIS插件解决遥感影像配准难题(含Bing/天地图无偏移地图技巧)
GIS工程师实战指南:SimpleGIS插件在遥感影像配准中的高阶应用 遥感影像配准是GIS工作中的基础操作,却也是最容易出错的环节之一。作为一名长期与影像数据打交道的GIS工程师,我深知配准偏差带来的困扰——从项目返工到数据可信度质疑ÿ…...
OpenClaw批量处理妙用:Qwen3.5-9B同时校对100篇Markdown格式
OpenClaw批量处理妙用:Qwen3.5-9B同时校对100篇Markdown格式 1. 为什么需要批量Markdown校对 作为技术文档写作者,我经常需要处理大量Markdown文件。最让我头疼的问题不是内容创作,而是格式规范——标题层级错乱、中英文混排空格缺失、列表…...
SEO_网站排名不上去?试试这几个SEO解决办法
SEO:网站排名不上去?试试这几个SEO解决办法 如果你发现自己的网站在百度上的排名一直不上去,你可能正面临着一场SEO战争。SEO,全称搜索引擎优化,是提高网站在搜索引擎结果中排名的关键技术。本文将为你详细探讨一些常见…...
HunyuanVideo-Foley惊艳效果:AI生成的赛博朋克城市雨夜环境音效
HunyuanVideo-Foley惊艳效果:AI生成的赛博朋克城市雨夜环境音效 1. 效果展示:赛博朋克音效的沉浸式体验 HunyuanVideo-Foley 私有部署镜像带来的音效生成能力,让AI创作达到了专业音频工程师的水准。我们以"赛博朋克城市雨夜"为场…...
计算机网络学习笔记】初始网络之网络发展和OSI七层模型
以下是基于 Python Pygame 实现的完整俄罗斯方块游戏代码,包含核心功能(方块生成、移动、旋转、消除、计分),注释详细可直接运行:第一步:安装依赖先安装 Pygame 库: pip install pygame 第二步…...
SkeyeVSS平台录像任务调度与设备录像查询机制详解
1. 简介 在基于 GB/T 28181 国家标准构建的视频监控平台中,录像功能是核心业务之一,主要分为两类: 平台侧计划录像:由平台主动发起,通过媒体服务器向设备请求实时流,并在平台侧(本地或云存储&am…...
