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

互联网   发布时间:2017-08-09 14:27:43   作者:Miss_Fairy   我要评论

本篇文章主要介绍了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>

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

相关文章

  • CSS3实现背景透明文字不透明的示例代码

    这篇文章主要介绍了CSS3实现背景透明文字不透明的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-25
  • css3 column实现卡片瀑布流布局的示例代码

    这篇文章主要介绍了css3 column实现卡片瀑布流布局的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-22
  • CSS3地图动态实例代码(圆圈向外扩散)

    这篇文章主要介绍了CSS3地图动态实例代码(圆圈向外扩散),主要考察CSS3中动画的使用,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2018-06-15
  • CSS3截取字符串实例代码【推荐】

    截取字符串一般是用js或者后台语言来实现,其实使用CSS也是可以实现此效果的。下面通过一段实例代码给大家介绍CSS3截取字符串的方法,需要的朋友参考下吧
    2018-06-07
  • CSS3 清除浮动的方法示例

    这篇文章主要介绍了CSS3 清除浮动的方法示例的相关资料,通过本文,让大家可以明白清除浮动的原理和几种方法,最后得出一种本文认为最好用的方法,感兴趣的小伙伴们可以参考
    2018-06-01
  • CSS3之transition实现下划线的示例代码

    这篇文章主要介绍了CSS3之transition实现下划线的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-30
  • CSS3实现可翻转的hover效果

    本文给大家分享基于css3实现可翻转的hover效果,代码简单易懂,非常不错,具有一定的参考借鉴价值,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-05-23
  • 详解如何在css中引入自定义字体(font-face)

    本篇文章主要介绍了详解如何在css中引入自定义字体(font-face),能将自定义的字体添加到网页中,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看
    2018-05-17
  • CSS3实现多样的边框效果

    本文通过实例代码给大家介绍了基于csss3实现多样的边框效果,有半透明边框,多重边框,边框内圆角,具体效果图和实现代码大家参考下本文
    2018-05-04
  • 纯css3制作煽动翅膀的蝴蝶的示例

    这篇文章主要介绍了纯css3制作煽动翅膀的蝴蝶的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-23

最新评论