水波波浪进度球

最新推荐文章于 2022-11-24 14:29:21 发布
最新推荐文章于 2022-11-24 14:29:21 发布
阅读量1.7k 收藏
点赞数 2
分类专栏： CSS SVG 文章标签： 水波 波浪 进度条 进度球
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yay_long/article/details/84874630
版权
CSS 同时被 2 个专栏收录
1 篇文章 0 订阅
订阅专栏
SVG
1 篇文章 0 订阅
订阅专栏

水波浪进度球

先看效果图：
效果图

直接撸代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin:0;
    }
    .box{
      width: 200px;
      height: 200px;
      margin: 50px auto;
      background-image: linear-gradient(-180deg, rgba(255,255,255,0.00) 0%, rgba(255,234,149,0.96) 68%);
      border-radius: 100%;
      overflow: hidden;
      position: relative;
    }
    .box:before{
      content: '';
      width: 180px;
      height: 180px;
      background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,234,149,0.96) 68%);
      border-radius: 100%;
      position: absolute;
      left: 10px;
      top: 10px;
    }
    .box:after{
      content: '';
      width: 160px;
      height: 160px;
      background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,234,149,1) 50%);
      border-radius: 100%;
      position: absolute;
      left: 20px;
      top: 20px;
    }
    .wave{
      margin-top: 50px;
      width: 100%;
      height: 210px;
      position: relative;
      overflow: hidden;
      z-index: 2;
    }
    .parallax>use {
      animation: wave-move 1s linear infinite;
      animation-duration: .9s;
    }
    .parallax>use:nth-child(1) {
      animation-delay: -.1s;
    }
    .parallax>use:nth-child(2) {
      animation-delay: -.5s;
    }
    .parallax>use:nth-child(3) {
      animation-delay: -.8s;
    }
    @keyframes wave-move {
      0% {
        transform: translate(90px,0);
      }
      100% {
        transform: translate(-85px,0);
      }
    }
  </style>
</head>
<body>
  <div class="box">
    <svg class="wave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 200 210">
      <defs>
        <path id="wave-shape" stroke="rgba(255,255,255,.8)" stroke-width=".5" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 58-18 88-18 58 18 88 18 v185h-528z"></path>
      </defs>
      <g class="parallax">
        <use xlink:href="#wave-shape" x="50" y="0" fill="url(#linear)"></use>
        <use xlink:href="#wave-shape" x="50" y="3" fill="url(#linear)"></use>
        <use xlink:href="#wave-shape" x="50" y="6" fill="url(#linear)"></use>
      </g>
      <defs>
        <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(90)">
          <stop offset="10%"   stop-color="#FDD936" stop-opacity="0.4" />
          <stop offset="80%" stop-color="#E6911B" stop-opacity="0.8" />
        </linearGradient>
      </defs>
    </svg>
  </div>
</body>
</html>
啷个哩个啷0
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Ehcarts仪表盘，水波球所需JS.rar
10-29
Echarts进行仪表盘、水波球图标开发时，需要分别引用ECharts GL 1.1.js和echarts-liquidfill.js。
svg圆形彩色进度条
Ajia_666的博客
07-10 1499
svg                                                                                                                                                         效果如图： 大小颜色，数据可
前端实现进度球水波荡漾效果
u011964241的专栏
11-24 732
前端效果
微信小程序进度条样式_微信小程序—progress(进度条)
weixin_39939904的博客
12-20 5105
设置进度条颜色(请使用十六进制颜色值,例如：#ff00ff)未选择的进度条的颜色(请使用十六进制颜色值,例如：#ff00ff)设置/取消进度条从左往右的动画设置/取消进度条右侧显示百分比//获取应用实例const app = getApp()var isFirst = true;var isSiFirst = true;Page({data: {percent: "20", // 初始进度...
CSS 渐变背景 之 线性渐变 linear-gradient
CyberPlayer的博客
02-28 7142
CSS 渐变 可以显示两种或多种指定颜色之间的平滑过渡。 CSS 定义了两种渐变类型： 线性渐变（向下/向上/向左/向右/对角线） 径向渐变（由其中心定义） 这里先讲线性渐变 线性渐变 语法： background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 线性渐变 - 从上到下（默认） 下面的例子显示了从顶部开始的线性渐变。它从红色开始，过渡到黄色： #grad { backgrou
border边框渐变
snowXZZ的博客
06-05 377
.item{ width:2.5rem; height:0.48rem; border-right: 2px solid; border-image: -webkit-linear-gradient(-180deg, rgba(255,255,255,0.00) 0%,#00BBF2 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2; border-image: -moz-linear-gradient(-180d...
css 设置border边框颜色渐变效果
热门推荐
m0_67401270的博客
08-01 3万+
上下的九宫格执行水平方向的重复属性（拉伸或平铺），左右的格子执行垂直方向的重复属性（拉伸或平铺），而中间的那个格子则水平重复和垂直方向的重复都要执行。下图是起始点到10%的位置标蓝色，10%到30%蓝到白的渐变，30%到70%为白到橘的渐变，从70%到结束标记橘色。从上到下，从起始开始，透明向蓝色渐变到20%的位置，然后又向透明进行渐变到99%的位置，99%到结束是透明。创建线性渐变，需要设置一个起始点和方向（或角度），还要定义终止色，以及两者之间的可选色（可以有多个）。随着渐变的重复，颜色再次循环。...
【Android】自定义控件_动态水波纹效果的进度球
qq_40976230的博客
09-29 1319
最近有个项目，里面要用到进度球，类似于360的流量球效果，经过一段时间的琢磨，实现了如下效果的自定义控件。 添加依赖 在外层build.gradle中添加如下代码： allprojects { repositories { ... maven { url 'https://jitpack.io' } } } 在项目build.gradle添加依赖： ...
水波进度流量球
04-21
自定义实现水纹进度以及360水晶波浪球类似效果
波浪进度加载动画
05-23
利用CAShapeLayer绘制的一个波浪进度动画,可自定义颜色
Demo_水波球进度条
10-18
非常完美的类似360水波球进度条，经过我改良的版本，可直接运用于项目中，代码有详细注释，帮助大家学习和改良，里面还有类似液体颜色渐变效果，不大常用，但是还是保留该功能。
仿360圆球型水波进度
05-23
仿360球形水波进度实现，用oc编写，代码导入xcode即可使用，自定义view，封装圆球
Android自定义WaveView实现波浪进度效果
08-31
最近注意到百度外卖以及淘宝个人中心，都用到了类似水波起伏的效果，于是就参照网上的资料然后自己整改，自定义了一个waveView来实现这个效果，文中给出来详细的实现原理及实例代码，有需要的朋友们可以参考借鉴，...
html5Canvas实现球内波浪动画
02-03
html5Canvas实现的球内波浪动画，包括每一步实现的源码，注释，方便修改使用
后端开发是一个涉及广泛技术和工具的领域.docx
04-30
后端开发是一个涉及广泛技术和工具的领域，这些资源对于构建健壮、可扩展和高效的Web应用程序至关重要。以下是对后端开发资源的简要介绍： 首先，掌握一门或多门编程语言是后端开发的基础。Java、Python和Node.js是其中最受欢迎的几种。Java以其跨平台性和丰富的库而著名，Python则因其简洁的语法和广泛的应用领域而备受欢迎。Node.js则通过其基于JavaScript的单线程异步I/O模型，为Web开发提供了高性能的解决方案。 其次，数据库技术是后端开发中不可或缺的一部分。关系型数据库（如MySQL、PostgreSQL）和非关系型数据库（如MongoDB、Redis）各有其特点和应用场景。关系型数据库适合存储结构化数据，而非关系型数据库则更适合处理大量非结构化数据。 此外，Web开发框架也是后端开发的重要资源。例如，Express是一个基于Node.js的Web应用开发框架，它提供了丰富的API和中间件支持，使得开发人员能够快速地构建Web应用程序。Django则是一个用Python编写的Web应用框架，它采用了MVC的软件设计模式，使得代码结构更加清晰和易于维护。
华为数字化转型实践28个精华问答glkm.pptx
04-30
华为数字化转型实践28个精华问答glkm.pptx
新员工入职培训全流程资料包gl.zip
04-30
新员工入职培训全流程资料包（100+个文件） 1入职流程指引 万科新职员入职通知书 万科新职员入职引导手册 新进员工跟进管理表 新员工入职报到工作单(文职) 新员工入职报到流程 新员工入职流程表 新员工入职手续办理流程(工厂 新员工入职手续清单 新员工入职须知 新员工入职训流程 新员工入职引导表(导师用) 2 入职工具表格 3 培训方案计划 4培训管理流程 5培训教材课件 6 培训效果检测 7 员工管理制度 8 劳动合同协议 9 新员工培训PPT模板(28套)
三菱PLC通讯程序实例
04-30
FX5U PLC作为主、从站的通讯方式程序实例，以及包含详细说明文件...
技术需求报告-集行波测距与故障录波功能于一体的电网综合故障分析系统.docx
最新发布
04-30
技术需求报告-集行波测距与故障录波功能于一体的电网综合故障分析系统.docx
echarts水波球波浪上方文字
06-13
要在ECharts水波球波浪上方添加文字，可以通过在series中设置label属性来实现。例如： ``` series: [{ type: 'liquidFill', data: [0.6,0.5,0.4], label: { show: true, position: 'top', color: '#fff', ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值