Logo Chrome rotatif

3,810 creativewiz

Ouvrir dans l'éditeur Publiez votre code

Recommandé

17 July 2025

Formulaire d'inscription de connexion rotatif 3D HTML CSS

23 April 2026

Exemple de menu HTML avec logo (français)

5 January 2024

Page de chargement avec cercle 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;
}