Webleb - Snippets de Código - Animação de alternância de triângulo CSS

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

Animação de alternância de triângulo CSS

Recomendado

Um Código de Farah

Um Código de Liamgilles76

jogo de cara ou coroa

HTML

CSS

JS

Recomendado

Um Código de Farah

Um Código de Liamgilles76

jogo de cara ou coroa

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS