css3實現wifi訊號形狀

最後更新：2018-03-21 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

這次給大家帶來css3實現wifi訊號形狀，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>    <p class="box">        <p class="wifi-symbol">          <p class="wifi-circle first"></p>          <p class="wifi-circle second"></p>          <p class="wifi-circle third"></p>          <p class="wifi-circle fourth">        </p>    </p></body></html>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More