css3实现wifi信号逐渐增强效果实例


Posted in HTML / CSS onAugust 09, 2017

整理文档,搜刮出一个css3实现wifi信号逐渐增强效果实例的代码,稍微整理精简一下做下分享。

效果图

css3实现wifi信号逐渐增强效果实例

下面是实现代码:

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title>wifi信号</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box {
            width: 240px;
            height: 240px;
            box-sizing: border-box;
            position: relative;
            margin: 100px auto;
        }
        .wifi-symbol {
            width: 200px;
            height: 200px;
            margin-left: 18px;
            box-sizing: border-box;
            overflow: hidden;
            transform: rotate(45deg);

        }
        .wifi-circle {
            border: 10px solid #ccc;
            border-radius: 50%;
            position: absolute;
        }
        .first {
            width: 260px;
            height: 260px;
            top: 0;
            left: 0;
            animation: run1 4s linear infinite;
        }
        @keyframes run1 {
            0% {
                border-color: #ccc;
            }
            25% {
                border-color: #ccc;
            }
            50% {
                border-color: #ccc;
            }
            75% {
                border-color: #ccc;
            }
            100% {
                border-color: #97a8e6;
            }
        }
        .second {
            width: 200px;
            height: 200px;
            top: 60px;
            left: 60px;
            animation: run2 4s linear infinite;
        }
        @keyframes run2 {
            0% {
                border-color: #ccc;
            }
            25% {
                border-color: #ccc;
            }
            50% {
                border-color: #ccc;
            }
            75% {
                border-color: #97a8e6;
            }
            100% {
                border-color: #ccc;
            }
        }
        .third {
            width: 140px;
            height: 140px;
            top: 120px;
            left: 120px;
            animation: run3 4s linear infinite;
        }
        @keyframes run3 {
            0% {
                border-color: #ccc;
            }
            25% {
                border-color: #ccc;
            }
            50% {
                border-color: #97a8e6;
            }
            75% {
                border-color: #ccc;
            }
            100% {
                border-color: #ccc;
            }
        }
        .fourth {
            width: 20px;
            height: 20px;
            background: #ccc;
            top: 180px;
            left: 180px;
            animation: run4 4s linear infinite;
        }
        @keyframes run4 {
            0% {
                background: #ccc;
                border-color: #ccc;
            }
            25% {
                background: #97a8e6;
                border-color: #97a8e6;
            }
            50% {
                background: #ccc;
                border-color: #ccc;
            }
            75% {
                background: #ccc;
                border-color: #ccc;
            }
            100% {
                background: #ccc;
                border-color: #ccc;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="wifi-symbol">
          <div class="wifi-circle first"></div>
          <div class="wifi-circle second"></div>
          <div class="wifi-circle third"></div>
          <div class="wifi-circle fourth">
        </div>
    </div>

</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯CSS绘制漂亮的圆形图案效果
May 07 HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
HTML5等待加载动画效果
Jul 27 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 HTML / CSS
CSS3实现三角形不断放大效果
Apr 13 HTML / CSS
为什么你写的height:100%不起作用
May 10 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 HTML / CSS
使用CSS定位HTML元素的实现方法
Jul 07 HTML / CSS
CSS3 实现弹幕的示例代码
Aug 07 #HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 #HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 #HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 #HTML / CSS
使用 css3 实现圆形进度条的示例
Jul 05 #HTML / CSS
css3学习系列之移动属性详解
Jul 04 #HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 #HTML / CSS
You might like
PHP版国家代码、缩写查询函数代码
2011/08/14 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
js装饰设计模式学习心得
2018/02/17 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
python3 模拟登录v2ex实例讲解
2017/07/13 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
Python @property使用方法解析
2019/09/17 Python
pytorch进行上采样的种类实例
2020/02/18 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
四年级数学教学反思
2014/02/02 职场文书
社区工作者感言
2014/03/02 职场文书
销售员试用期自我评价
2014/09/15 职场文书
紧急迫降观后感
2015/06/15 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
解决pytorch-gpu 安装失败的记录
2021/05/24 Python
python 对图片进行简单的处理
2021/06/23 Python