Henrique

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>

31/03/2023

CSS Loading effect

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-color: white;
    }
    .loader-box{
        position: absolute;
        top: calc(50% - 25px);
        left: calc(50% - 25px);
    }
    .loader-box, .loader-box::before, .loader-box::before{
        position: absolute;
        border: 3px solid transparent;
        border-top: 3px solid red;
        border-radius: 50%;
        animation: rotate linear infinite;
        content: '';
    }
    .loader-box{
        height: 100px;
        width: 100px;
        animation-duration: 1.05s;
    }
    .loader-box::before{
        height: 75px;
        width: 75px;
        top: 10px;
        left: 10px;
        animation-duration: 10s;
    }
    .loader-box:after{
        height: 50px;
        width: 50px;
        top: 22px;
        animation-duration: 4s;
    }
    @keyframes rotate {
        from{
            transform: translateZ(360deg);
        }
        to{
            transform: rotateZ(360deg);
        }
    }
</style>
<body>
    <div class="loader-box"></div>
</body>
</html>

30/03/2023

Texto Glowing em CCS

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">
    <meta http-equiv="refresh" content="5">
    <title>Text Animation</title>
</head>
<style>
    body{
        background-color: black;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: sans-serif;
        font-size: 4rem;
        height: 100vh;
    }
    .container > span{
        text-transform: uppercase;
        animation: glow 2.5s ease-in-out infinite;
    }
    @keyframes glow {
        0%, 100%{
            color: white;
            text-shadow: 0 0 50px #FC00FF, 0 0 50px
            #FC00FF, 0 0 100px #FC00FF;
        }
        10%, 90%{
            color: #24e013;
            text-shadow: none;
        }
    }
    .container > span:nth-child(2){
        animation-delay: 0.25s;
    }
    .container > span:nth-child(3){
        animation-delay: 0.5s;
    }
    .container > span:nth-child(4){
        animation-delay: 0.75s;
    }
    .container > span:nth-child(5){
        animation-delay: 1s;
    }
    .container > span:nth-child(6){
        animation-delay: 1.25s
    }
    .container > span:nth-child(7){
        animation-delay: 1.5s;
    }
    .container > span:nth-child(8){
        animation-delay: 1.75s;
    }
    
</style>
<body>
    <div class="container">
        <span>C</span>
        <span>R</span>
        <span>E</span>
        <span>A</span>
        <span>T</span>
        <span>I</span>
        <span>V</span>
        <span>E</span>
    </div>
</body>
</html>

29/03/2023

Rings animation 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>Rings Animation</title>
</head>
<style>
    body{
        margin: 200px;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: 100vh;
        background: radial-gradient(#78d5ff, #0081e8);
    }
    .loader{
        position: relative;
        width: 180px;
        height: 180px;
        display: flex;
        justify-content: center;
        align-items: center;
        transform-style: preserve-3d;
        transform: perspective(500px) rotateX(45deg);
    }
    .loader span{
        position: absolute;
        display: block;
        border: 15px solid #fff;
        box-sizing: border-box;
        border-radius: 50%;
        box-shadow: 0 10px 0 #e0e0e0, inset 0 10px 0 #e0e0e0;
        animation: animate 4.5s ease-in-out infinite;
    }
    .loader span:nth-child(1){
        animation-delay: 0s;
    }
    .loader span:nth-child(2){
        animation-delay: -1.5s;
    }
    .loader span:nth-child(3){
        animation-delay: -3.0s;
    }
    @keyframes animate {
        0%{
            transform: translateZ(-100px);
            width: 100%;
            height: 100%;
        }
        25%{
            transform: translateZ(100px);
            width: 100%;
            height: 100%;
        }
        50%{
            transform: translateZ(100px);
            width: 35%;
            height: 35%;
        }
        75%{
            transform: translateZ(-100px);
            width: 35%;
            height: 35%;
        }
        100%{
            transform: translateZ(100px);
            width: 100%;
            height: 100%;
        }
    }
</style>
<body>
    <div class="loader">
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>
</html>

28/03/2023

Bottom Animation 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">
    <meta http-equiv="refresh" content="7">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Poppins", sans-serif;
    }
    body{
        display: flex;
        flex-direction: column;
        gap: 20px;
        min-height: 100vh;
        justify-content: center;
        align-items: center;
        background: #000;
    }
    a{
        position: relative;
        width: 160px;
        height: 50px;
        line-height: 48px;
        background: #000;
        text-transform: uppercase;
        font-size: 25px;
        text-align: center;
        letter-spacing: 0.1em;
        text-decoration: none;
        transition: 0.5s;

        /*-webkit-box-reflect: below 1px linear-gradient(transparent, #0004);*/
    }
    a span{
        position: absolute;
        display: block;
        top: 1px;
        left: 1px;
        right: 1px;
        bottom: 1px;
        text-align: center;
        background: #0c0c0c;
        color: rgba(255, 255, 255, 5);
        transition: 0.5s;
    }
    a:hover span{
        color: rgba(255, 255, 255, 1);
    }
    a span::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50%;
        background: rgba(255, 255, 255, 0.1);
        z-index: 10;
    }
    a::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg, 
        #c0392b,
        #f39c12,
        #f1c40f, 
        #2ecc71, 
        #3498db,
        #2980b9, 
        #9b59b6,
        #8e44ad, 
        #c0392b,
        #f39c12,
        #f1c40f,
        #2ecc71,
        #3498db,
        #2980b9, 
        #9b59b6, 
        #8e44ad);
        background-size: 400%;
        opacity: 0;
        transition: 2.5s;
        animation: eff 20s linear infinite;
    }
    a:hover::before,
    a:hover::after{
        opacity: 1;
    }
    a::after{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg,
        #c0392b,
        #f39c12,
        #07df12, 
        #05f8ec,
        #f8fc03,
        #2ecc71,
        #130ff1,
        #9b59b6,
        #f39c12,
        #0c0c0c,
        #e605c8, 
        #f50808,
        #f03ae7,
        #2ec236);
        background-size: 400%;
        opacity: 0;
        filter: blur(20px);
        transition: 0.5s;
        animation: eff 50s ease infinite;
    }
    @keyframes eff {
        0%{
            background-position: 0 0 ;
        }
        50%{
            background-position: 400% 0;
        }
        100%{
            background-position: 0 0;
        }
    }
</style>
<body>
    <a href="#"><span>Buttom</span></a>
    <a href="#"><span>Buttom</span></a>
</body>
</html>

Pesquisar neste blog