Henrique: abril 2023

29/04/2023

COMANDOS ELÉTRICOS - CONTACTOR

Contactor: Um contactor é um dispositivo utilizado para acionar motores elétricos de forma remota e também pode ser utilizado para acionar cargas com valores de correntes nominais maiores, como motores. Ele possui contatos de força que permitem a passagem de correntes maiores e contatos auxiliares que são utilizados em circuitos de comando elétrico. Os contatos auxiliares permitem que seja feito o sinal elétrico para manter o motor funcionando e outras funções. Os contatos principais são os contatos de força e os contatos auxiliares têm uma capacidade máxima de corrente de 10A. A bobina do contador tem terminais que podem estar espalhados no computador e o dispositivo é representado simbolicamente com a bobina e seus terminais, além dos contatos principais e auxiliares. O contador funciona ao aplicarmos uma fase de um lado da bobina e uma outra fase ou neutro do outro lado da bobina, fazendo com que os contatos que são abertos fechem e os que são fechados abram.

Contator

Simulação da Contactora

04/04/2023

Bolas de ping pong em CSS

Saída gerada























<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        background: white;
    }    
    .container{
        width: 200px;
        height: 60px;
        margin: auto;
        margin-top: 40%;
        margin-left: 50%;
        transform: translate(-50%, -50%);
    }
    .ball{
        width: 20px;
        height: 20px;
        position: absolute;
        border-radius: 50%;
        left: 15%;
        animation: ball .5s alternate infinite ease;
    }
    @keyframes ball {
        0%{
            top: 60px;
            height: 5px;
            border-radius: 50px 50px 25px 25px;
            transform: scaleX(1.7);
            background-color: #FF3EA5FF;
        }
        40%{
            height: 20px;
            border-radius: 50%;
            transform: scaleX(1);
            background-color: #EDFF00FF;
        }
        100%{
            top: 0%;
            background-color: #00A4CCFF;
        }
    } 
    .ball:nth-child(2){
        left: 45%;
        animation-delay: .2s;
    }
    .ball:nth-child(3){
        left: auto;
        right: 15%;
        animation-delay: .3s;
    }
    .shadow{
        width: 20px;
        height: 4px;
        border-radius: 50%;
        background-color: #ffffff59;
        position: absolute;
        top: 62px;
        z-index: -1;
        left: 15%;
        filter: blur(1px);
        animation: shadow .5s alternate infinite ease;
    }
    @keyframes shadow {
        0%{
            transform: scaleX(1.5);
            background-color: #ff3ea56b;
        }
        40%{
            transform: scaleX(1);
            opacity: .7;
            background-color: #edff0066;
        }
        100%{
            transform: scaleX(.2);
            opacity: .4;
            background-color: #edff0066;
        }
    }
    .shadow:nth-child(4){
        left: 45%;
        animation-delay: .2s;
    }
    .shadow:nth-child(5){
        left: auto;
        right: 15%;
        animation-delay: .3s;
    }
</style>
<body>
    <div class="container">
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="shadow"></div>
        <div class="shadow"></div>
        <div class="shadow"></div>
    </div>
</body>
</html>

03/04/2023

Box shadow 3D in CSS

Saída gerada



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Rotating</title>
    <meta http-equiv="refresh" content="7">
</head>
<style>
    body{
        font-family: sans-serif;
        background: #d3eaff;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 91vh;
    }
    .container{
        perspective: 3000px; 
    }
    .box{
        display: block;
        width: 250px;
        height: 250px;
        margin: 70px auto;
        transform-style: preserve-3d;
        transition: tarnsform 350ms;
        animation: spin 10s infinite linear;
    }
    @keyframes spin {
        0%{
            transform: rotateY(0deg) translateZ(-120px);
        }
        100%{
            transform: rotateY(360deg) translateZ(-120px);
        }
    }
    .item, .shadow {
        display: block;
        width: 250px;
        height: 250px;
        position: absolute;
    }
    .item{
        display: flex;
        text-align: center;
        justify-content: center;
        font-size: 32px;
        background: radial-gradient(#fff8, #0000);
        border-radius: 1% ;
    }
    .item:nth-child(1){
        transform: rotateY(90deg) translate3d(-125px, 0, 125px);
        background: #ff1800;
    }
    .item:nth-child(2){
        transform: translate3d(0, 0, 250px);
        background: #ffab00;
    }
    .item:nth-child(3){
        transform: rotateY(270deg) translate3d(125px, 0, 125px);
        background: #ff1800;
    }
    .item:nth-child(4){
        transform: rotateY(180deg) translate3d(0, 0, 0);
        background: #00d419;
    }
       
    .shadow{
        background: #999;
        box-shadow: 0 0 20px #0003;
        transform: rotateX(90deg) translate3d(0, 125px, -220px);
        filter: blur(10px);
        animation: none;
    }
    
</style>
<body>
    <div class="container">
        <div class="box">
            <div class="item">01</div>
            <div class="item">02</div>
            <div class="item">03</div>
            <div class="item">04</div>
            <div class="shadow"></div>
        </div>
    </div>
</body>
</html>

Pesquisar neste blog

29/04/2023

COMANDOS ELÉTRICOS - CONTACTOR

04/04/2023

Bolas de ping pong em CSS

03/04/2023

Box shadow 3D in CSS

Total de visualizações de página

Marcadores

Translate