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

CSS平移实现双开门效果

news 文章来源：https://blog.csdn.net/m0_73701759/article/details/140859544 2025/1/11 7:46:29

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;两张子图分别从左右平移 [外链图片转存失败,源站可能有防盗链机制,建议…...

编程日记 2024/8/3 9:19:09

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

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

编程日记 2024/8/3 9:18:08

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

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

编程日记 2024/8/3 9:15:05

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

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

编程日记 2024/8/3 9:14:04

【Pyhton】数据类型之详讲字符串（上）

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

编程日记 2024/8/3 9:13:04

算法小白的进阶之路（力扣6~8）

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

编程日记 2024/8/3 9:10:00

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

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

编程日记 2024/8/3 9:08:59

LBS 开发微课堂｜Polyline绘制优化：效果更丰富，性能更佳！

为了让广大的开发者 更深入地了解 百度地图开放平台的技术能力 轻松掌握满满的技术干货 更加简单地接入 开放平台的服务 我们特别推出了 “位置服务&#xff08;LBS&#xff09;开发微课堂” 系列技术案例 第一期的主题是 《Polyline 绘制优化升级》 你还想了解哪些…...

编程日记 2024/8/3 9:07:58

VS Code设置C++编译器路径

C_Cpp.default.compilerPath是C/C编译器路径; python.condaPath是conda路径....

编程日记 2024/8/3 9:06:57

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;对应数…...

编程日记 2024/8/3 9:05:56

Python试讲

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

编程日记 2024/8/3 9:04:55

RESTful API

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

编程日记 2024/8/3 9:02:53

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

编程日记 2024/8/3 9:01:52

摩托罗拉E6系统研究

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

编程日记 2024/8/3 8:59:50

Spring中，ApplicationContext主要的实现类型包括？

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

编程日记 2024/8/3 8:58:49

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

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

编程日记 2024/8/3 8:57:48

node_exporter

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

编程日记 2024/8/3 8:56:48

近期在看

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

编程日记 2024/8/3 8:54:45

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

C前言&#xff1a; C 的发展历史可以追溯到1979年&#xff0c;当时C语言以其效率和灵活性成为广泛使用的系统编程语言&#xff0c;但它也有一些限制&#xff0c;例如缺乏直接支持面向对象编程&#xff08;OOP&#xff09;的特性。 之后Bjarne Stroustrup(也就是C之父)是C的创始…...

编程日记 2024/8/3 8:52:43

【Linux】网络编程_3

文章目录 十、网络基础5. socket编程socket 常见APIsockaddr结构简单的UDP网络程序 未完待续 十、网络基础 5. socket编程 socket 常见API // 创建 socket 文件描述符 (TCP/UDP, 客户端 服务器) int socket(int domain, int type, int protocol);// 绑定端口号 (TCP/UDP, 服…...

编程日记 2024/8/3 8:51:42

Kafka设计与原理详解

RocketMQ 是一款开源的分布式消息系统&#xff0c;基于高可用分布式集群技术&#xff0c;提供低延时的、高可靠的消息发布与订阅服务。同时&#xff0c;广泛应用于多个领域&#xff0c;包括异步通信解耦、企业解决方案、金融支付、电信、电子商务、快递物流、广告营销、社交、即…...

编程日记 2024/8/3 8:50:40

IPV6公网暴露下的OPENWRT防火墙安全设置（只允许访问局域网中指定服务器指定端口其余拒绝）

首先是防火墙的常规配置和区域配置 标的有点乱但是选项含义都做了解释&#xff0c;看不懂可以直接按图抄作业。 其次是对需要访问的端口做访问放通 情况1 DDNS位于openwrt网关上&#xff0c;外网访问openwrt&#xff0c;通过端口转发访问内部服务器。此情况需要设置端口转发。 …...

编程日记 2024/8/3 8:49:39

单调栈② | Java | LeetCode 接雨水 最大的矩形

42. 接雨水 暴力法 for循环遍历每一个柱子&#xff0c;内层for循环找到左边和右边比它高的柱子 时间复杂度 n^2 优化&#xff1a;添加一个预处理 定义一个数组&#xff0c;存放该柱子右边比他高的柱子是哪一个 再用一个数组&#xff0c;存放该柱子左边比他高的柱子是哪一个 …...

编程日记 2024/8/3 8:47:37

2024年全国青少年信息素养大赛总决赛日赛程表

2024全国青少年信息素养大赛赛程表分赛场&#xff08;浙江传媒学院桐乡校区、桐乡技师学院&#xff09;日期地点时间赛项16日传媒学院8:00-9:00检录 9:00-10:30开赛图形化编程挑战赛&#xff08;小学1-3年级&#xff09;A组12:00-13:00检录 13:00-14:30开赛图形化编程挑战赛&am…...

编程日记 2024/8/3 8:46:36

PHP：连接钉钉接口-钉钉回调事件，本地测试数据

前置数据参考 数据说明&#xff1a;参见官方文档回调事件消息体加解密 - 钉钉开放平台 (dingtalk.com) URL后面带的参数&#xff1a; signature5a65ceeef9aab2d149439f82dc191dd6c5cbe2c0&timestamp1445827045067&noncenEXhMP4r Post参数&#xff1a; { &quo…...

编程日记 2024/8/3 8:43:34

【C++标准模版库】vector的介绍及使用

vector 一.vector的介绍二.vector的使用1.vector 构造函数2.vector 空间增长3.vector 增删查改4.vector 迭代器的使用1.正向迭代器2.反向迭代器 5.victor 迭代器失效问题&#xff08;重点&#xff09; 三.vector不支持 流提取与流插入四.vector存储自定义类型1.存储string2.存储…...

编程日记 2024/8/3 8:41:31

数说故事|引爆社媒的森贝儿IP，品牌如何实现流量变现？

以可爱、雅痞、贱萌......的外表加魔性舞姿出圈的可爱小狗——森贝儿贵宾犬Milo&#xff0c;用“可爱微怒”的表情演绎着当代打工人的“疯态”&#xff0c;并迅速晋升成不少打工人高频使用的表情包。 最近几年&#xff0c;“萌系”爆款IP频出&#xff0c;用小动物的形象、可爱…...

编程日记 2024/8/3 8:40:30

使用openpyxl库对Excel条件格式的深度探索

哈喽，大家好，我是木头左！ openpyxl中的条件格式 在openpyxl中，可以使用ConditionalFormatting类来创建和管理条件格式。这个类有两个主要的方法：add_conditional_formatting()和remove_conditional_formatting()，分别用于添加和删除条件格式。 add_conditional_formatt…...

编程日记 2024/8/3 8:39:29

原生javascript中的ajax通信技术

AJAX&#xff08;Asynchronous JavaScript and XML&#xff09;是一种在无需重新加载整个网页的情况下&#xff0c;能够更新部分网页的技术。也就是实现前后端交互的功能。以下是使用AJAX的基本步骤和代码演示&#xff1a; 1.创建一个XMLHttpRequest对象&#xff1a; var xhr…...

编程日记 2024/8/3 8:38:28

SpringBoot Vue用自签名证书SSL配置https，http转发到https（整理文章）

要配置https地址访问&#xff0c;需要向服务器商申请和使用SSL证书。由于是测试阶段&#xff0c;我们自己创建SSL证书&#xff0c;叫作自签名证书。 1.创建自签名证书 Vue前端生成自签名证书我们用openssl 参考文章一 参考文章二SpringBoot后端生成自签名证书用JDK自带的keyt…...

编程日记 2024/8/3 8:37:27

wordpress微信对接/seo如何快速排名百度首页

准备材料 高筋面粉&#xff0c;分量自己把握&#xff08;据说高筋和低筋混合的比较好&#xff09;酵母粉&#xff0c;分量自己把握黄油&#xff0c;分量自己把握花生油&#xff08;有条件的可以用橄榄油&#xff09;盐糖酱油料酒番茄酱洋葱彩椒翅根芝士&#xff08;非常重要&a…...

编程日记 2025/1/11 5:43:19

如何做网站方案/成人本科

简介&#xff1a; 主要逻辑在java实现&#xff0c;h5只有一个a标签调用接口。 后台分两个接口&#xff1a; 接口1&#xff1a;登录前缀接口&#xff0c;h5负责调用唤醒QQ授权。 接口2&#xff1a;需要在腾讯开放平台配置回调地址的接口&#xff0c;就是授权成功后回调。 j…...

编程日记 2025/1/11 4:00:01

网站建设公司谁管/网店推广的作用

本来打算用绘制贝塞尔曲线的方法绘制心形&#xff0c;可是本数学渣怎么都搞不定那几个控制点坐标。研究了一上午&#xff0c;通过lineTo方法&#xff0c;最终还是绘制出封闭的心形图。还收获了意外的效果。 看来就差个女朋友&#xff0c;给她看了。 代码如下&#xff1a; .h文件…...

编程日记 2025/1/11 1:42:09

wordpress侧栏文本代码/网络推广公司简介

c表a表查询语句 select a.*,c.* FROM a LEFT JOIN c on FIND_IN_SET(a.a_id,c.a_id)...

编程日记 2025/1/10 22:37:51

网站怎么做营销/互联网推广是什么

申明&#xff1a;文章中部分内容有涉及官方帮助或者网上资源整合&#xff0c;如有违权&#xff0c;请速与作者联系&#xff0c;谢谢&#xff01;作者&#xff1a;316191099qq.com培训&#xff1a;Skype for Business Server 2015-项目实战-培训-QQ群:65235615。&#xff08;学员…...

编程日记 2025/1/10 22:13:36

网站建设对数据库有何要求/如何做好网络营销

一、概述 taskdef是Ant内置任务&#xff0c;用于将任务定义添加到当前project中, 以便可以在当前project中使用此任务。taskdef是一种将adapter和adaptto属性分别设置为org.apache.tools.ant.TaskAdapter和org.apache.tools.ant.Task的typedef。typedef的特性同样适用于taskdef…...

编程日记 2025/1/10 19:10:23