html球体涨水
简单
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;margin-left: 200px;border: 1px solid red;border-radius: 50%;position: relative;overflow: hidden;}div::before {content: "";position: absolute;top: 100%;left: 0;background-color: red;width: 200px;height: 200px;border-radius: 50%;transition: 0.5s;}div:hover:before {top: 0;}</style>
</head><body><div></div>
</body></html>
复杂
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {width: 1000px;height: 580px;margin: 50px auto;border: 1px solid green;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: deepskyblue;color: #fff;}.dajianshi {width: 100%;height: 400px;position: relative;}ul {display: flex;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}ul li {list-style: none;}ul li span {width: 120px;height: 120px;background-color: #fff;text-align: center;line-height: 120px;margin: 0 10px;display: block;border-radius: 50%;position: relative;overflow: hidden;border: 3px solid #cde;z-index: 1;}ul li span:before {content: "";position: absolute;top: 100%;left: 0;width: 100%;height: 100%;transition: 0.5s;z-index: 2;}ul li span:hover:before {top: 0;}ul li:nth-child(1) span:before {background: red;}ul li:nth-child(2) span:before {background: orange;}ul li:nth-child(3) span:before {background: yellow;}ul li:nth-child(4) span:before {background: green;}</style>
</head><body><div class="container"><div class="top"><h3>球体涨水的效果</h3></div><div class="dajianshi"><ul><li><span></span></li><li><span></span></li><li><span></span></li><li><span></span></li></ul></div></div>
</body></html>相关文章：
html球体涨水
简单 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><style>div…...
ubuntu手动编译opencv 4.9.0遇到的问题汇总
ubuntu手动编译opencv 4.9.0遇到的问题汇总 编译流程 以4.9.0版本为例，可参考：https://docs.opencv.org/4.9.0/d2/de6/tutorial_py_setup_in_ubuntu.html 编译加速 https://blog.csdn.net/tfb760/article/details/104030841 ippicv_2021.10.0_lnx_i…...
SEO之搜索引擎的工作原理（三）
初创企业需要建站的朋友看这篇文章，谢谢支持：我给不会敲代码又想搭建网站的人建议 （接上一篇。。。） 排名 经过搜索引擎蜘蛛抓取页面，索引程序计算得到倒排索引后，搜索引擎就准备好可以随时处理用户搜索了…...
开发语言漫谈-python
python的语法和C完全不同，但是它也是C写的。也就是想成为高手，C是必备武功。不是每个人都想成为武林高手。所以客观上需要个简单上手开发效率高的语言，就这样python诞生了。python的发明人其实不喜欢蟒蛇，但是不知道为啥选这个名字…...
JVM指令收集
1. 栈和局部变量操作 1.1 将常量压入栈的指令aconst_null 将null对象引用压入栈 iconst_m1 将int类型常量-1压入栈 iconst_0 将int类型常量0压入栈 iconst_1 将int类型常量1压入栈 iconst_2 将int类型常量2压入栈 iconst_3 将int类型常量3压入栈 iconst_4 将int类型常量4压入…...
小程序解析二维码：jsQR
1.了解jsQR jsQR是一个纯javascript脚本实现的二维码识别库，不仅可以在浏览器端使用，而且支持后端node.js环境。jsQR使用较为简单，有着不错的识别率。 2.效果图 3.二维码 4.下载jsqr包 npm i -d jsqr5.代码 <!-- index.wxml --> &l…...
【verilog 设计】 reg有没有必要全部赋初值？
一、前言 在知乎发现“reg有没有必要全部赋初值”这个问题，与自己近期对Verilog reg的进一步学习相契合，此文对这个问题进行总结。 二、reg的初值赋值方式 就语法意义赋初值而言，就是在声明reg时对其赋值。在工程中，对于数字系…...
NLP问答系统：使用 Deepset SQUAD 和 SQuAD v2 度量评估
目录 一、说明 二、Deepset SQUAD是个啥？ 三、问答系统（QA系统），QA系统在各行业的应用及基本原理 3.1 医疗 3.2 金融 3.3 顾客服务 3.4 教育 3.5 制造业 3.6 法律 3.7 媒体 3.8 政府 四、在不同行业使用QA系统的基本原理 五、关于…...
php开发中如何防止抓包工具伪造请求
要防止抓包工具伪造请求，采取一系列的技术和策略来增强应用程序的安全性。以下是一些关键步骤和最佳实践： 1. 使用HTTPS 确保应用程序使用HTTPS协议进行通信。HTTPS通过TLS/SSL加密客户端和服务器之间的数据传输，这使得抓包工具捕获到的数据…...
密码学 | 椭圆曲线数字签名方法 ECDSA（下）
目录 10 ECDSA 算法 11 创建签名 12 验证签名 13 ECDSA 的安全性 14 随机 k 值的重要性 15 结语 ⚠️ 原文：Understanding How ECDSA Protects Your Data. ⚠️ 写在前面：本文属于搬运博客，自己留着学习。同时，经过几…...
拟态个人主页UI源码
拟态个人主页 效果图源代码领取源码 效果图 PC端 移动端 源代码 index.php <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>孤客 |佩恩</title><meta name"keywords" co…...
移动硬盘无法打开？别慌！这里有救星！
移动硬盘作为现代生活中重要的数据存储工具，承载着我们大量的文件和数据。然而，有时我们会遇到移动硬盘无法打开的情况，这往往让人焦虑不已。那么，当移动硬盘无法打开时，我们应该如何应对呢？ 移动硬盘无法打…...
windows下已经创建好了虚拟环境，但是切换不了的解决方法
用得多Ubuntu，今天用Windows重新更新anaconda出问题，重新安装之后，打开pycharm发现打开终端之后，刚开始是ps的状态，后面试了网上改cmd的方法，终端变成c盘开头了 切换到虚拟环境如下：目前的shell…...
Java反序列化基础-类的动态加载
类加载器&双亲委派 什么是类加载器 类加载器是一个负责加载器类的对象，用于实现类加载的过程中的加载这一步。每个Java类都有一个引用指向加载它的ClassLoader。而数组类是由JVM直接生成的（数组类没有对应的二进制字节流） 类加载器有哪…...
课堂行为动作识别数据集
一共8884张图片 xml .txt格式都有 Yolo可直接训练 已跑通 动作类别一共8类。 全部为教室监控真实照片，没有网络爬虫滥竽充数的图片，可直接用来训练。以上图片均一一手工标注，标签格式为VOC格式。适用于YOLO算法、SSD算法等各种目标检测算法…...
【数据库】MVCC
MVCC是一种用来解决读写冲突的无锁并发控制，也就是为事务分配单项增长的时间戳，为每个修改保存一个版本，版本与事务时间戳关联，读操作只读该事务开始前的数据库的快照 MVCC，全称Multi-Version Concurrency Control&am…...
快速排序题目SelectK问题
力扣75.颜色分类 给定一个包含红色、白色和蓝色、共 n 个元素的数组 nums ，原地对它们进行排序，使得相同颜色的元素相邻，并按照红色、白色、蓝色顺序排列。 我们使用整数 0、 1 和 2 分别表示红色、白色和蓝色。 必须在不使用库内置的 sor…...
es6解构赋值
ES6解构赋值是一种简洁的为变量赋值的方式，它允许我们从数组或对象中提取值并赋给对应的变量。 解构赋值在ES6中被引入，主要目的是为了简化代码，提高代码的可读性。以下是解构赋值的基本用法： 数组解构：当我们需要从数…...
Jenkins上面使用pnpm打包
问题 前端也想用Jenkins的CI/CD工作流。 步骤 Jenkins安装NodeJS插件 安装完成，记得重启Jenkins。 全局配置nodejs Jenksinfile pipeline {agent anytools {nodejs "18.15.0"}stages {stage(Check tool version) {steps {sh node -vnpm -vnpm config…...
设计编程网站集：动物，昆虫，蚂蚁养殖笔记
入门指南 区分白蚁与蚂蚁 日常生活中，人们常常会把白蚁与蚂蚁搞混淆，其实这两者是有很大区别的，养殖方式差别也很大。白蚁主要食用木质纤维，会给家庭房屋带来较大危害，而蚂蚁主要采食甜食和蛋白质类食物，不…...
【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad（Adaptive Gradient Algorithm）是一种自适应学习率的优化算法，由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率，适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
线程同步：确保多线程程序的安全与高效！
全文目录： 开篇语前序前言第一部分：线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分：synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢，博主的学习进度也是步入了Java Mybatis 框架，目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学，希望能对大家有所帮助，也特别欢迎大家指点不足之处，小生很乐意接受正确的建议&…...
从零实现STL哈希容器：unordered_map/unordered_set封装详解
本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说，直接开始吧！ 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...
全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章，二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑： 🔄 一、起源与初创期：Swagger的诞生（2010-2014） 核心…...
【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统
目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索（基于物理空间 广播范围）2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...
学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2
每日一言 今天的每一份坚持，都是在为未来积攒底气。 案例：OLED显示一个A 这边观察到一个点，怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 ： 如果代码里信号切换太快（比如 SDA 刚变，SCL 立刻变&#…...
Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）
Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习） 一、Aspose.PDF 简介二、说明（⚠️仅供学习与研究使用）三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析（Parser） 2.4、执行sql 1. 预处理（Preprocessor） 2. 查询优化器（Optimizer） 3. 执行器…...