तैरता हुआ अनंत

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

11 December 2024

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
body {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 font-family: monospace;
 background-color: black;
 width: 100vw;
 height: 100vh;
}
/*container pintado todo de branco */
.infinito-container {
 width: 200px;
 height: 100px;
 background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 1) 100%);
 border-radius: 50px;
 position: relative;
 overflow: hidden;
 animation: flutuar 3s linear infinite, energy-flow 2s linear infinite;
}
/* animacao ao passar mouse sobre container para girar */
.infinito-container:hover{
 animation:girar 3s linear forwards;
}
/*duas bolas em cada canto do retangulo da cor do body para dar efeito de transparencia e o que sobrar do container vira a borda */
.bola-transparente1, .bola-transparente2 {
 width: 80px;
 height: 80px;
 background-color: black;
 border-radius: 50%;
 position: absolute;
 top: 10px;
}

.bola-transparente1 {
 left: 10px;
}
.bola-transparente2 {
 right: 10px;
}
/*retangulo da cor do body no centro para cortar metade das bolas */
.retangulo-centro{
 position:absolute;
 left:calc(50% - 40px);
 width: 80px;
 height: 200px;
 background: rgb(0, 0, 0);
}
/*retangulo interno 1 */
.retangulo1{
 z-index:3;
 position:absolute;
 left:calc(50%);
 top:-25%;
 width: 10px;
 height: 140px;
 transform: rotate(42.5deg);
 background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 1) 100%);
 animation: energy-flow 2s linear infinite;
}
/* retangulo interno 2 */
.retangulo2{
 z-index:3;
 position:absolute;
 left:calc(50%);
 top:-25%;
 width: 10px;
 height: 160px;
 transform: rotate(-42.5deg);
 background: rgb(255, 255, 255);
 background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 1) 100%);
 animation: energy-flow 2s linear infinite;
}
/*animacao leve para flutuar */
@keyframes flutuar{
 0%,100%{transform:translateY(-15px)}
 50%{transform:translateY(15px)}

}
/*animacao girar */
@keyframes girar{
 0%{transform:rotateX(0deg)}
 100%{transform:rotateX(180deg)}
}
/* animacao para fluir energia com background personalizado para  beleza */
@keyframes energy-flow {
 0% { background-position: 0 0; }
 100% { background-position: 0 200px; }
}
/* 4 bolas em cada canto para dar uma 'suavidade' entre metade dos circulos e o retangulo */
.bola1{
 z-index:10;
 background:rgb(0, 0, 0);
 width:20px;
 height:10px;
 border-radius:50%;
 position:absolute;
 left:28%;
 top:-5%;
 transform:rotate(15deg);

}
.bola2{
 z-index:10;
 background:rgb(0, 0, 0);
 width:20px;
 height:10px;
 border-radius:50%;
 position:absolute;
 left:62%;
 top:-5%;
 transform:rotate(-15deg);

}
.bola3{
 z-index:10;
 background:rgb(0, 0, 0);
 width:20px;
 height:10px;
 border-radius:50%;
 position:absolute;
 left:28%;
 top:95%;
 transform:rotate(-15deg);

}
.bola4{
 z-index:10;
 background:rgb(0, 0, 0);
 width:20px;
 height:10px;
 border-radius:50%;
 position:absolute;
 left:62%;
 top:95%;
 transform:rotate(15deg);

}

तैरता हुआ अनंत

अनुशंसित

चमकता हुआ लोडर

चमकता हुआ पाठ

सीएसएस केवल अनंत मार्की

HTML

CSS

JS

अनुशंसित

चमकता हुआ लोडर

चमकता हुआ पाठ

सीएसएस केवल अनंत मार्की

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS