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

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平移实现双开门效果 一共要三张图片&#xff0c;一张作为父级背景&#xff0c;两张为兄弟左右布局 父子结构布局 一张作为父级背景&#xff0c;两张为兄弟左右布局。之后添加鼠标悬停效果&#xff0c;两张子图分别从左右平移 [外链图片转存失败,源站可能有防盗链机制,建议…...

3096. 得到更多分数的最少关卡数目

3096. 得到更多分数的最少关卡数目 题目链接&#xff1a;3096. 得到更多分数的最少关卡数目 代码如下&#xff1a; class Solution { public:int minimumLevels(vector<int>& possible) {int s0;//两个玩家能得到的分数和for(int x:possible){sx0?-1:1;}int t0;/…...

AGI思考探究的意义、价值与乐趣Ⅳ

探究in context或Prompt对于LLM来说其根本意义&#xff0c;in context & Prompt Learning带给我们更深一层的提示是什么&#xff1f; 文章里的探索希望能够将in context或Prompt置身于一个更全局的视角来看待&#xff1a;将其视为在真实世界中时空认知流形所映射为数据流形…...

《数据结构》(C语言版)第1章 绪论(上)

第1章 绪论 1.1 数据结构的研究内容1.2 基本概念和术语 1.1 数据结构的研究内容 N.沃思&#xff08;Niklaus Wirth)教授提出&#xff1a; 程序算法数据结构 电子计算机的主要用途 早期&#xff1a;主要用于数值计算 后来&#xff1a;非数值计算&#xff0c;复杂的具有一定结构…...

【Pyhton】数据类型之详讲字符串(上)

本篇文章将详细讲解字符串&#xff1a; 1、定义 定义字符串时&#xff0c;字符串的内容被双引号&#xff0c;单引号&#xff0c;三单引号&#xff0c;三双引号中的其中一个被括住。 例如&#xff1a; 双引号&#xff1a; v1"haha" 单引号&#xff1a; v1hahah…...

算法小白的进阶之路(力扣6~8)

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小…...

【期货】收盘点评。昨天说的,p2409棕榈油在今天或者周一会走出行情

收盘点评 昨天说的&#xff0c;p2409棕榈油在今天或者周一会走出行情。事实就是如此。震荡了几天了&#xff0c;波幅不大的来回震荡&#xff0c;其实主力是不想震荡的&#xff0c;但是不震荡自己的货和行情走不出来。所以我昨天就说&#xff0c;应该就是这一两天会走出一波小行…...

LBS 开发微课堂|Polyline绘制优化:效果更丰富,性能更佳!

为了让广大的开发者 更深入地了解 百度地图开放平台的技术能力 轻松掌握满满的技术干货 更加简单地接入 开放平台的服务 我们特别推出了 “位置服务&#xff08;LBS&#xff09;开发微课堂” 系列技术案例 第一期的主题是 《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类相关的文件&#xff0c;对应数…...

Python试讲

Python试讲 导语Python简介Python及其特点如何使用Python Python与计算计算变量 导语 本次试讲内容如下&#xff1a;Python简介与使用&#xff0c;Python与基本运算 辅助教材为 《趣学Python编程》和《Python编程从入门到实践》 Python简介 Python是目前入门最简单最好学的…...

RESTful API

RESTful API是一种基于REST (Representational State Transfer) 架构风格的应用程序编程接口。它通过使用HTTP协议的不同方法&#xff08;如GET、POST、PUT、DELETE等&#xff09;来对资源进行操作和传输数据。 使用RESTful API构建web应用程序需要遵循以下几个步骤&#xff1…...

NEEP-EN2-2020-Text1

英二-2020-Text 1 摘自新科学家&#xff08;New scientist&#xff09;2018年11月的文章《Rats can make friends with robot rats and will rescue them when stuck》。 以下为个人解析&#xff0c;非官方公开标准资料&#xff0c;可能有误&#xff0c;仅供参考。&#xff08;…...

摩托罗拉E6系统研究

这是很久以前研究摩托罗拉E6刷机包时总结的一些经验&#xff0c;不一定准确但留个纪念&#xff0c;希望会制作刷机包的高手交流学习。 ------------------------------------------------------------------------------------------------------------------------------- 摩…...

Spring中,ApplicationContext主要的实现类型包括?

Spring中&#xff0c;‌ApplicationContext主要的实现类型包括FileSystemXmlApplicationContext、‌ClassPathXmlApplicationContext、‌XmlWebApplicationContext、‌AnnotationConfigWebApplicationContext。‌ FileSystemXmlApplicationContext&#xff1a;‌这个实现从一个…...

JavaScript青少年简明教程:事件及处理

JavaScript青少年简明教程&#xff1a;事件及处理 在编程语言中&#xff0c;事件&#xff08;Event&#xff09;是一种使程序能够响应特定操作或条件发生的机制。它允许程序中的不同部分&#xff08;比如对象、类或模块&#xff09;在发生某些特定情况时互相通信或协作。事件驱…...

node_exporter

目录 指标详解常用指标 指标详解 指标描述node_arp_entriesARP&#xff08;Address Resolution Protocol&#xff09;表中的条目数量&#xff0c;用于将IP地址映射到MAC地址。node_boot_time_seconds系统启动时间的Unix时间戳&#xff0c;表示从1970年1月1日以来的秒数。node…...

近期在看

1. C Primer 2. 深入理解 FFmpeg 3. 鸿蒙 sdk 开发...

C++篇:C++入门基础(1)

C前言&#xff1a; C 的发展历史可以追溯到1979年&#xff0c;当时C语言以其效率和灵活性成为广泛使用的系统编程语言&#xff0c;但它也有一些限制&#xff0c;例如缺乏直接支持面向对象编程&#xff08;OOP&#xff09;的特性。 之后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安全实践&#xff1a;Qwen3-VL:30B本地化飞书权限管控 1. 为什么需要安全自动化 去年我接手了一个棘手的任务&#xff1a;团队每周需要从上百份PDF报告中提取关键数据&#xff0c;整理成统一格式的Excel表格。手动操作不仅耗时&#xff0c;还容易出错。当我尝试用Pyt…...

LM386集成功放电路实战:从零搭建到波形调试全记录(附实测数据)

LM386集成功放电路实战&#xff1a;从零搭建到波形调试全记录&#xff08;附实测数据&#xff09; 在电子设计领域&#xff0c;音频功率放大器一直是基础却充满挑战的课题。LM386作为经典的集成功放芯片&#xff0c;以其低功耗、高增益和易用性著称&#xff0c;成为入门者和资深…...

滴滴盖亚计划ETA数据集实战:如何用Python处理智能交通数据(附完整代码)

滴滴盖亚ETA数据集实战&#xff1a;Python智能交通数据处理全流程解析 引言&#xff1a;智能交通时代的ETA技术价值 在早高峰的深圳深南大道上&#xff0c;网约车司机王师傅刚接单就面临抉择&#xff1a;系统推荐的三条路线中&#xff0c;哪一条能最快到达乘客上车点&#xf…...

Python从入门到精通(03章):变量、数据类型与类型转换

Python从入门到精通&#xff08;第03章&#xff09;&#xff1a;变量、数据类型与类型转换 开头导语 这是本系列第03章。本文采用“知识点讲解 错误示例 正确写法 自测清单”的结构&#xff0c;目标是让你不仅能看懂&#xff0c;还能独立写出可运行代码。建议你边看边敲&…...

GIS工作者必看:如何用SimpleGIS插件解决遥感影像配准难题(含Bing/天地图无偏移地图技巧)

GIS工程师实战指南&#xff1a;SimpleGIS插件在遥感影像配准中的高阶应用 遥感影像配准是GIS工作中的基础操作&#xff0c;却也是最容易出错的环节之一。作为一名长期与影像数据打交道的GIS工程师&#xff0c;我深知配准偏差带来的困扰——从项目返工到数据可信度质疑&#xff…...

OpenClaw批量处理妙用:Qwen3.5-9B同时校对100篇Markdown格式

OpenClaw批量处理妙用&#xff1a;Qwen3.5-9B同时校对100篇Markdown格式 1. 为什么需要批量Markdown校对 作为技术文档写作者&#xff0c;我经常需要处理大量Markdown文件。最让我头疼的问题不是内容创作&#xff0c;而是格式规范——标题层级错乱、中英文混排空格缺失、列表…...

SEO_网站排名不上去?试试这几个SEO解决办法

SEO&#xff1a;网站排名不上去&#xff1f;试试这几个SEO解决办法 如果你发现自己的网站在百度上的排名一直不上去&#xff0c;你可能正面临着一场SEO战争。SEO&#xff0c;全称搜索引擎优化&#xff0c;是提高网站在搜索引擎结果中排名的关键技术。本文将为你详细探讨一些常见…...

HunyuanVideo-Foley惊艳效果:AI生成的赛博朋克城市雨夜环境音效

HunyuanVideo-Foley惊艳效果&#xff1a;AI生成的赛博朋克城市雨夜环境音效 1. 效果展示&#xff1a;赛博朋克音效的沉浸式体验 HunyuanVideo-Foley 私有部署镜像带来的音效生成能力&#xff0c;让AI创作达到了专业音频工程师的水准。我们以"赛博朋克城市雨夜"为场…...

计算机网络学习笔记】初始网络之网络发展和OSI七层模型

以下是基于 Python Pygame 实现的完整俄罗斯方块游戏代码&#xff0c;包含核心功能&#xff08;方块生成、移动、旋转、消除、计分&#xff09;&#xff0c;注释详细可直接运行&#xff1a;第一步&#xff1a;安装依赖先安装 Pygame 库&#xff1a; pip install pygame 第二步…...

SkeyeVSS平台录像任务调度与设备录像查询机制详解

1. 简介 在基于 GB/T 28181 国家标准构建的视频监控平台中&#xff0c;录像功能是核心业务之一&#xff0c;主要分为两类&#xff1a; 平台侧计划录像&#xff1a;由平台主动发起&#xff0c;通过媒体服务器向设备请求实时流&#xff0c;并在平台侧&#xff08;本地或云存储&am…...