纯css实现九宫格图片
本篇文章所分享的内容主要涉及到结构伪类选择器，不熟悉的小伙伴可以了解一下，在常用的css选择器中我也有分享相关内容。
话不多说，接下来我们直接上代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {height: 100vh;display: flex;justify-content: center;align-items: center;}.box {width: 300px;height: 300px;display: flex;justify-content: space-between;flex-wrap: wrap;position: relative;}.item {position: relative;transition: 0.5s;height: 100px;width: 100px;overflow: hidden;/* box-shadow: inset 0 0 0 1px #fff; */background-size: 300px 300px;background-image: url(./images/sc.jpg);}.item:nth-child(3n + 1) {background-position-x: 0;left: -20px;}.item:nth-child(3n + 2) {background-position-x: -100%;left: 0;}.item:nth-child(3n) {background-position-x: -200%;left: 20px;}.item:nth-child(n + 7) {background-position-y: -200%;top: 20px;}.item:nth-child(-n + 6) {background-position-y: -100px;top: 0;}.item:nth-child(-n + 3) {background-position-y: 0;top: -20px;}.box:hover .item {left: 0;top: 0;}</style><body><div class="box"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div></body>
</html>
效果展示：
今日寄语：没有什么是不可能的，只是需要你去尝试！
相关文章：
纯css实现九宫格图片
本篇文章所分享的内容主要涉及到结构伪类选择器，不熟悉的小伙伴可以了解一下，在常用的css选择器中我也有分享相关内容。 话不多说，接下来我们直接上代码： <!DOCTYPE html> <html lang"en"><head>&l…...
【MySQL】数据库的增删查改+备份与恢复
文章目录 一、创建数据库create二、数据库所使用的编码2.1 查询字符集和校验集2.2 指定编码创建数据库2.3 不同的校验集对比 三、删除数据库drop四、查看数据库show五、修改数据库alter六、数据库的备份与恢复6.1 备份 mysqldump6.2 恢复source6.3 仅备份几张表或备份多个数据库…...
Docker 部署 redis 举例
1、搜索镜像，也可以访问 https://hub.docker.com/ 搜索镜像，查看所有版本。 $ docker search redis2、拉取镜像 $ docker pull redis:5.03、启动镜像，并配置相关映射与绑定（附：Docker 常用命令与指令参数）…...
通过HandlerMethodArgumentResolver实现统一添加接口入参参数
背景：项目中有些接口的入参需要用户id信息，最简单的做法在每个Controller方法调用的时候获取登录信息然后给入参设置用户id，但是这样就会有很多重复性的工作。另一个可行的也更好的方案可以使用HandlerMethodArgumentResolver来实现。 部分示…...
JAVA-spring boot 2.4.X报错Unable to find GatewayFilterFactory with name Hystrix
网关升级spring boot项目后，启动网关报错，具体报错信息如下: 2021-12-06 09:06:25.335 ERROR 45102 --- [oundedElastic-3] reactor.core.publisher.Operators : Operator called default onErrorDropped reactor.core.Exceptions$ErrorCallback…...
运输层---UDP协议
目录 一. 无连接运输：UDP1.1 定义1.2 特点1.3 应用 二. UDP报文段结构三. UDP检验和3.1 定义3.2 检验和计算实例3.2 UDP检验和的局限 一. 无连接运输：UDP 1.1 定义 UDP（User Datagram Protocol）用户数据报协议：由 [RF…...
【LeetCode】剑指 Offer Ⅱ 第3章：字符串（7道题） -- Java Version
题库链接：https://leetcode.cn/problem-list/e8X3pBZi/ 题目解决方案剑指 Offer II 014. 字符串中的变位词双指针 数组模拟哈希表 ⭐剑指 Offer II 015. 找到字符串中所有字母异位词双指针 数组模拟哈希表 ⭐剑指 Offer II 016. 不含重复字符的最长子字符串双指针…...
【python】绘图代码模板
【python】绘图代码模板 pandas.DataFrame.plot( )画图函数Seaborn绘图 -数据可视化必备主题样式导入数据集可视化统计关系散点图抖动图箱线图小提琴图Pointplot群图 可视化数据集的分布绘制单变量分布柱状图直方图 绘制双变量分布Hex图KDE 图可视化数据集中的成对关系 好看的图…...
RTT学习笔记12-KConfig 语法学习
KConfig 语法学习 RTT 官方教程 https://www.rt-thread.org/document/site/#/development-tools/build-config-system/Kconfig 我自己写的IIC配置 menuconfig BSP_USING_I2C # I2C 菜单bool "Enable I2C BUS" # 提示I2C 菜单default n # 默认不使能I2C 菜单…...
基于Mediapipe的姿势识别并同步到Unity人体模型中
如题，由于是商业项目，无法公开源码，这里主要说一下实现此功能的思路。 人体关节点识别 基于Mediapipe Unity插件进行开发，性能比较低的CPU主机，无法流畅地运行Mediapipe，这个要注意一下。 Mediapipe33个人体…...
Linux下进程的特点与环境变量
目录 进程的特点 进程特点的介绍 进程时如何实现并发性的 进程间如何切换 概念铺设 PC指针 上下文 环境变量 PATH 修改PATH HOME SHELL env 命令行参数 什么是命令行参数？ 打印命令行参数 通过函数获得环境变量 getenv 命令行参数 env 修改环境变…...
以Llama-2为例，在生成模型中使用自定义LogitsProcessor
以Llama-2为例，在生成模型中使用自定义LogitsProcessor 1. 前言2. 场景介绍3. 解决方法4. 结语 1. 前言 在上一篇文章 以Llama-2为例，在生成模型中使用自定义StoppingCriteria中，介绍了怎样在生成的过程中，使用stopping criteria…...
python 计算图片hash 缓存图片为key
python，有时希望缓存图片作为key，怎么办？缓存整张突破占用内存太多，不妨缓存hash值： Fast way to Hash Numpy objects for Caching import hashlib import numpy a numpy.random.rand(10, 100) b a.view(numpy.uin…...
制造型企业如何实现车间设备生产数据的实时采集？需要5G网络吗？
引言 在制造业数字化转型的浪潮下，实时采集车间设备生产数据变得尤为重要。工业边缘网关HiWoo Box作为一款专为工业应用而设计的智能设备，具备工业级设计和多种联网方式，为制造型企业提供了高性能的车间设备数据实时采集解决方案。本文将重点…...
第2章 HTML中的JavaScript
引言 将JavaScript引入网页，首先要解决它与网页的主导语言HTML的关系问题 script元素 将JavaScript插入HTML的主要方法是使用script元素，script有8个可选属性 async：表示异步加载js文件内容，他们之间的顺序不一定按照html顺序ch…...
景联文科技高质量成品数据集上新啦！
景联文科技近期上新多个成品数据集，包含图像、视频等多种类型的数据，涵盖丰富的场景，可满足不同模型的多元化需求。 高质量成品数据集可用于训练和优化模型，使得模型能够更加全面和精准地理解和处理任务，更好地应对复…...
flask------请求拓展
flask中也有类似与django中的中间件，只不过是另一种写法，但是他们的作用是一样的，下面我们就一一介绍： 1.before_request 作用 : before_request 相当于 django 中的 process_request，每一个请求在被处理前都会经…...
大数据-玩转数据-FLINK-从kafka消费数据
一、基于前面kafka部署 大数据-玩转数据-Kafka安装 二、FLINK中编写代码 package com.lyh.flink04;import org.apache.flink.api.common.serialization.SimpleStringSchema; import org.apache.flink.streaming.api.environment.StreamExecutionEnvironment; import org.apa…...
介绍Sping Boot的5个扩展点
1、初始化器ApplicationContextInitializer 我们在启动Spring Boot项目的时候，是执行这样一个方法来启动的 我们一层一层往下点，最终发现执行的是这个方法 所以我们在启动项目的时候也可以这样启动 new SpringApplication(SpringbootExtensionPointAp…...
Linux2.6内核配置说明
maturity level options代码成熟度选项 Prompt for development and/or incomplete code/drivers 显示尚在开发中或尚未完成的代码与驱动.除非你是测试人员或者开发者,否则请勿选择 setup常规设置 Local version - append to kernel release 在内核版本后面加上自定义的…...
《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》
引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...
2025年能源电力系统与流体力学国际会议 (EPSFD 2025)
2025年能源电力系统与流体力学国际会议（EPSFD 2025）将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会，EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...
QMC5883L的驱动
简介 本篇文章的代码已经上传到了github上面，开源代码 作为一个电子罗盘模块，我们可以通过I2C从中获取偏航角yaw，相对于六轴陀螺仪的yaw，qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装： 下载安装DevEco Studio 4.0（支持HarmonyOS 5）配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化： ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
python如何将word的doc另存为docx
将 DOCX 文件另存为 DOCX 格式（Python 实现） 在 Python 中，你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是，.doc 是旧的 Word 格式，而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...
HBuilderX安装（uni-app和小程序开发）
下载HBuilderX 访问官方网站：https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本： Windows版（推荐下载标准版） Windows系统安装步骤 运行安装程序： 双击下载的.exe安装文件 如果出现安全提示&…...
A2A JS SDK 完整教程：快速入门指南
目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库ÿ…...
七、数据库的完整性
七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...
免费数学几何作图web平台
光锐软件免费数学工具，maths,数学制图，数学作图，几何作图，几何，AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...
比较数据迁移后MySQL数据库和OceanBase数据仓库中的表
设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...