Webleb - Snippet di Codice -

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

6 December 2024

body
{
    margin: 0;
    padding: 0;
    background: #222;
}
.logo
{
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 400px;
    height: 400px;
    background: #dc4c40;
    border-radius: 50%;
    overflow: hidden;
    animation: rot 1s infinite linear;
}
@keyframes rot{
    0%{
        transform: translate(-50%, -50%) rotate(0deg)
    }
    100%{
        transform:translate(-50%, -50%) rotate(360deg)
    }
}
.center
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 150px;
    height: 150px;
    background: #367bf0;
    border-radius: 50%;
    border: 24px solid #fff;
    z-index: 3;
}
.yellow
{
    position: absolute;
    top: 27%;
    left: 61.5%;
    width: 100%;
    height: 100%;
    background: #f7c43a;
    z-index: 2;
    transform: skewX(-30deg);
}
.yellow:before
{
    content: '';
    position: absolute;
    top: 0;
    left: -50px;
    width: 100%;
    height: 50%;
    background: #f7c43a;
    transform: skewX(50deg);
}
.green
{
    position: absolute;
    top: 22%;
    left: -269px;
    width: 100%;
    height: 100%;
    background: #0fa361;
    z-index: 1;
    transform: skewX(32deg);
}
.green:before
{
    content: '';
    position: absolute;
    top: 160px;
    left: 160px;
    width: 100%;
    height: 100%;
    background: #0fa361;
}

Consigliato

Un codice di dynamicarray606

animazione di aerei

Pulsante Home di CodePen

HTML

CSS

JS

Consigliato

Un codice di dynamicarray606

animazione di aerei

Pulsante Home di CodePen

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS