搜索
首页web前端css教程纯CSS实现水波纹的电池充电动画特效

纯CSS实现水波纹的电池充电动画特效

Apr 18, 2022 am 11:07 AM
css动画电池充电

本篇文章给大家介绍一下巧用 CSS实现水波纹的电池充电动画特效的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

纯CSS实现水波纹的电池充电动画特效

我们知道构成前端的三大语言有:htmlcssjs,其中最为神秘的便是css,为什么这么说呢?自从动画、过度等属性的出现,可以说只有你想不到,就没有做不到~

上一篇文章介绍了一种手机充电动画效果,今天就延续一下,这个相比于上篇的就有点简单了,不过为了女朋友,特意就写一下吧~

特效:电池充电特效,整体特效可在最上方看到

前置知识:

要想完成这个特效,就必须要知道一些前置的属性,简单介绍一下吧:

animationtransformfilter 这三个就不多做介绍了,基本上所有的动画都会用到这两个属性。【推荐学习:css视频教程

box-shadow

box-shadow:阴影

用法:box-shadow: h-shadow v-shadow blur spread color inset;

  • h-shadow:必填的,水平阴影的位置,允许负值
  • v-shadow:必需的。垂直阴影的位置。允许负值
  • blur:模糊距离
  • spread:阴影的大小
  • color:阴影的颜色
  • inset:从外层的阴影(开始时)改变阴影内侧阴影

border-radius

border-radius:设置圆角

可设置四个值,与 marginpadding 的使用方法一样

也就是每个半径的四个值的顺序是:左上角右上角右下角左下角

  • 如果省略左下角,右上角是相同的。
  • 如果省略右下角,左上角是相同的。
  • 如果省略右上角,左上角是相同的。

linear-gradient()

linear-gradient():渐变,用于创建一个表示两种或多种颜色线性渐变的图片。

用法:background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

  • direction: 用角度值指定渐变的方向(或角度),制定方向
  • color...: 依次有什么颜色变为什么颜色

容器

我们设置两个 div ,一个座位底部的容器,上面弄个小盖子,主要通过border-radius设置下周边的圆角,并且加入box-shadow加入阴影,增强立体感

1.png

充电效果

这里可以使用定位布局,通过top来控制水的位置,top的值越大水越低,top的值越小水越高

我们把水位设置为80%,同时通过linear-gradient() 来设置水的一个渐变色:

2.png

那么动画就很简单了,只需要控制 top值就会造成水的上升,像这样

3.gif

这时需要注意的点是:

  • 最上方我们的容器设置了圆角,所以在动画到100%的时候,要和容器的圆角一样
  • 水位在移动,为了增强立体感,可设置阴影,可以以有个递进的效果,所以颜色最好稍微变深一点,并且颜色最好偏近
  • 变色还是通过:filter: hue-rotate();这个属性控制
    .content{ //容器
        border-radius: 15px 15px 5px 5px;
        &::after{
            position: absolute;
            top: 80%;
            background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%);
            border-radius: 0px 0px 5px 5px;
            box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08);
            animation: change 10s linear infinite;
            filter: hue-rotate(90deg);
        }
    }
    @keyframes change {
          30% {
            box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83), 0px 4px 10px rgba(8, 117, 134, 0.4);
          }
          50%{
            filter: hue-rotate(60deg);
          }
          80% {
            top: 20%;
            border-radius: 0 0 5px 5px;
            box-shadow: 0 14px 28px rgba(6, 136, 153, 0.2), 0 10px 10px rgba(12, 10, 112, 0.08);
          }
          100% {
              top: 0%;
              filter: hue-rotate(0deg);
              border-radius: 15px 15px 5px 5px;
              box-shadow: 0 14px 28px rgba(7, 93, 104, 0), 0 10px 10px rgba(31, 3, 68, 0.4);
          }
        }

4.gif

水波纹特效

这个特效相信大家都见过,其思想就是在上面的大概位置上设置背景颜色,用相同的底色覆盖,

然后用到translate这个属性,通过转化xy值,然后通过不停的旋转角度,至于数值为啥是这个值,我也搞不清楚。。。有知道的小伙伴可以在评论区留言.

p{ //复盖
    border-radius: 45% 47% 44% 42%;
    transform: translate(-50%, 0);
    animation: move 10s linear infinite;
}
@keyframes move {
  100% {
      transform: translate(-50%, -160px)  rotate(720deg);
  }
}

5.gif

此时,我们发现这个效果并不太真实,进行多覆盖两个,改变旋转值和border-radius的值来设置水面不重叠,但又有差距的效果

p{
    &:nth-child(2){
      border-radius: 38% 46% 43% 47%;
      transform: translate(-50%, 0) rotate(-135deg);
    }
    &:nth-child(3){
      border-radius: 42% 46% 37% 40%;
      transform: translate(-50%, 0) rotate(135deg);
    }
}

此时的效果就非常真实了

6.gif

End

不得不说css真的很神奇,最神秘的莫过于css,喜欢的点个赞??支持下吧(● ̄(エ) ̄●)

(学习视频分享:web前端

以上是纯CSS实现水波纹的电池充电动画特效的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文转载于:掘金社区。如有侵权,请联系admin@php.cn删除
两个图像和一个API:我们重新着色产品所需的一切两个图像和一个API:我们重新着色产品所需的一切Apr 15, 2025 am 11:27 AM

我最近找到了一种动态更新任何产品图像的颜色的解决方案。因此,只有一种产品之一,我们可以以不同的方式对其进行着色以显示

每周平台新闻:第三方代码,被动混合内容,连接最慢的国家的影响每周平台新闻:第三方代码,被动混合内容,连接最慢的国家的影响Apr 15, 2025 am 11:19 AM

在本周的综述中,灯塔在第三方脚本上阐明了灯光,不安全的资源将在安全站点上被阻止,许多国家连接速度

托管您自己的非JavaScript分析的选项托管您自己的非JavaScript分析的选项Apr 15, 2025 am 11:09 AM

有很多分析平台可帮助您跟踪网站上的访问者和使用数据。也许最著名的是Google Analytics(广泛使用)

它全部都在头上:管理带有React头盔的React Power Site的文档头它全部都在头上:管理带有React头盔的React Power Site的文档头Apr 15, 2025 am 11:01 AM

文档负责人可能不是网站上最迷人的部分,但是其中所处的内容对于您的网站的成功也一样重要

JavaScript中的Super()是什么?JavaScript中的Super()是什么?Apr 15, 2025 am 10:59 AM

当您看到一些称为super()的JavaScript时,在子类中,您会使用super()调用其父母的构造函数和超级。访问它的

比较不同类型的本机JavaScript弹出窗口比较不同类型的本机JavaScript弹出窗口Apr 15, 2025 am 10:48 AM

JavaScript具有各种内置弹出API,它们显示用于用户交互的特殊UI。著名:

为什么可访问的网站如此难以构建?为什么可访问的网站如此难以构建?Apr 15, 2025 am 10:45 AM

前几天,我与一些前端人们聊天,讲述了为什么这么多公司努力创建可访问的网站。为什么可访问的网站如此艰难

'隐藏”属性显然很弱'隐藏”属性显然很弱Apr 15, 2025 am 10:43 AM

有一个HTML属性,它可以正是您认为应该做的:

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
4 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
1 个月前By尊渡假赌尊渡假赌尊渡假赌

热工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。