10.HTML+CSS ——微彩虹光晕进度条_UndeFIned丶的博客-程序员秘密

技术标签: css  前端案例合集  

在这里插入图片描述


H部分:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>彩虹光晕进度条</title>
    <link rel="stylesheet" href="css/6-4.css">
</head>

<body>
    <div class="shoot">
        <div class="out">
            <!-- 内框颜色部分 -->
            <div class="shoot_power power"></div>
        </div>
    </div>
</body>

</html>

css部分:

* {
    
    margin: 0;
    padding: 0;
}

body {
    
    background: #161616;
}

.shoot {
    
    margin: 300px auto;
    width: 100%;
}

.out {
    
    padding: 6px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    /* inset: 定义元素的阴影类型为内阴影。该值为空时,则元素的阴影类型为外阴影  */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
    text-align: center;
}

.shoot_power {
    
    height: 8px;
    /* background-color: #fff000; */
    border-radius: 4px;
    transition: 0.6s linear;
    transition-property: width, background-color;
    box-shadow: 0 0 50px white, 0 0 30px skyblue, 0 0 6px blue, 0 0 100px orange, 0 0 160px green, 0 0 220px yellow, 0 0 340px cyan, 0 0 400px blue, 0 0 450px purple;
}

.power {
    
    /* background-color: #FCBC51; */
    background-color: #2187e7;
    width: 100%;
    animation: kobePower 9s;
}

@keyframes kobePower {
    
    0% {
    
        width: 0;
    }
    100% {
    
        width: 100%;
    }
}

没啥创意

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_46313446/article/details/106553091

智能推荐

MLAG与vPC之间有什么区别?_audrey-luo的博客-程序员秘密_mlag

如今,越来越多的企业开始利用数据中心虚拟化来降低成本和简化数据流,而为了确保数据可以在数据中心和业务位置之间实现无缝传输,网络容量需求将会大大增加。为了适应这种趋势发展,业界正在寻找通过连接尽可能多的网络设备来增强网络容量的方法,例如,MLAG和vPC,这两种链路聚合技术可连接多台以太网交换机,增加网络容量。那么您了解它们吗?两者之间有何不同?本文将对此展开全面的介绍。MLAG是什么?MLAG(多机箱链路聚合)是一种启用来自主机的二层多路径以获得额外的带宽或链路弹性的非标准协议,由于该协议是一种公共

CISCO数据中心虚拟化之vPC技术和配置_achejq的博客-程序员秘密

最近在研究数据中心功能时发现CISCO有一个虚拟化技术叫vPC的技术,今天就把我研究的成果分享出来。什么是vPC(virtual port channel)?研究了大半天,其实它就是一个可以跨不同设备的port-channel技术。它的作用:可以实现网络冗余,可以跨设备进行端口聚合,增加链路带宽,当链路故障时比生成树协议收敛时间还快。下面我们就说说为什么会出现vPC技术。如上图所示

h5外卖源码php_从零搭建外卖CPS平台小程序开发_m0_56783267的博客-程序员秘密

直到看到了一个好友分享到外卖 CPS,觉得这是一个机会,不仅任何地方都可以做,而且门槛相对较低。所以我最近分析了将近 30 个外卖大号,分析了他们的引流流程,总结一下他们有哪些可以值得我们借鉴的地方。希望对大家有所启发。当然最主要的还是着手去做。外卖cps带分销返利源码源代码地址http://www.mybei.cn搭建步骤下载以上源代码到本地http://www.mybei.cn成品展示截图步骤下载以上源代码到本地http://www.mybei.cn修改为你自己的微信

podman加速器配置 && Harbor搭建私人仓库_天外来物_的博客-程序员秘密

[[email protected] containers]# pwd/etc/containers[[email protected] containers]# vim registries.conf......unqualified-search-registries = ["docker.io"][[registry]]prefix = "docker.io"location = "j7nfsalu.mirror.aliyuncs.com"......[[email protected] ~]# c

C++经典算法题-求s=a+aa+aaa+aaaa+aa...a的值,其中a是一个数字。例如 2+22+222+2222+22222(此时共有5个数相加),几个数相加有键盘控制。_cwl_java的博客-程序员秘密

1. 题目题目:求s=a+aa+aaa+aaaa+aa…a的值,其中a是一个数字。例如 2+22+222+2222+22222(此时共有5个数相加),几个数相加有键盘控制。2. 分析程序分析:关键是计算出每一项的值。3. 代码示例 main() { int a,n,count=1; long int sn=0,tn=0; pr...

随便推点

日语中的接打电话礼貌用语_方长存的博客-程序员秘密

1 接电话的场合& おはようございます、○○会社です。& はい、○○会社でございます。& はい、○○会社、田中がうけたまわっております。& おはようございます、○○会社、××部でございます。 2 打电话的场合& おはようございます、いつもお世话になります、○○社の铃木と申しますが。 & いつもお世话になっております、私○○社の铃木と申しますが。顾客に対して电话応

PS188——谱瑞(Parade)推动的 Type-C扩展坞红海战略_Type_C_Ken的博客-程序员秘密_ps186芯片

PS188——谱瑞(Parade)推动的 Type-C扩展坞红海战略两年前谱瑞(Parade)收购睿思科技(Fresco Logic)的时候,没有人会想到,扩展坞行业老大已经准备好主动发起价格战了。

Linux系统I/O模型和网络I/O模型_白-胖-子的博客-程序员秘密

计算机I/OI/O在计算机中指Input/Output,Linux服务器 I/O 原理和流程内核空间和用户空间数据交换具体参见:https://blog.csdn.net/timonium/article/details/117775331Linux系统I/O模型和网络I/O模型基于Linux服务器I/O原理提出的数据交换模式架构说人话:IO模型就是一种数据传递的设计方案太长不看版本同步和异步同步:使用天然气老水壶烧水,得盯着异步:使用物联网电水壶烧水,水烧开了自动停了还

数据类型(五大基本类型,3种特殊类型)_融极的博客-程序员秘密_数据类型有哪几种

概述官方文档Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库、缓存和消息中间件。 它支持多种类型的数据结构,如 字符串(strings), 散列(hashes), 列表(lists), 集合(sets), 有序集合(sorted sets) 与范围查询, bitmaps, hyperloglogs 和 地理空间(geospatial) 索引半径查询。 Redis 内置了 复制(replication),LUA脚本(Lua scripting), LRU驱动事件(LR

Android中集成环信_zhwadezh的博客-程序员秘密_安卓集成环信

一、 环信的概念: 二、 环信的官网:http://www.easemob.com/三、 集成环信到APP只是修改背景和图标需要一两天时间,如果更复杂修改估计需要5—7天时间。四、 集成需要的步骤:  五、 环信我的开发账号:账号:[email protected];密码:wade123456.注册的步骤:1.在首页点击注册,到如下图: 信息填写完之后,在邮箱激活。再登录。登陆完界面如下: 2.创建...

推荐文章

热门文章

相关标签