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>*{
padding: 0;
margin: 0;
}
.box{
width: 800px;
height: 800px;
background-color: black;
margin: 20px auto;
padding-top: 20px;
position: relative;
}
.battery{
width: 200px;
height: 320px;
background-color:white;
margin-top: 200px;
margin-left: 300px;
border-radius: 15px 15px 0px 0px;
position: relative;
/* top: 20px; */
}
.battery::before{
content: "";
width: 50px;
height: 20px;
background-color:white;
position: absolute;
top: -20px;
left: 38%;
}
.battery::after{
content: "";
position: absolute;
top: 90%;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(to bottom,#7abcff 0%,#00BCD4
44%,#2196F3 100%);
animation:change 10s linear infinite ;
}
@keyframes change{
0%{
top: 100%;
filter: hue-rotate(90deg);
}
95%{
top: 5%;
border-radius: 0;
}
100%{
top: 0%;
border-radius: 15px 15px 0px 0px;
filter: hue-rotate(0deg);
}
}
.cover{
width: 100%;
height: 100%;
/* background-color: #00BCD4; */
border-radius: 15px 15px 0px 0px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
overflow: hidden;
}
.cover::before{
content: "";
width: 400px;
height: 400px;
background-color: rgba(255, 255, 255, 0.8);
position: absolute;
left: -50%;
border-radius: 42% 40%;
animation: coverBefore 10s linear infinite;
}
@keyframes coverBefore{
0%{
transform: rotate(0deg);
bottom: 0%;
}
100%{
transform: rotate(360deg);
bottom: 100%;
}
}
.cover::after{
content: "";
width: 400px;
height: 400px;
background-color: rgba(255, 255, 255, 0.7);
position: absolute;
left: -50%;
border-radius: 42% 40%;
animation: coverAfter 10s linear infinite;
}
@keyframes coverAfter{
0%{
transform: rotate(30deg);
bottom: 2%;
}
100%{
transform: rotate(360deg);
bottom: 95%;
}
}</style>
</head>
<body><div class="box"><div class="battery"><div class="cover"></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>充电效果</title><style>*{padding: 0;margin: 0;}/* .box{width: 1000px;height:1000px;background-color: black;margin: 20px auto;padding-top: 20px;position: relative;} */.contrast{width: 70%;height: 70%;background-color:black;position: absolute;top: 20px;left: 20%;filter: contrast(15);animation: hueRotate 5s linear infinite;}@keyframes hueRotate{0%{filter: contrast(15) hue-rotate(0);}100%{filter: contrast(15) hue-rotate(360deg);}}.circle{width: 300px;height: 300px;/* background-color: #2196F3; */position: absolute;top: 0;left: 50%;margin-left: -150px;filter: blur(8px);animation: circleRotate 5s linear infinite;}@keyframes circleRotate{0%{transform: rotate(0);}100%{transform: rotate(360deg);}}.circle::before{content: "";width: 200px;height: 200px;background-color: #00ff6f;position: absolute;top: 50%;left: 50%;border-radius: 42% 38% 64% 49%/45%;transform: translate(-50%,-50%);}.circle::after{content: "";width: 180px;height: 178px;background-color: black;position: absolute;top: 50%;left: 50%;border-radius: 50%;transform: translate(-50%,-50%);}.number{width: 200px;height: 200px;color: white;font-size: 30px;position: absolute;top: 9%;left: 55%;z-index: 1;line-height: 200px;text-align: center;margin-left: -100px;}.bubble_home{width: 150px;height: 50px;background-color: #00ff6f;position: absolute;bottom: 0;left: 45%;border-radius: 150px 150px 15px 15px;filter: blur(8px);}.bubble{/* width: 20px;height: 20px;background-color:#00ff6f;border-radius: 100%; */position: absolute;left: 50%;bottom: 0;z-index: 1;animation:bubbleMoveUp 5s ease-in-out infinite ;}@keyframes bubbleMoveUp{0%{bottom: 0;}100%{bottom: calc(100% - 260px);}}.bubble:nth-child(1){width: 20px;height: 20px;background-color:#00ff6f;border-radius: 100%;animation-duration: 5s;animation-delay: 1s;left: 50%;}.bubble:nth-child(2){width: 18px;height: 18px;background-color:#00ff6f;border-radius: 100%;animation-duration: 7s;animation-delay: 3s;left: 47%;}.bubble:nth-child(3){width: 22px;height: 22px;background-color:#00ff6f;border-radius: 100%;animation-duration: 3s;animation-delay: 0.5s;left: 51%;}.bubble:nth-child(4){width: 18px;height: 18px;background-color:#00ff6f;border-radius: 100%;animation-duration: 4s;animation-delay: 0s;left: 50%;}.bubble:nth-child(5){width: 20px;height: 18px;background-color:#00ff6f;border-radius: 100%;animation-duration: 7.5s;animation-delay: 3.6s;left: 48%;}.bubble:nth-child(6){width: 21px;height: 21px;background-color:#00ff6f;border-radius: 100%;animation-duration: 8s;animation-delay: 1.5s;left: 50%;}</style></head><body><div class="box"></div><div class="number">95.3%</div><div class="contrast"><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><span class="bubble_home"></span><div class="circle"></div></div></div></body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/376941.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

tomcat和nginx实现动静分离

访问nginx就是静态页面&#xff0c;nginx代理index.jsp可以访问tomcat的动态页面。 实验 1、设备以及IP地址 nginx1 192.168.10.41 tomcat1 192.168.10.51 tomcat2 192.168.10.52 2、tomcat1 的配置 创建动态页面 cd /usr/local/tomcat/webapps 创建一个目录作为一个ser…

【LeetCode 链表合集】

文章目录 1. LeetCode 206 反转链表2. NC40 链表相加 1. LeetCode 206 反转链表 题目链接&#x1f517; 解题思路&#xff1a; &#x1f50d; &#x1f427;创建一个新的节点&#xff0c;使用链表头插的方法&#xff1b; 2. NC40 链表相加 题目链接&#x1f517; 解题思路…

C++入门基础(2)

C入门基础&#xff08;2&#xff09; 1.缺省函数2.函数重载3.引用3.1 引用的概念和定义3.2 引用的特性3.3 引用的使用3.3.1引用的特性 4 .const引用5. 指针和引用的关系6.inline 1.缺省函数 • 缺省参数是声明或定义函数时为函数的参数指定⼀个缺省值。在调用该函数时&#xf…

【服务器】在Linux查看运行的Python程序,并找到特定的Python程序

在Linux查看运行的Python程序并找到特定的Python程序 写在最前面1. 使用ps命令查看所有Python进程查看详细信息 2. 使用pgrep命令查找Python进程ID 3. 使用top或htop命令使用top命令使用htop命令 4. 使用lsof命令查找Python进程打开的文件 5. 使用nvidia-smi命令查看GPU使用情况…

【接口自动化_06课_Pytest+Excel+Allure完整框架集成】

一、logging在接口自动化里的应用 1、设置日志的配置&#xff0c;并收集日志文件 日志的设置需要在pytest.ini文件里设置。这个里面尽量不要有中文 2、debug日志的打印 pytest.ini文件的开关一定得是true才能在控制台打印日志 import allure import pytest from P06_PytestFr…

使用 YUM 仓库和 NFS 共享存储的详细指南

使用 YUM 仓库和 NFS 共享存储的详细指南 文章目录 使用 YUM 仓库和 NFS 共享存储的详细指南一、YUM 仓库服务1.1 YUM 介绍1.2 YUM 源的提供方式1.2.1 配置本地源仓库1.2.2 配置 FTP 源1.2.3 配置 HTTP 源 1.3 网络源配置1.3.1 清华源1.3.2 163 源1.3.3 阿里云源 1.4 YUM 命令1…

IntelliJ IDEA自定义菜单(Menus)、任务栏(toolbars)详细教程

本示例是基于IDEA2024.1Ultimate版本的New UI模式下 一、自定义菜单 1、打开Settings&#xff0c;找到Menus and Toolbars 2、点击右边的Main Menu&#xff0c;点击号&#xff0c;选择Add Action 3、弹出Add Action弹窗&#xff0c;搜索或者选择你要添加的指令 二、自定义工具…

Linux命令更新-Vim 编辑器

简介 Vim 是 Linux 系统中常用的文本编辑器&#xff0c;功能强大、可扩展性强&#xff0c;支持多种编辑模式和操作命令&#xff0c;被广泛应用于程序开发、系统管理等领域。 1. Vim 命令模式 Vim 启动后默认进入命令模式&#xff0c;此时键盘输入的命令将用于控制编辑器本身&…

OpenCV 寻找棋盘格角点及绘制

目录 一、概念 二、代码 2.1实现步骤 2.2完整代码 三、实现效果 一、概念 寻找棋盘格角点&#xff08;Checkerboard Corners&#xff09;是计算机视觉中相机标定&#xff08;Camera Calibration&#xff09;过程的重要步骤。 OpenCV 提供了函数 cv2.findChessboardCorners…

LeetCode 441, 57, 79

目录 441. 排列硬币题目链接标签思路代码 57. 插入区间题目链接标签思路两个区间的情况对每个区间的处理最终的处理 代码 79. 单词搜索题目链接标签原理思路代码 优化思路代码 441. 排列硬币 题目链接 441. 排列硬币 标签 数学 二分查找 思路 由于本题所返回的 答案在区间…

【C++】入门基础(引用、inline、nullptr)

目录 一.引用 1.引用的定义 2.引用的特性 3.引用的使用场景 4.const引用 5.引用和指针的区别 二.inline 三.nullptr 一.引用 1.引用的定义 引用不是新定义一个变量&#xff0c;而是给已经存在的变量取一个别名&#xff0c;编译器不会给引用变量开辟内存空间&#xff0c…

检测精度评价指标召回率和精确率

检测精度评价指标为&#xff1a; 1、召回率&#xff08;Recall Rate &#xff09; 2、平均精度均值&#xff08;mAP&#xff09; 3、平均对数漏检率&#xff08;MR-2&#xff09; 计算 TP 和 FP 的示例 假设你有一个目标检测模型&#xff0c;并使用它检测图像…

Git代码管理工具 — 3 Git基本操作指令详解

目录 1 获取本地仓库 2 基础操作指令 2.1 基础操作指令框架 2.2 git status查看修改的状态 2.3 git add添加工作区到暂存区 2.4 提交暂存区到本地仓库 2.5 git log查看提交日志 2.6 git reflog查看已经删除的记录 2.7 git reset版本回退 2.8 添加文件至忽略列表 1 获…

在conda的环境中安装Jupyter及其他软件包

Pytorch版本、安装和检验 大多数软件包都是随Anaconda安装的&#xff0c;也可以根据需要手动安装一些其他软件包。 目录 创建虚拟环境 进入虚拟环境 安装Jupyter notebook 安装matplotlib 安装 pandas 创建虚拟环境 基于conda包的环境创建、激活、管理与删除http://t.cs…

(实测可用)(3)Git的使用——RT Thread Stdio添加的软件包,github与gitee冲突造成无法上传文件到gitee

★硬件资源&#xff1a;本文章以STM32L431RCT6做主控芯片做验证&#xff1b; ★IDE开发环境&#xff1a;RT Thread stdio&#xff1b; ★RT Thread 版本&#xff1a;V4.0.3 一、RT Thread Stdio加载软件包 1、如下图所示&#xff0c;通过RT Thread Stdio加载的软件包&#…

gd32发送数据,定义参数,接收中断

void usart_receive_data(uint8_t ucch) {usart_data_receive(UART3); } void usart_send_data(uint8_t ucch) {usart_data_transmit(UART3,(uint8_t)ucch);while(usart_flag_get(UART3,USART_FLAG_TBE) RESET); } 这是在c文件中定义函数&#xff0c;之后在h文件中声明&#…

Windows终端远程登陆Linux服务器(SSH+VScode)

W i n d o w s 终端远程登陆 L i n u x 服务器&#xff08; S S H V S c o d e &#xff09; \huge{Windows终端远程登陆Linux服务器&#xff08;SSHVScode&#xff09;} Windows终端远程登陆Linux服务器&#xff08;SSHVScode&#xff09; 文章目录 写在前面通过SSH远程连接L…

4000厂商默认账号密码、默认登录凭证汇总.pdf

获取方式&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1F8ho42HTQhebKURWWVW1BQ?pwdy2u5 提取码&#xff1a;y2u5

【总线】AXI第九课时:介绍AXI响应信号 (Response Signaling):RRESP和 BRESP

大家好,欢迎来到今天的总线学习时间!如果你对电子设计、特别是FPGA和SoC设计感兴趣&#xff0c;那你绝对不能错过我们今天的主角——AXI4总线。作为ARM公司AMBA总线家族中的佼佼者&#xff0c;AXI4以其高性能和高度可扩展性&#xff0c;成为了现代电子系统中不可或缺的通信桥梁…

28.【C语言】库函数

1.函数定义 在计算机科学中&#xff0c;子程序是一个大型程序中的某部分代码&#xff0c;由一个或多个语句块组成。它负责完成某项特定任务&#xff0c;而且相较于其他代码&#xff0c;具备相对的独立性。一般会有输入参数并有返回值&#xff0c;提供对过程的封装和细节的隐藏…