css实现炫酷充电动画

先绘制一个电池，电池头部和电池的身体
在这里插入图片描述
这里其实就是两个div，使用z-index改变层级，电池的身体盖住头部，圆角使用border-radius完成
html部分,完整的css部分在最后

<div class="chargerBox">
     <div class="chargerHead"></div>
     <div class="chargerBody">
             <div class="water">
                  <div class="whiteBox"></div>
             </div>
     </div>

     <div class="shade"></div>
</div>

绘制电池的css部分

.chargerBox{
    width: 200px;
    height: 200px;
    background: #eee;
    margin: 30px;
    padding: 50px;
    .chargerHead{
        width: 20px;
        height: 20px;
        background: #e9e9e9;
        border-radius: 4px;
        margin: 0 auto;
        box-shadow: 0px 0px 6px -2px #6d6d6d;
        animation: light 1s forwards linear 25s;
    }
    .chargerBody{
        width: 120px;
        height: 180px;
        margin: 0 auto;
        margin-top: -12px;
        border-radius: 15px 15px 10px 10px;
        z-index: 10;
        background-color: #fff;
        box-shadow: 0px 0px 6px -2px #6d6d6d;
   }
}

绘制完身体后开始给电池充电，让电池身体内部动起来。
给电池内部添加一个div，div的初始高度为0，随着动画的播放，慢慢的充满电池
在这里插入图片描述
这里充电的颜色可以改成渐变，随着电量的饱和，渐变的颜色也会随之更改，linear-gradient渐变是不能直接更改颜色的，这里可以使用 filter: hue-rotate();来修改图像的色相值，从而达到渐变动画的效果。
下面是充电部分的代码：

.water{
      width: 120px;
      height: 10px;
      position: absolute;
      bottom: 0;
      background: linear-gradient(0deg,#7F7FD5,#86A8E7,#91eae4);
      filter: hue-rotate(0deg);  /**关于渐变，普通的颜色更改是无效的，只能通过filter：hue-rotate色相旋转来实现颜色变化，初始不变 */
      animation: riseWater 20s forwards  linear;
      left: 50%;
      transform: translateX(-50%);
}
@keyframes riseWater {
      from {
           height: 10px;
      }
      to {
           height: 100%;
           filter: hue-rotate(60deg);   /* 颜色变化 */
         }
}

在这里插入图片描述
现在电池的电量已经充起来了，写到这里，充电的部分已经ok了，剩下的就是让电量动起来，像水一样流动

先绘制一个圆角矩形

border-radius: 45%

在这里插入图片描述
这个圆角矩形就是充电动画的关键，静止的时候其实看不出来它与水流有什么关联，咱们让它动起来观察一下
在这里插入图片描述
这一块就是水流动画的显示部分，白色的是水流，灰色的不展示，上一步中已经写好了充电的动画，这里只需要将该位置叠加到充电动画上面，即可完成充电的水流效果。
在这里插入图片描述
水流一般是多层的，所以这里可以再添加一个旋转的矩形，两个矩形旋转的角度和时长不同，并且更改其中一个矩形的rgba即可实现真实的水流效果。

.whiteBox{
         width: 300px;
         height: 300px;
         position: absolute;
         left: 50%;
         bottom: -10px;
         transform: translateX(-50%);
         animation: whiteBoxTop 25s forwards linear;

         &::before
         {
           content: '';
           width: 100%;
           height: 100%;
           position: absolute;
           background: #fff;
           border-radius: 45% ;
           animation: whiteSpin 5s infinite linear;
         }
         &::after{
           content: '';
            width: 101%;
            height: 101%;
            position: absolute;
            border-radius: 45% ;
            background: rgba(255,255,255,0.3);
            animation: whiteSpin2 7s infinite linear;
         }
}
@keyframes whiteBoxTop {
            from {
                bottom: 0;
            }
            to {
                bottom: 190px;
            }
}

@keyframes whiteSpin {
            from {
                transform:rotate(0deg);
            }
            to {
                transform:rotate(360deg);
            }
}

@keyframes whiteSpin2 {
            from {
                transform:rotate(0deg);
            }
            to {
                transform:rotate(360deg);
            }
}

注意：矩形的旋转必须是360度的，否则会出现卡顿的情况，因为无限循环的动画第一次循环结束后会回到最初的起点，如果不是360度可能会发生旋转到某度（例如：200度）的时候度数重置到0，重新循环就会出现不流畅的画面。

在这里插入图片描述
做完水流动画后，给电池的头部加一个动画，延迟时间为充电设置的时间，当电池充满时，头部亮起表示电池已经充满。
我这里设置的充满时长为20s，这里需要延迟25s，因为水流的中间有凹陷的地方，所以延迟时间需要大于充满时长才行。

    .chargerHead{
        width: 20px;
        height: 20px;
        background: #e9e9e9;
        border-radius: 4px;
        margin: 0 auto;
        z-index: 10;
        box-shadow: 0px 0px 6px -2px #6d6d6d;
        animation: light 1s forwards linear 25s;  /*延迟25s*/
    }
    @keyframes light {
        from {
            background: #ffe793;
        }
        to {
            background: #ffe793;
            filter: contrast(200%);  /*让头部亮起来 增加200%的饱和度*/
        }
    }

完成这些后，需要给电池增加渐变阴影，让电池有厚度感和真实感，这里创建一个div，大小和电池一致，通过给电池添加z-index使电池覆盖div，使用filter: blur(20px)来让底部的div高斯模糊从而实现阴影的效果，阴影和电池的颜色保持一致（动态渐变），并且div的动画时长和高度也和电池保持一致。

/* 渐变阴影 */
.shade{
        width: 120px;
        height: 0px;
        margin: 0 auto;
        margin-top: 0px;
        border-radius: 15px 15px 15px 15px;
        background: linear-gradient(0deg,#7F7FD5,#86A8E7,#91eae4);
        filter: blur(10px);
        animation: shadeBase 25s forwards linear;
}
@keyframes shadeBase {
        from {  
            height: 0px; 
            margin-top: 0px;
            filter: blur(20px) hue-rotate(0deg);   /* 颜色变化 */ 
        }
        to {  
            height: 180px; 
            margin-top: -180px;  /*高度和电池一致*/
            filter: blur(20px) hue-rotate(60deg);   /* 颜色变化 */ 
        }
    }
}

在这里插入图片描述
除了这种方案外，还可以使用box-shadow实现阴影，box-shadow使用rgba，在动画渲染的同时修改rgba来实现阴影颜色的变化。

   @keyframes shadeBase {
        from {  
            height: 0px; 
            margin-top: 0px;
            box-shadow: 0px 0px 15px 10px rgba(143, 148, 227,0.2);

        }
        to {  
            height: 180px; 
            margin-top: -180px;
            box-shadow: 0px 5px 20px 5px rgba(203, 163, 238,0.8); 
        }
    }

下面是css部分的代码

.chargerBox{
    width: 200px;
    height: 200px;
    margin: 30px;
    padding: 50px;
    .chargerHead{
        width: 20px;
        height: 20px;
        background: #e9e9e9;
        border-radius: 4px;
        margin: 0 auto;
        z-index: 10;
        box-shadow: 0px 0px 6px -2px #6d6d6d;
        animation: light 1s forwards linear 25s;
    }
    @keyframes light {
        from {
            background: #ffe793;
        }
        to {
            background: #ffe793;
            filter: contrast(200%);
        }
    }

    .chargerBody{
        width: 120px;
        height: 180px;
        margin: 0 auto;
        margin-top: -12px;
        border-radius: 15px 15px 10px 10px;
        z-index: 10;
        box-shadow: 0px 0px 6px -2px #6d6d6d;
        position: relative;
        overflow: hidden;
        .water{
            width: 120px;
            height: 10px;
            position: absolute;
            bottom: 0;
            background: linear-gradient(0deg,#7F7FD5,#86A8E7,#91eae4);
            filter: hue-rotate(0deg);  /**关于渐变，普通的颜色更改是无效的，只能通过filter：hue-rotate色相旋转来实现颜色变化，初始不变 */
            animation: riseWater 20s forwards  linear;
            left: 50%;
            transform: translateX(-50%);
        }
        @keyframes riseWater {
            from {
                height: 10px;
            }
            to {
                height: 100%;
                filter: hue-rotate(60deg);   /* 颜色变化 */
            }
        }


        
        .whiteBox{
            width: 300px;
            height: 300px;
            position: absolute;
            left: 50%;
            bottom: -10px;
            transform: translateX(-50%);
            animation: whiteBoxTop 25s forwards linear;

            &::before
            {
                content: '';
                width: 100%;
                height: 100%;
                position: absolute;
                background: #fff;
                border-radius: 45% ;
                animation: whiteSpin 5s infinite linear;
            }
            &::after{
                content: '';
                width: 101%;
                height: 101%;
                position: absolute;
                border-radius: 45% ;
                background: rgba(255,255,255,0.3);
                animation: whiteSpin2 7s infinite linear;
            }
        }
        @keyframes whiteBoxTop {
            from {
                bottom: 0;
            }
            to {
                bottom: 190px;
            }
        }
        @keyframes whiteSpin {
            from {
                transform:rotate(0deg);
            }
            to {
                transform:rotate(360deg);
            }
        }
        @keyframes whiteSpin2 {
            from {
                transform:rotate(0deg);
            }
            to {
                transform:rotate(360deg);
            }
        }
    }


    /* 渐变阴影 */
    .shade{
        width: 120px;
        height: 0px;
        margin: 0 auto;
        margin-top: 0px;
        border-radius: 15px 15px 15px 15px;
        background: linear-gradient(0deg,#7F7FD5,#86A8E7,#91eae4);
        filter: blur(10px);
        animation: shadeBase 25s forwards linear;
    }
    @keyframes shadeBase {
        from {  
            height: 0px; 
            margin-top: 0px;
            filter: blur(20px) hue-rotate(0deg);   /* 颜色变化 */ 
        }
        to {  
            height: 180px; 
            margin-top: -180px;
            filter: blur(20px) hue-rotate(60deg);   /* 颜色变化 */ 
        }
    }
}

该动画的灵感来自：https://github.com/chokcoco/iCSS/issues/75

案例源码：https://gitee.com/wang_fan_w/css-diary

如果觉得这篇文章对你有帮助，欢迎点赞、收藏、转发哦~

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

.NET Core 实现Excel的导入导出

.NET Core 实现Excel的导入导出

.NET Core 使用NPOI实现Excel的导入导出前言NPOI简介一、安装相对应的程序包1.1、在 “管理NuGet程序包” 中的浏览搜索&#xff1a;“NPOI”二、新建Excel帮助类三、调用3.1、增加一个“keywords”模型类&#xff0c;用作导出3.2、添加一个控制器3.3、编写导入导出的控制器代码…
阅读更多...
一本通 3.2.1 队列的基本应用

一本通 3.2.1 队列的基本应用

1332&#xff1a;【例2-1】周末舞会 【题目描述】 假设在周末舞会上&#xff0c;男士们和女士们进入舞厅时&#xff0c;各自排成一队。跳舞开始时&#xff0c;依次从男队和女队的队头上各出一人配成舞伴。规定每个舞曲能有一对跳舞者。若两队初始人数不相同&#xff0c;则较长…
阅读更多...
【数据结构】树和二叉树的介绍

【数据结构】树和二叉树的介绍

文章目录前言一、树1.1 树的概念1.2 树的相关概念1.3 树的表示1.4 树的用途二、二叉树2.1 二叉树的概念2.2 两种特殊的二叉树2.3 二叉树的性质2.4 二叉树的存储方式总结前言 树是一种让程序员们既爱又恨的数据结构。它就像是一棵大树&#xff0c;让你可以轻松地摘取其中的果实…
阅读更多...
【10】核心易中期刊推荐——模式识别与机器学习

【10】核心易中期刊推荐——模式识别与机器学习

🚀🚀🚀NEW！！！核心易中期刊推荐栏目来啦 ~ 📚🍀 核心期刊在国内的应用范围非常广，核心期刊发表论文是国内很多作者晋升的硬性要求，并且在国内属于顶尖论文发表，具有很高的学术价值。在中文核心目录体系中，权威代表有CSSCI、CSCD和北大核心。其中，中文期刊的数…
阅读更多...
【C++进阶】C++11(中)左值引用和右值引用

【C++进阶】C++11(中)左值引用和右值引用

文章目录左值引用左值引用的概念左值引用的使用右值引用右值引用的概念右值引用的使用左右值相互引用左值引用对右值进行引用右值引用对左值进行引用右值引用使用场景和意义左值引用的优势左值引用的短板右值引用的优势完美转发模板万能引用完美转发实际运用场景左值引用 左值…
阅读更多...
vue3+ts 开发效率提升

vue3+ts 开发效率提升

1、vite pnpm项目初始化 pnpm&#xff1a; 比npm或yarn快10倍 pnpm与其他包管理器&#xff08;如npm和Yarn&#xff09;的不同之处在于它使用一种称为“硬链接”的独特安装方法。当你使用PNPM安装一个包时&#xff0c;它并不会将包的文件复制到每个项目的node_modules目录中&a…
阅读更多...
图形视图界面 图形效果

图形视图界面 图形效果

Qt的标准图形效果类&#xff1a; QGraphicsBlurEffect提供模糊效果QGraphicsColorizeEffect提供染色效果QGraphicsDropShadowEffect提供阴影效果QGraphicsOpacityEffect提供透明效果 QGraphicsBlurEffect&#xff08;模糊效果&#xff09; 模糊效果会模糊源。此效果对于减少细…
阅读更多...
VS Code工作区用法

VS Code工作区用法

背景VS Code可以通过"文件/打开文件夹"来打开本地项目&#xff0c;但是想要打开多个项目便需要来回切换&#xff0c;比较费劲。此时就可以使用工作区功能&#xff0c;将不同的项目放置到同一个工作区中&#xff0c;这样切换项目的时候就会非常方便。操作方法打开其中…
阅读更多...
免费搭建个人博客

免费搭建个人博客

免费搭建个人博客,并发布到公网 利用hexo搭建个人博客&#xff0c;通过gitee的pages发布到公网 1 前置准备 安装git、安装node.js&#xff08;尽量选择长期支持的版本) node.js官网&#xff1a;https://nodejs.org/en/ git官网&#xff1a;https://git-scm.com/book/zh/v2 安装…
阅读更多...
如何衡量你的Facebook广告活动的成功

如何衡量你的Facebook广告活动的成功

投入大量资金和资源在Facebook广告上并不总能带来预期的回报&#xff0c;这很可能是由于缺乏恰当的衡量广告活动成功的方法。在这篇文章中&#xff0c;我们将介绍一些关键的指标&#xff0c;帮助你更好地了解如何衡量你的Facebook广告活动的成功。1.费用每次点击&#xff08;CP…
阅读更多...
Spring和IDEA都不推荐用的@Autowired注解，为什么还有那么多人用？

Spring和IDEA都不推荐用的@Autowired注解，为什么还有那么多人用？

Autowired的默认装配 我们都知道在spring中Autowired注解&#xff0c;是用来自动装配对象的。通常&#xff0c;我们在项目中是这样用的&#xff1a; package com.sue.cache.service;import org.springframework.stereotype.Service;Service public class TestService1 {publ…
阅读更多...
你是否了解AR技术？AR技术就在我们身边

你是否了解AR技术？AR技术就在我们身边

文章目录专栏导读1、前言2、AR技术原理3、游戏领域应用4、教育领域应用5、医疗领域应用6、零售领域应用专栏导读 ✍ 作者简介&#xff1a;i阿极&#xff0c;CSDN Python领域新星创作者&#xff0c;专注于分享python领域知识。 ✍ 本文录入于《数据分析之道》&#xff0c;本专栏…
阅读更多...
C/C++每日一练(20230325)

C/C++每日一练(20230325)

目录 1. 搜索插入位置 &#x1f31f; 2. 结合两个字符串 &#x1f31f; 3. 同构字符串 &#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java每日一练 专栏 1. 搜索插入位置 给定一个排序数…
阅读更多...
CAN通信----电路图

CAN通信----电路图

CAN通信----基本原理 一、CAN总线网络连接 1.闭环总线网络----ISO11898 闭环总线网络高速、短距离&#xff0c;它的总线最大长度为 40m&#xff0c;通信速度最高为 1Mbps&#xff0c;总线的两端各要求有一个120 欧的电阻。 2.开环总线网络----ISO11519 开环总线网络低速、…
阅读更多...
LeetCode394.字符串解码

LeetCode394.字符串解码

LeetCode刷题记录 文章目录&#x1f4dc;题目描述&#x1f4a1;解题思路⌨C代码&#x1f4dc;题目描述 给定一个经过编码的字符串&#xff0c;返回它解码后的字符串。 编码规则为: k[encoded_string]&#xff0c;表示其中方括号内部的 encoded_string 正好重复 k 次。注意 k 保…
阅读更多...
1652_MIT 6.828 shell例程重定向的实现分析

1652_MIT 6.828 shell例程重定向的实现分析

全部学习汇总&#xff1a; GreyZhang/g_unix: some basic learning about unix operating system. (github.com) 前面完成了一个单独命令执行之后&#xff0c;想放弃这个简单shell的实现。后来想想多少还是有几分不甘心&#xff0c;还是耐着心思把这个做完吧&#xff01; 这次&…
阅读更多...
基于pytorch+Resnet101加GPT搭建AI玩王者荣耀

基于pytorch+Resnet101加GPT搭建AI玩王者荣耀

本源码模型主要用了SamLynnEvans Transformer 的源码的解码部分。以及pytorch自带的预训练模型"resnet101-5d3b4d8f.pth"本资源整理自网络&#xff0c;源地址&#xff1a;https://github.com/FengQuanLi/ResnetGPT注意运行本代码需要注意以下几点 注意&#xff01;&a…
阅读更多...
多线程控制讲解与代码实现

多线程控制讲解与代码实现

多线程控制 回顾一下线程的概念 线程是CPU调度的基本单位&#xff0c;进程是承担分配系统资源的基本单位。linux在设计上并没有给线程专门设计数据结构&#xff0c;而是直接复用PCB的数据结构。每个新线程&#xff08;task_struct{}中有个指针都指向虚拟内存mm_struct结构&am…
阅读更多...
你真的掌握到“优先级队列“的精髓了吗？

你真的掌握到“优先级队列“的精髓了吗？

前文如果我们给每个元素都分配一个数字来标记其优先级&#xff0c;不妨设较小的数字具有较高的优先级&#xff0c;这样我们就可以在一个集合中访问优先级最高的元素并对其进行查找和删除操作了。这样&#xff0c;我们就引入了优先级队列 这种数据结构。一&#xff0c;priority_…
阅读更多...
QT/C++调试技巧：内存泄漏检测

QT/C++调试技巧：内存泄漏检测

文章目录内存泄漏方案一方案二&#xff1a;CRT调试定位代码位置方法1方法2其它问题方案三&#xff1a;使用vs诊断工具方案四&#xff1a;使用工具VLD&#xff08;Visio Leak Detector&#xff09;方案五Cppcheck内存泄漏 内存泄漏&#xff1a;指的是在程序里动态申请的内存在使…
阅读更多...
最新文章

Copyright @ 2022~2023