Animation de basculement de triangle CSS

392 ByBy.inc

Ouvrir dans l'éditeur Publiez votre code

Animation de basculement de triangle CSS

Recommandé

29 July 2025

Faites défiler pour exister

23 October 2024

Police de caractères animée VFS Digital Design

4 July 2025

Clone Spotify – Lecteur de musique Web

HTML

CSS

*{
    margin: 0;
    padding: 0;
    }
  
    .triangle-container{
    background: linear-gradient(45deg,rgba(139,69,19,0.1) 2%, transparent 3%, transparent 7%,rgba(139,69,19,0.1) 8%),radial-gradient(ellipse at center, rgba(255,255,255,0.2) 0%, transparent 70%),linear-gradient(90deg, #8B4513 0%, #A0522D 50%, #CD853F 100%);
    background-blend-mode: overlay;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    font-family: monospace;
    overflow: hidden;
    }
   
    .ellipse2{
    position: absolute;
    left: 5px;
    width: 20px;
    height: 100px;
    background: linear-gradient(to right, #808080, #A9A9A9, #808080);    
    border-radius: 50%;
    transform: rotate(15deg);

}

.mid{
    position: absolute;
    align-self: center;
    top: 43%;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 90px solid gray;}

.ellipse3{

position: absolute; right: 5px;
    width: 20px;
    height: 100px;
    background: linear-gradient(to left, #808080, #A9A9A9, #808080);
    border-radius: 50%;
    transform: rotate(-15deg);}
    
    .cabe{

width: 2px;
    height: 500px;
    position: absolute;
    align-self: center;
    top: -50px;
    background-color: rgb(0, 0, 0);}

.hole{

align-self: center;
    background: black;
    width: 65px;
    height: 34px;
    border-radius: 50%;
    position: absolute;
    top: 54%;}
  
    .transform-element{
    position: absolute;
    background-color: transparent;
    height: 96vh;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: top;
    animation: animarLampada 5s linear infinite;
    }

.toggle{
    position: absolute; top: 66%;
    left: 56%;
    background: white;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: black;
    display: flex;
    flex-direction: column;
    justify-content: center; align-items: center; font-family: monospace; cursor: default;
    user-select: none;
    }
    /* usando o active para evitar o js */
    .toggle:active{
    background:
    rgb(232, 232, 232);

box-shadow: inset 1px 2px black;
    }
    /*acender a luz usando o interruptor sem javascript */
    .toggle:active ~ .transform-element .hole{
    background: goldenrod;
    box-shadow: 0 20px 40px 4px goldenrod;
    }
    /*animação simples */
    @keyframes animarLampada{

0%, 100%{transform:rotate(-2deg);
    }
    50%{transform:rotate(2deg);}}

Recommandé

Faites défiler pour exister

Police de caractères animée VFS Digital Design

Clone Spotify – Lecteur de musique Web

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS