होवर स्टेट सिम्फनी

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

23 November 2024

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
  }
  .animation-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50%;
    overflow: hidden;
    background-color: #000;
  }

.box {
    width: 100px;
    height: 100px;
    background-color: #F06292;
    border-radius: 10px;
    position: relative; /* Para posicionar o pseudoelemento */
    margin: 20px;
    animation: hover-glow 0.5s linear infinite;
  }

.box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transform: scale(0.9); /* Redimensiona o pseudoelemento */
  }
  /*  */

@keyframes hover-glow {
    0% { 
      transform: translateY(0); 
      border-radius: 10px; 
    }
    100% { 
      transform: translateY(-10px); 
      border-radius: 0;   
    }
  }  
  
 /* Configurações de hover */ 
  .box:hover {
    background-color: #D81B60; /* Muda a cor no hover */ 
    transform: translateY(-2px); /* Tranform posição*/
    box-shadow: 0 4px 8px rgba(248, 98, 186, 0.8); /* Adiciona sombra */
  }

होवर स्टेट सिम्फनी

अनुशंसित

आइकन होवर प्रभाव

मानचित्र होवर प्रभाव

होवर प्रभाव चिह्न

HTML

CSS

JS

अनुशंसित

आइकन होवर प्रभाव

मानचित्र होवर प्रभाव

होवर प्रभाव चिह्न

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS