Scribd
Upload
13 views2 pages

Icon HTML

Uploaded by

revihi8307
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
13 views2 pages

Icon HTML

Uploaded by

revihi8307
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html>
<head>
<style>
body {
background: #fff;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}

.no-snoring {
position: relative;
width: 100px;
height: 100px;
background: #fff;
}

.zzz-circle {
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
background: #fff;
border: 2px solid #000;
display: flex;
justify-content: center;
align-items: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden; /* Pour s'assurer que rien ne dépasse */
}

.zzz {
color: #000;
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 20px;
transform: rotate(-15deg);
}

.z {
opacity: 0;
display: inline-block;
animation: popZ 2s infinite;
margin: -1px;
}

.z:nth-child(2) {
animation-delay: 0.2s;
}

.z:nth-child(3) {
animation-delay: 0.4s;
}
.no-line {
position: absolute;
width: 80px; /* Réduit à la largeur du cercle */
height: 3px;
background: #ff0000;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}

@keyframes popZ {
0%, 100% { opacity: 0; transform: scale(0.5); }
20%, 80% { opacity: 1; transform: scale(1); }
}
</style>
</head>
<body>
<div class="no-snoring">
<div class="zzz-circle">
<div class="zzz">
<span class="z">Z</span>
<span class="z">Z</span>
<span class="z">Z</span>
</div>
<div class="no-line"></div>
</div>
</div>
</body>
</html>

You might also like