Página 404

Abrir en el editor Publica tu código

Recomendado

10 February 2025

Botones animados de redes sociales.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <script  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <title>Andev Web</title>
</head>
<body>
  <div class="container col-md-8">
    <div class="row">
      <div class="four0four col-md-4 col-sm-12 offset-md-2"><span class="off">4</span><span class="flicker2">0</span><span class="flicker3">4</span></div>
      <div class="not-found col-lg-2 col-md-12"><span class="flicker4">P</span><span class="off">a</span><span>ge </span><span>not </span><span class="off">f</span><span class="flicker1">o</span><span class="flicker3">u</span><span>n</span><span class="off">d</span></div>
      <div class="fog0"></div>
      <div class="fog1"></div>
      <div class="fog2"></div>
      <div class="fog3"></div>
      <div class="fog4"></div>
      <div class="fog5"></div>
      <div class="fog6"></div>
      <div class="fog7"></div>
      <div class="fog8"></div>
      <div class="fog9"></div>
    </div>
  </div>
</body>
</html>

CSS

@import url("https://fonts.googleapis.com/css?family=Comfortaa:300,400,700");
.not-found, .four0four {
  font-family: "Comfortaa";
}

* {
  box-sizing: border-box;
}

html {
  height: 100vh;
}

body {
  background: #121428;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100vh;
}

.container {
  align-items: center;
  margin: auto;
}

.row {
  margin-top: 30vh;
  height: 200px;
  min-width: 300px;
}

.four0four {
  color: white;
  text-shadow: 0 0 1px rgba(255, 120, 250, 0.2), 0 0 2px rgba(200, 150, 250, 0.9), 0 0 70px #c896fa;
  color: white;
  margin-top: -67px;
  font-size: 15em;
  text-align: right;
  min-width: 450px;
  z-index: 5;
}
.four0four:before {
  content: "404";
  position: absolute;
  color: #ff78fa;
  mix-blend-mode: color-dodge;
  z-index: 1;
}

.not-found {
  color: white;
  text-shadow: 0 0 1px rgba(255, 120, 250, 0.2), 0 0 2px rgba(200, 150, 250, 0.9), 0 0 70px #c896fa;
  line-height: 110%;
  font-size: 3.75em;
}
.not-found:before {
  letter-spacing: 0.25px;
  content: "Page not found";
  position: absolute;
  color: #ff78fa;
  mix-blend-mode: color-dodge;
  z-index: 1;
}

.flicker1 {
  animation: 5s linear 3.25s flickr infinite;
}

.flicker2 {
  animation: 5s linear 1.25s flickr infinite;
}

.flicker3 {
  animation: 5s ease 1s flickr infinite;
}

.flicker4 {
  animation: 5s ease 2s flickr infinite;
}

.off {
  color: rgba(50, 50, 50, 0.25);
  border: none;
  text-shadow: none;
}

@keyframes flickr {
  0% {
    color: rgba(50, 50, 50, 0.25);
    border: none;
    text-shadow: none;
  }
  1% {
    color: white;
    text-shadow: 0 0 1px rgba(255, 120, 250, 0.2), 0 0 2px rgba(200, 150, 250, 0.9), 0 0 70px #c896fa;
  }
  2% {
    color: rgba(50, 50, 50, 0.25);
    border: none;
    text-shadow: none;
  }
  8% {
    color: rgba(50, 50, 50, 0.25);
    border: none;
    text-shadow: none;
  }
  10% {
    color: white;
    text-shadow: 0 0 1px rgba(255, 120, 250, 0.2), 0 0 2px rgba(200, 150, 250, 0.9), 0 0 70px #c896fa;
  }
  11% {
    color: rgba(50, 50, 50, 0.25);
    border: none;
    text-shadow: none;
  }
  12% {
    color: white;
    text-shadow: 0 0 1px rgba(255, 120, 250, 0.2), 0 0 2px rgba(200, 150, 250, 0.9), 0 0 70px #c896fa;
  }
  13% {
    color: rgba(50, 50, 50, 0.25);
    border: none;
    text-shadow: none;
  }
  14% {
    color: white;
    text-shadow: 0 0 1px rgba(255, 120, 250, 0.2), 0 0 2px rgba(200, 150, 250, 0.9), 0 0 70px #c896fa;
  }
  53% {
    color: white;
    text-shadow: 0 0 1px rgba(255, 120, 250, 0.2), 0 0 2px rgba(200, 150, 250, 0.9), 0 0 70px #c896fa;
  }
  54% {
    color: rgba(50, 50, 50, 0.25);
    border: none;
    text-shadow: none;
  }
  58% {
    color: rgba(50, 50, 50, 0.25);
    border: none;
    text-shadow: none;
  }
  59% {
    color: white;
    text-shadow: 0 0 1px rgba(255, 120, 250, 0.2), 0 0 2px rgba(200, 150, 250, 0.9), 0 0 70px #c896fa;
  }
  60% {
    color: rgba(50, 50, 50, 0.25);
    border: none;
    text-shadow: none;
  }
  61% {
    color: white;
    text-shadow: 0 0 1px rgba(255, 120, 250, 0.2), 0 0 2px rgba(200, 150, 250, 0.9), 0 0 70px #c896fa;
  }
  100% {
    color: white;
    text-shadow: 0 0 1px rgba(255, 120, 250, 0.2), 0 0 2px rgba(200, 150, 250, 0.9), 0 0 70px #c896fa;
  }
}
.fog8, .fog7, .fog6, .fog5, .fog4, .fog3, .fog2, .fog1 {
  position: absolute;
  border: none;
  border-radius: 100%;
  z-index: 400;
}

.fog1 {
  width: 100px;
  height: 100px;
  animation: 75s linear float infinite;
  box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.8), 0 0 50px rgba(255, 255, 255, 0.5);
}

.fog2 {
  width: 50px;
  height: 50px;
  box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.8), 0 0 25px rgba(255, 255, 255, 0.5);
  margin-top: -25%;
  animation: 25s linear float2 infinite;
}

.fog3 {
  width: 80px;
  height: 80px;
  box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.8), 0 0 40px rgba(255, 255, 255, 0.5);
  margin-left: 25%;
  animation: 40s ease float2 infinite;
}

.fog4 {
  width: 40px;
  height: 40px;
  margin-left: 60%;
  margin-top: -45%;
  animation: 45s linear float infinite;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.5);
}

.fog5 {
  width: 60px;
  height: 60px;
  margin-left: 50%;
  margin-top: -30%;
  animation: 30s ease float2 infinite;
  box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 0.5);
}

.fog5 {
  width: 125px;
  height: 125px;
  margin-left: 50%;
  margin-top: 30%;
  animation: 70s ease-out float3 infinite;
  box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.8), 0 0 60px rgba(255, 255, 255, 0.5);
}

.fog6 {
  width: 20px;
  height: 20px;
  margin-left: 50%;
  margin-top: -10%;
  animation: 20s linear float infinite;
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.8), 0 0 2px rgba(255, 255, 255, 0.5);
}

.fog7 {
  width: 50px;
  height: 50px;
  margin-left: 0%;
  margin-top: 30%;
  animation: 40s ease-out float3 infinite;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.5);
}

.fog8 {
  width: 80px;
  height: 80px;
  margin-left: 60%;
  margin-top: -20%;
  animation: 40s ease-out float3 infinite;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.5);
}

@keyframes float {
  0% {
    top: 50%;
    left: 10%;
  }
  25% {
    top: 75%;
    left: 25%;
  }
  50% {
    top: 50%;
    left: 35%;
  }
  75% {
    top: 75%;
    left: 25%;
  }
  100% {
    top: 50%;
    left: 10%;
  }
}
@keyframes float2 {
  0% {
    top: 50%;
    left: 10%;
  }
  25% {
    top: 25%;
    left: 15%;
  }
  50% {
    top: 50%;
    left: 45%;
  }
  75% {
    top: 25%;
    left: 15%;
  }
  100% {
    top: 50%;
    left: 10%;
  }
}
@keyframes float3 {
  0% {
    top: 50%;
    left: 25%;
  }
  25% {
    top: 35%;
    left: 0;
  }
  50% {
    top: 10%;
    left: 10%;
  }
  75% {
    top: 35%;
    left: 0%;
  }
  100% {
    top: 50%;
    left: 25%;
  }
}
@media (max-width: 991px) {
  .container {
    margin-top: 30vh;
  }

.four0four {
    text-align: center;
    min-width: 100%;
    padding: 0;
    margin: 0;
    height: 200px;
    font-size: 10em;
  }

.not-found {
    font-size: 1.75em;
    padding: 0;
    margin: 0;
    text-align: center;
  }
}

Página 404

Recomendado

Un código de bachir123

animación de avión

Botones animados de redes sociales.

HTML

CSS

JS

Recomendado

Un código de bachir123

animación de avión

Botones animados de redes sociales.

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS