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 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
css3实现六边形边框的实例代码
May 24 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
HTML5 canvas 基本语法
Aug 26 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
Apr 07 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
Oct 20 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 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中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
Node.js pipe实现源码解析
2017/08/12 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
PyCharm如何导入python项目的方法
2020/02/06 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
python中实现词云图的示例
2020/12/19 Python
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
管理站站长岗位职责
2013/11/27 职场文书
艺术设计专业个人求职信范文
2013/12/11 职场文书
幼儿园中班新学期寄语
2014/01/18 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
行政助理岗位职责
2015/02/10 职场文书
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python