Logo Chrome rotatif

3,809 creativewiz

Ouvrir dans l'éditeur Publiez votre code

Recommandé

23 April 2026

Exemple de menu HTML avec logo (français)

21 September 2024

Curseur de déplacement rotatif

HTML

CSS

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