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

html球体涨水

news 2026/3/27 10:02:45

简单

代码

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

编程日记 2024/4/17 5:31:14

ubuntu手动编译opencv 4.9.0遇到的问题汇总

ubuntu手动编译opencv 4.9.0遇到的问题汇总 编译流程 以4.9.0版本为例&#xff0c;可参考&#xff1a;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…...

编程日记 2024/4/17 5:30:13

SEO之搜索引擎的工作原理（三）

初创企业需要建站的朋友看这篇文章&#xff0c;谢谢支持&#xff1a;我给不会敲代码又想搭建网站的人建议 &#xff08;接上一篇。。。&#xff09; 排名 经过搜索引擎蜘蛛抓取页面&#xff0c;索引程序计算得到倒排索引后&#xff0c;搜索引擎就准备好可以随时处理用户搜索了…...

编程日记 2024/4/17 5:28:11

开发语言漫谈-python

python的语法和C完全不同&#xff0c;但是它也是C写的。也就是想成为高手&#xff0c;C是必备武功。不是每个人都想成为武林高手。所以客观上需要个简单上手开发效率高的语言&#xff0c;就这样python诞生了。python的发明人其实不喜欢蟒蛇&#xff0c;但是不知道为啥选这个名字…...

编程日记 2024/4/17 5:27:10

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压入…...

编程日记 2024/4/17 5:25:08

小程序解析二维码：jsQR

1.了解jsQR jsQR是一个纯javascript脚本实现的二维码识别库&#xff0c;不仅可以在浏览器端使用&#xff0c;而且支持后端node.js环境。jsQR使用较为简单&#xff0c;有着不错的识别率。 2.效果图 3.二维码 4.下载jsqr包 npm i -d jsqr5.代码 <!-- index.wxml --> &l…...

编程日记 2024/4/17 5:24:07

【verilog 设计】 reg有没有必要全部赋初值？

一、前言 在知乎发现“reg有没有必要全部赋初值”这个问题&#xff0c;与自己近期对Verilog reg的进一步学习相契合&#xff0c;此文对这个问题进行总结。 二、reg的初值赋值方式 就语法意义赋初值而言&#xff0c;就是在声明reg时对其赋值。在工程中&#xff0c;对于数字系…...

编程日记 2024/4/17 5:22:05

NLP问答系统：使用 Deepset SQUAD 和 SQuAD v2 度量评估

目录 一、说明 二、Deepset SQUAD是个啥&#xff1f; 三、问答系统&#xff08;QA系统&#xff09;&#xff0c;QA系统在各行业的应用及基本原理 3.1 医疗 3.2 金融 3.3 顾客服务 3.4 教育 3.5 制造业 3.6 法律 3.7 媒体 3.8 政府 四、在不同行业使用QA系统的基本原理 五、关于…...

编程日记 2024/4/17 5:21:03

php开发中如何防止抓包工具伪造请求

要防止抓包工具伪造请求&#xff0c;采取一系列的技术和策略来增强应用程序的安全性。以下是一些关键步骤和最佳实践&#xff1a; 1. 使用HTTPS 确保应用程序使用HTTPS协议进行通信。HTTPS通过TLS/SSL加密客户端和服务器之间的数据传输&#xff0c;这使得抓包工具捕获到的数据…...

编程日记 2024/4/17 5:20:02

密码学 | 椭圆曲线数字签名方法 ECDSA（下）

目录 10 ECDSA 算法 11 创建签名 12 验证签名 13 ECDSA 的安全性 14 随机 k 值的重要性 15 结语 ⚠️ 原文&#xff1a;Understanding How ECDSA Protects Your Data. ⚠️ 写在前面&#xff1a;本文属于搬运博客&#xff0c;自己留着学习。同时&#xff0c;经过几…...

编程日记 2024/4/17 5:17:59

拟态个人主页UI源码

拟态个人主页 效果图源代码领取源码 效果图 PC端 移动端 源代码 index.php <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>孤客 |佩恩</title><meta name"keywords" co…...

编程日记 2024/4/17 5:16:58

移动硬盘无法打开？别慌！这里有救星！

移动硬盘作为现代生活中重要的数据存储工具&#xff0c;承载着我们大量的文件和数据。然而&#xff0c;有时我们会遇到移动硬盘无法打开的情况&#xff0c;这往往让人焦虑不已。那么&#xff0c;当移动硬盘无法打开时&#xff0c;我们应该如何应对呢&#xff1f; 移动硬盘无法打…...

编程日记 2024/4/17 5:15:57

windows下已经创建好了虚拟环境，但是切换不了的解决方法

用得多Ubuntu&#xff0c;今天用Windows重新更新anaconda出问题&#xff0c;重新安装之后&#xff0c;打开pycharm发现打开终端之后&#xff0c;刚开始是ps的状态&#xff0c;后面试了网上改cmd的方法&#xff0c;终端变成c盘开头了 切换到虚拟环境如下&#xff1a;目前的shell…...

编程日记 2024/4/17 5:14:56

Java反序列化基础-类的动态加载

类加载器&双亲委派 什么是类加载器 类加载器是一个负责加载器类的对象&#xff0c;用于实现类加载的过程中的加载这一步。每个Java类都有一个引用指向加载它的ClassLoader。而数组类是由JVM直接生成的&#xff08;数组类没有对应的二进制字节流&#xff09; 类加载器有哪…...

编程日记 2024/4/17 5:13:55

课堂行为动作识别数据集

一共8884张图片 xml .txt格式都有 Yolo可直接训练 已跑通 动作类别一共8类。 全部为教室监控真实照片&#xff0c;没有网络爬虫滥竽充数的图片&#xff0c;可直接用来训练。以上图片均一一手工标注&#xff0c;标签格式为VOC格式。适用于YOLO算法、SSD算法等各种目标检测算法…...

编程日记 2024/4/17 5:10:52

【数据库】MVCC

MVCC是一种用来解决读写冲突的无锁并发控制&#xff0c;也就是为事务分配单项增长的时间戳&#xff0c;为每个修改保存一个版本&#xff0c;版本与事务时间戳关联&#xff0c;读操作只读该事务开始前的数据库的快照 MVCC&#xff0c;全称Multi-Version Concurrency Control&am…...

编程日记 2024/4/17 5:08:50

快速排序题目SelectK问题

力扣75.颜色分类 给定一个包含红色、白色和蓝色、共 n 个元素的数组 nums &#xff0c;原地对它们进行排序&#xff0c;使得相同颜色的元素相邻&#xff0c;并按照红色、白色、蓝色顺序排列。 我们使用整数 0、 1 和 2 分别表示红色、白色和蓝色。 必须在不使用库内置的 sor…...

编程日记 2024/4/17 5:07:49

es6解构赋值

ES6解构赋值是一种简洁的为变量赋值的方式&#xff0c;它允许我们从数组或对象中提取值并赋给对应的变量。 解构赋值在ES6中被引入&#xff0c;主要目的是为了简化代码&#xff0c;提高代码的可读性。以下是解构赋值的基本用法&#xff1a; 数组解构&#xff1a;当我们需要从数…...

编程日记 2024/4/17 5:05:47

Jenkins上面使用pnpm打包

问题 前端也想用Jenkins的CI/CD工作流。 步骤 Jenkins安装NodeJS插件 安装完成&#xff0c;记得重启Jenkins。 全局配置nodejs Jenksinfile pipeline {agent anytools {nodejs "18.15.0"}stages {stage(Check tool version) {steps {sh node -vnpm -vnpm config…...

编程日记 2024/4/17 5:03:45

设计编程网站集：动物，昆虫，蚂蚁养殖笔记

入门指南 区分白蚁与蚂蚁 日常生活中&#xff0c;人们常常会把白蚁与蚂蚁搞混淆&#xff0c;其实这两者是有很大区别的&#xff0c;养殖方式差别也很大。白蚁主要食用木质纤维&#xff0c;会给家庭房屋带来较大危害&#xff0c;而蚂蚁主要采食甜食和蛋白质类食物&#xff0c;不…...

编程日记 2024/4/17 5:02:44

LeetCode 102. 二叉树的层序遍历：从理论到实践的完整剖析

LeetCode 102. 二叉树的层序遍历&#xff1a;从理论到实践的完整剖析 问题描述 给你二叉树的根节点 root&#xff0c;返回其节点值的层序遍历。&#xff08;即逐层地&#xff0c;从左到右访问所有节点&#xff09;。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,nu…...

编程新知 2026/3/27 8:56:46

NaViL-9B图文理解入门：支持中英文混合提问的实测案例

NaViL-9B图文理解入门&#xff1a;支持中英文混合提问的实测案例 1. 认识NaViL-9B NaViL-9B是一款原生多模态大语言模型&#xff0c;由专业研究机构开发。它最大的特点是能够同时处理文字和图片信息&#xff0c;就像一个能"看图说话"的智能助手。无论是纯文字问题&…...

编程新知 2026/3/27 8:04:27

NaViL-9B部署稳定性报告：7×24小时双卡运行内存泄漏监测

NaViL-9B部署稳定性报告&#xff1a;724小时双卡运行内存泄漏监测 1. 平台概述 NaViL-9B是一款原生多模态大语言模型&#xff0c;具备纯文本问答和图片理解双重能力。该模型经过特殊优化&#xff0c;可直接复用内置模型目录&#xff0c;无需二次下载大权重文件&#xff0c;显…...

编程新知 2026/3/27 7:54:17

Lingbot-Depth-Pretrain-VitL-14处理复杂光照与反射场景效果展示

Lingbot-Depth-Pretrain-VitL-14处理复杂光照与反射场景效果展示 深度估计技术&#xff0c;简单来说就是让计算机像人眼一样&#xff0c;判断出画面中每个物体离我们有多远。这项技术在自动驾驶、机器人导航、增强现实等领域都扮演着关键角色。然而&#xff0c;当场景中出现一…...

编程新知 2026/3/27 7:36:14

【Python工业视觉性能跃迁指南】：3大编译优化+5个CUDA加速技巧，让检测速度提升8.7倍

第一章&#xff1a;Python工业视觉性能跃迁的底层逻辑与评估体系Python在工业视觉领域长期面临“高表达性”与“低实时性”的根本矛盾。性能跃迁并非单纯依赖硬件升级或框架切换&#xff0c;而源于对计算图编译、内存布局优化、异构加速调度及IO瓶颈解耦四维协同机制的系统性重…...

编程新知 2026/3/27 7:18:12

从沙子到芯片：保姆级图解CMOS制造18步核心工艺（附高清流程图）

从沙子到芯片&#xff1a;图解CMOS制造18步核心工艺 想象一下&#xff0c;你手中智能手机的核心处理器&#xff0c;其内部晶体管数量已突破百亿级——这相当于将整个银河系的恒星数量压缩到指甲盖大小的硅片上。而这一切的起点&#xff0c;竟是海滩上最普通的沙子。本文将用18张…...

编程新知 2026/3/27 6:19:03

Fish Speech 1.5入门指南：无需Python基础，5步完成高质量语音生成

Fish Speech 1.5入门指南&#xff1a;无需Python基础&#xff0c;5步完成高质量语音生成 你是不是也遇到过这些烦恼&#xff1f;想给视频配音&#xff0c;但自己的声音不好听&#xff0c;找配音员又太贵&#xff1b;想制作有声书&#xff0c;但录制过程繁琐&#xff0c;效果还…...

编程新知 2026/3/27 5:42:55

双模型对比：OpenClaw同时接入nanobot与云端API的性能测试

双模型对比&#xff1a;OpenClaw同时接入nanobot与云端API的性能测试 1. 测试背景与目标 最近在尝试用OpenClaw搭建一个能同时处理本地轻量任务和复杂云端任务的智能助手系统。核心需求是&#xff1a;日常简单查询走本地部署的轻量模型&#xff08;nanobot&#xff09;&#…...

编程新知 2026/3/27 5:04:29

OpenClaw智能邮件助手：nanobot镜像自动分类与回复重要邮件

OpenClaw智能邮件助手&#xff1a;nanobot镜像自动分类与回复重要邮件 1. 为什么需要智能邮件助手 每天早晨打开邮箱&#xff0c;看到堆积如山的未读邮件总是让人头疼。重要客户的询盘可能被埋没在促销广告中&#xff0c;紧急的协作请求可能因为延迟回复而影响项目进度。作为…...

编程新知 2026/3/27 4:21:50

告别复杂配置！5分钟掌握OCAT：OpenCore图形化配置神器

告别复杂配置&#xff01;5分钟掌握OCAT&#xff1a;OpenCore图形化配置神器 【免费下载链接】OCAuxiliaryTools Cross-platform GUI management tools for OpenCore&#xff08;OCAT&#xff09; 项目地址: https://gitcode.com/gh_mirrors/oc/OCAuxiliaryTools 如果你…...

编程新知 2026/3/27 3:57:37