ホームページ > 記事 > ウェブフロントエンド > css3はWiFi信号を徐々に強化する効果を実現します
この記事では主に、css3 によって達成される Wi-Fi 信号の段階的な強化効果の例を紹介します。内容は非常に優れているので、参考として共有します。
ドキュメントを整理し、Wi-Fi 信号を徐々に増加させる効果を実装する CSS3 コードを見つけて、共有するために簡単に整理して整理します。
レンダリング
以下は実装コードです:
<!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 中国語に注目してください。 Webサイト!
関連する推奨事項:
CSS3 でのトランジション アニメーション属性の使用法についての紹介
3 次元ブロックを実現するための CSS3 の 3 次元変形
以上がcss3はWiFi信号を徐々に強化する効果を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。