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

CSS

html5 HTML/Xhtml CSS XML/XSLT Dreamweaver教程 Frontpage教程心得技巧

上一篇: CSS实现子元素div水平垂直居中的... 下一篇:纯CSS让子元素突破父元素的宽度限...

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

发布时间：2022-04-13 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了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实现wifi信号逐渐增强效果实例全部内容，希望文章能够帮你解决css3实现wifi信号逐渐增强效果实例所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：css3 信号

上一篇: CSS实现子元素div水平垂直居中的... 下一篇:纯CSS让子元素突破父元素的宽度限...

猜你在找的CSS相关文章

全站导航更多