Webleb - Snippets de Código -

Abrir no Editor Publique Seu Código

Recomendado

28 November 2024

Controle deslizante horizontal puro com menu deslizante

19 April 2025

<!DOCTYPE html>
<html>
<head>
    <title>Tela de login</title>
    <style>
        canvas {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <canvas id="rainfall"></canvas>

// Set canvas size to match window size
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

// Create an array to store the raindrops
        const raindrops = [];

// Function to create a new raindrop
        function createRaindrop() {
            const x = Math.random() * canvas.width;
            const y = -5;
            const speed = Math.random() * 5 + 2;
            const length = Math.random() * 20 + 10;

raindrops.push({ x, y, speed, length });
        }

// Function to update the raindrops' positions
        function updateRaindrops() {
            for (let i = 0; i < raindrops.length; i++) {
                const raindrop = raindrops[i];

raindrop.y += raindrop.speed;

if (raindrop.y > canvas.height) {
                    raindrops.splice(i, 1);
                    i--;
                }
            }
        }

// Function to draw the raindrops
        function drawRaindrops() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.strokeStyle = 'white';
            ctx.lineWidth = 2;

for (let i = 0; i < raindrops.length; i++) {
                const raindrop = raindrops[i];

ctx.beginPath();
                ctx.moveTo(raindrop.x, raindrop.y);
                ctx.lineTo(raindrop.x, raindrop.y + raindrop.length);
                ctx.stroke();
            }
        }

// Function to animate the raindrops
        function animate() {
            createRaindrop();
            updateRaindrops();
            drawRaindrops();

requestAnimationFrame(animate);
        }

// Start the animation
        animate();
    </script>

</body>
</html>

CSS

@import url(https://fonts.googleapis.com/css?family=Poppins:300);
html {
 height: 100%;
}
body{
 margin:0;
 padding:0;
 font-family: sans-serif;
 background: linear-gradient(#30142b, #2772a1);
}
.login-page {
  width: 400px;
  padding: 8% 0 0;
  margin: auto;
}
.form {
  position: relative;
  z-index: 1;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  padding: 40px;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.5);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0,0,0,.6);
  border-radius: 10px;
}
.form input {
 width: 100%;
 padding: 10px 0;
 font-size: 13px;
 color: #fff;
 margin-bottom: 30px;
 border: none;
 border-bottom: 1px solid #fff;
 outline: none;
 background: transparent;
  
}
h2{
 color:white;
}

.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
  color: #289bb8;
  text-decoration: none;
}
.form .register-form {
  display: none;
}
.btn {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #289bb8;
  font-size: 16px;
  text-decoration: none;
  overflow: hidden;
  transition: .5s;
  margin-top: 15px;
  letter-spacing: 2px
}
.btn:hover {
  background: #289bb8;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #289bb8,
              0 0 25px #289bb8,
              0 0 50px #289bb8,
              0 0 100px #289bb8;
}

.btn span {
  position: absolute;
  display: block;
}

.btn span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #289bb8);
  animation: btn-anim1 1s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}

.btn span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #289bb8);
  animation: btn-anim2 1s linear infinite;
  animation-delay: .25s
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}

.btn span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #289bb8);
  animation: btn-anim3 1s linear infinite;
  animation-delay: .5s
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}

.btn span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #289bb8);
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}

Recomendado

Controle deslizante horizontal puro com menu deslizante

OLÁ, MEU AMIGO

Um código por omer

HTML

CSS

JS

Recomendado

Controle deslizante horizontal puro com menu deslizante

OLÁ, MEU AMIGO

Um código por omer

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS