लोडिंग आइकन 4

1109 byby.createsite

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

अनुशंसित

26 December 2024

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

25 August 2025

हृदय और कणों के साथ एनिमेटेड 404 त्रुटि पृष्ठ

18 March 2025

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

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;
}

अनुशंसित

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

हृदय और कणों के साथ एनिमेटेड 404 त्रुटि पृष्ठ

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

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS