Webleb - HTML UI Elements - galleggiante infinito

HTML

CSS

* {
 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);

}

galleggiante infinito

CodePen Home CSS Galleria a scorrimento infinito

HTML

CSS

JS

CodePen Home CSS Galleria a scorrimento infinito

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS