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 相关文章推荐
CSS3中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
css3使网页、图片变成灰色兼容大多数浏览器
Jul 02 HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
Sep 04 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
Dec 20 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 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/09/26 PHP
PHP合并静态文件详解
2014/11/14 PHP
又十个超级有用的PHP代码片段
2015/09/24 PHP
Laravel实现表单提交
2017/05/07 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
javascript事件问题
2009/09/05 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
2018/03/26 Javascript
vue实现组件之间传值功能示例
2018/07/13 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
Python 如何测试文件是否存在
2020/07/31 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
若干个Java基础面试题
2015/05/19 面试题
财务会计专业个人求职信范本
2014/01/08 职场文书
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
课程设计感想范文
2015/08/11 职场文书
如何利用React实现图片识别App
2022/02/18 Javascript