Bouton et calque animés CSS

917 byby.createsite

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

15 May 2025

Modèle de site Web de commerce électronique HTML CSS

12 September 2025

Curseur d'images HTML CSS JavaScript

31 January 2025

Films de cartes CSS pures 3D

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #18202C;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}
.codigo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #272822;
  color: #F8F8F2;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 18px;
  padding: 20px;
  border-radius: 8px;
  white-space: pre-line;
  text-align: left;
  line-height: 1.6;
  max-height: 50%;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.selector       { color: #F92672; } .property       { color: #66D9EF; } .value-number   { color: #AE81FF; } .value-string   { color: #E6DB74; } .value-color    { color: #A6E22E; } .brace          { color: #F8F8F2; } .comment        { color: #75715E; } .function       { color: #A6E22E; }
.animation-container {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background:transparent;
}

.button {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #8c8c8c; /* Cor de fundo */
  position: relative;
  animation: buttonLoop 1s linear infinite;
}

@keyframes buttonLoop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.layer1 { /*  A primeira camada: um clique e a sombra se movem */
  width: 200px;
  height: 200px;
  background-color: rgba(255,255,255,0.1);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: layerPulse 1s ease-in-out infinite;
}

@keyframes layerPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255,255,255,0.8);
  }
  100% { 
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
  }
}

Recommandé

Modèle de site Web de commerce électronique HTML CSS

Curseur d'images HTML CSS JavaScript

Films de cartes CSS pures 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS