HTML5+CSS3小实例：简单好玩的水球加载效果

艾恩小灰灰

已于 2022-05-19 19:16:01 修改

阅读量707

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML+CSS+JS小实例文章标签： html5 css3 前端 css web

于 2022-05-19 19:09:15 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_68127493/article/details/124869439

HTML+CSS+JS小实例专栏收录该内容

263 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍如何使用HTML5和CSS3创建一个简单而有趣的水球加载动画。通过结合圆形和圆角矩形，并应用旋转动画，轻松实现这种加载效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5+CSS3做一个简单又好玩的水球加载效果，一个圆形，一个圆角矩形，再加上旋转动画，就能实现这样的水球loading效果！又是属于代码简单，效果惊艳，上手容易的一期案例。

效果：

源码：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>简单好玩的水球加载效果</title>
    <link rel="stylesheet" href="../css/23.css">
</head>

<body>
    <div class="wave"></div>
</body>

</html>

*{
    /* 初始化 取消页面内外边距 */

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

艾恩小灰灰

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

HTML5水波荡漾动画特效非常逼真

08-23

在现实生活中，我们经常可以看到水波的效果，雨滴落到小河中，河里必定泛起了水波。今天我们用HTML5模拟了水波荡漾效果，点击河水的图片，即可从点击处开始泛起水波，并向远处伸展。这个利用HTML5模拟出来的水波效果非常逼真，不过有点耗CPU。

使用html+css做出水球效果

Glinty的博客

05-10

1316

使用html+css做出水球效果 <!DOCTYPE html> <head> <meta charset="utf-8"> <style> *{ margin: 0; padding: 0; } body{ height: 100vh; background: linear-gradient(rgb(95,9

参与评论您还未登录，请先登录后发表或查看评论

html+css 制作水球图

最新发布

weixin_52906116的博客

05-09

684

/ 设置和 50%的差值每差1% --after-top默认高度就增加0.2% 这个值可以自己调整和波浪box的大小有关通过勾股定理计算对角线这里只是设置了个大概值。// 解决0% 100% 不显示波浪的问题越接近50% 设置的默认top高度越小 start。

CSS实现动态水位球效果（纯CSS3样式）

进修者

07-23

3341

本文主要介绍使用 CSS 实现动态水位球效果（纯 CSS3 样式）。其实在数据可视化应用中，水球图也是一种常见的数据展示形式。关于实现个性化水球，在相当长的一段时间并没有找到比较简洁的实现方式，因此在以往的可视化作品中，大多采用ECharts插件，当然还有其他更多的实现方式。如：CSS + jQuery实现、jQuery实现、Vue + CSS等、纯CSS实现等。

H5 水球加载动画 - canvas应用篇

草巾冒小子的博客

10-29

1649

H5 水球加载动画 - canvas应用篇效果图： html代码如下： &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&amp

基于html5水波的加载特效

weixin_30463341的博客

11-14

248

先来看效果　图片2，利用canvas生成得到。 var aImgArr = [ "http://xinhuatone.com/zt/apecxjp/m/images/4.jpg", "http://xinhuatone.com/zt/apecxjp/m/images/5.jpg", ...

CSS实现漂亮的小水球效果

一根火柴博客

05-24

1672

先看效果图：代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>小水球</title> <style> *{ margin:0; padding: 0;

HTML-波浪水球

weixin_34228387的博客

09-22

271

波浪水球实例1.需要图片2.需要JQuery,jquery-2.1.4.min.js以下为源码:<!doctypehtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="Generator"content="EditPlus"> ...

本项目包含了 HTML、CSS、JavaScript、JQuery、Vue 等相关知识和小实例，大家一起学习，一起讨论

04-08

简单又令人惊艳的hover效果表单案例 HTML+CSS实现3D旋转卡片...HTML+CSS小实例之文字裂开效果 HTML+CSS小实例之手风琴式加载动画 HTML5+CSS3小实例之分享按钮切换效果 HTML5+CSS3小实例之简单好玩的水球加载效果 HTML5+

9. 大数据集群(PySpark)+Hive+MySQL+PyEcharts+Flask：信用贷款风险分析与预测

chendengyi2的博客

08-08

2509

节点/组件/安装包版本备注名称节点master数据节点slave1数据节点slave2JDKjdk-8u281Java运行环境，Spark的运行需要JDK的支持Hadoop提供HDFS、Hive运行环境支持。HDFS系统访问端口为：hdfs://192.168.126.10:9000Hivehive-3.1.2数据仓库PySparkSpark集群的master节点的地址和端口为：spark://192.168.126.10:7077MySQL5.7.18。

掌握Canvas入门：创建水球与圆环动画

通过对Canvas API和JavaScript的运用，可以实现各种生动的图形和动画效果，水球圆环实例仅是冰山一角。掌握Canvas的使用，无论是对于前端开发还是图形渲染领域，都将大大提升你的技能。在实践中，可以通过更多样的...

html5 canvas神奇宝贝球Loading加载动画特效

11-06

html5 canvas神奇宝贝球Loading加载动画特效 html5 canvas神奇宝贝球Loading加载动画特效

echarts水球图

12-27

echarts水球图js代码，页面引入了echarts.js还需要引入echarts-liquidfill.min.js才能实现水球图效果

（上）Vue+Echarts构建可视化大数据平台实战项目分享（附源码）

热门推荐

qq_15041931的博客

05-08

2万+

分享之前我们先来普及一下什么是数据可视化？数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。数据可视化通俗来说就是：数据的展示、处理和分析。目的是借助于图形化手段，清晰有效地传达与沟通信息。那前端数据可视化又是什么呢？前端数据可视化其实就是利用前端表现层的手段，以前端手段展示、处理和分析数据。

css3-水球效果

weixin_42100456的博客

05-11

867

知识点伪元素: ::after 动画：@keyframe，animation 变换：transform；2d平移：translate()；2d旋转：rotate() overflow属性：元素溢出处理渐变效果：linear-gradient(角度，颜色1，颜色2)；例linear-gradient(45deg, rgb(40, 154, 224),rgba(105, 228, 255, 0.224)) 效果图 Code <!DOCTYPE html> <html lang="en

css 百分比水球动画

ithunzi的博客

04-27

722

<!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> *, *:before, *:after

CSS 3.0实现水滴加载特效

构建数字世界的感官之桥 | 分享前端工程化、动效魔法与性能之舞！

12-13

973

给大家分享一个用CSS 3.0实现的水滴加载特效，效果如下：以下是代码实现，欢迎大家复制、粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 3.0.

使用css实现水球效果

weixin_39927443的博客

12-29

2516

通过在制定overflow：hidden的元素上添加非常大圆形，而且圆形设置圆角，并不断滚动，数量多了就可以显示出水波效果 <!DOCTYPE html> <html> <head> <style> @keyframes roll { form { transform: rotate(0deg); } to {...

前端入门（水球特效，css）

gronkie的博客

01-16

1270

（先分享个别人讲解的视频，八分钟我觉得不绰水球特效）大概思路就是一个圆圈加一个边框四个角有弧度的矩形，然后让矩形在平面上旋转，再把矩形多余的地方用 overflow: hidden; 藏起来就可以了其他就是一些小地方的修饰了，不太重要，看个人喜好，比如外面套一层 div ，设置一个粉色 3px 宽的边框，再设个 padding 和里面的隔开，设置个阴影，还有把矩形的转动速度设置为匀速（我觉得这样好看点） <!DOCTYPE html> <html> <head&