Maison > Article > interface Web > css3 implémente la forme du signal wifi
css3 implémente la forme du signal wifi
- php中世界最好的语言original
- 2018-03-21 16:13:003980parcourir
Cette fois, je vais vous présenter CSS3 pour implémenter la forme du signal wifi. Quelles sont les précautions pour implémenter CSS3 pour implémenter la forme du signal wifi. Ce qui suit est un cas pratique, jetons un coup d'œil.
Organisez les documents, recherchez un code CSS3 qui implémente l'effet d'augmenter progressivement le signal wifi, puis organisez-le et rationalisez-le brièvement pour le partage.
Rendu
Ce qui suit est le code d'implémentation :
<!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>Je te crois J'ai lu cet article Vous maîtrisez la méthode des cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Utiliser CSS3 pour obtenir des effets de barrage
Propriétés CSS impopulaires que vous ne connaissez pas
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!