लोडिंग आइकन 4

91 ByBy.inc

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

18 March 2025

anhtuanle2004thl द्वारा एक कोड

27 May 2025

Mironovbogdan341 द्वारा एक कोड

14 June 2024

होवर के साथ सोशल मीडिया आइकन

HTML

CSS

* {
 margin: 0;
 padding: 0;
}
body {
 background: white;
 width: 100vw;
 height: 100vh;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}
/*container */
.container {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
}
/*circulo da cor do body no meio com z-index(profundidade) na frente */
.circulo {
 width: 25px;
 height: 25px;
 border-radius: 50%;
 background: white;
 position: absolute;
 z-index:2;
}
/*irmaos do circulo */
.filhos {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
}
/* palitos com transform orign center e atras do circulo branco */
.filhos div {
 position: absolute;
 width: 20px;
 height: 3px;
 background: black;
 transform-origin: left center;
 left: 50%;
}
/*rotate especifico para cada palito baseado na divisao 360/8 */
.filhos div:nth-child(1) {
 transform: rotate(45deg);
}
.filhos div:nth-child(2) {
 transform: rotate(90deg);
}
.filhos div:nth-child(3) {
 transform: rotate(135deg);
}
.filhos div:nth-child(4) {
 transform: rotate(180deg);
}
.filhos div:nth-child(5) {
 transform: rotate(225deg);
}
.filhos div:nth-child(6) {
 transform: rotate(270deg);
}
.filhos div:nth-child(7) {
 transform: rotate(315deg);
}
.filhos div:nth-child(8) {
 transform: rotate(360deg);
}
/*animacao */
@keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}
.filhos {
 animation: spin 2s linear infinite;
}

अनुशंसित

anhtuanle2004thl द्वारा एक कोड

Mironovbogdan341 द्वारा एक कोड

होवर के साथ सोशल मीडिया आइकन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS