Botón con efecto de desplazamiento de Drácula animado

Abrir en el editor Publica tu código

Recomendado

3 March 2025

Burbuja de mensaje HTML con diseño SVG

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap" rel="stylesheet" /><link rel="stylesheet" href="./style.css">

</head>
<body>
  <div class="container">
  <div class="mainBox">
    <a class="button" href="#">
      <span class="text">Trick or Treat</span>
      <div class="button__material_A material--1"></div>
      <div class="button__material_A material--2"></div>
      <div class="button__material_B material--3"></div>
      <div class="button__material_B material--4"></div>
    </a>
    <div class="controlPanel__panel panel--1"></div>
    <div class="controlPanel__panel panel--2"></div>
    <div class="controlPanel__panel panel--3"></div>
    <div class="controlPanel__panel panel--4"></div>
    <div class="controlPanel__panel panel--5"></div>
    <div class="controlPanel__panel panel--6"></div>
    <div class="controlPanel__panel panel--7"></div>
    <div class="controlPanel__panel panel--8"></div>
    <div class="controlPanel__panel panel--9"></div>
    <div class="frame">
      <div class="frame__inner">
        <div class="bat">
          <div class="bat__body">
            <div class="bat__wing wing--L"></div>
            <div class="bat__wing wing--R"></div>
          </div>
        </div>
      </div>
      <div class="frame__material frame__material_1"></div>
      <div class="frame__material frame__material_2"></div>
      <div class="frame__material frame__material_3"></div>
      <div class="frame__material frame__material_4"></div>
      <div class="frame__material frame__material_5"></div>
    </div>
    <div class="dracula">
      <div class="dracula__head">
        <div class="dracula__head__wrapper">
          <div class="dracula__hair">
            <div class="dracula__hair__left"></div>
            <div class="dracula__hair__right"></div>
            <div class="dracula__hair__center"></div>
          </div>
          <div class="dracula__face">
            <div class="dracula__face__top">
              <div class="dracula__face__eye dracula__eye--L">
                <div class="dracula__face__eye__inner"></div>
              </div>
              <div class="dracula__face__eye dracula__eye--R">
                <div class="dracula__face__eye__inner"></div>
              </div>
            </div>
            <div class="dracula__face__bottom"></div>
            <div class="dracula__face__fang fang--T"></div>
            <div class="dracula__face__fang fang--B"></div>
          </div>
        </div>
      </div>
      <div class="dracula__body">
        <div class="dracula__body__collar"></div>
        <div class="dracula__body__wrapper">
          <div class="dracula__body__inner">
            <div class="dracula__body__best"></div>
            <div class="dracula__body__tie"></div>
          </div>
        </div>
        <div class="dracula__body__box">
          <div class="dracula__body__arm arm--L"></div>
          <div class="dracula__body__arm arm--R"></div>
          <div class="wineGrass">
            <div class="wineGrass__cup">
              <div class="wineGrass__wine"></div>
            </div>
            <div class="wineGrass__parts"></div>
          </div>
          <div class="dracula__body__hand hand--R"></div>
        </div>
      </div>
    </div>
    <div class="reflection"></div>
  </div>
</div>  
</body>
</html>

CSS

body {
    margin: 0;
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background: #233952;
}
:root {
    --skin_A: #fff6e0;
    --skin_B: #bde3ff;
    --body: #001b30;
    --button: #907400;
    --material: #693a0c;
}
/* ----------------
    mainBox
------------------*/
.mainBox {
    position: relative;
    width: 240px;
    height: 420px;
}
/* ----------------
    frame
------------------*/
.frame {
    position: absolute;
    z-index: 1;
    width: 240px;
    height: 300px;
    background: #42221b;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}
.frame__inner {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: calc(100% - 32px);
    height: calc(100% - 32px);
    background: #3b7a99;
    transition: all ease 0.8s;
    overflow: hidden;
}
.frame__inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0) inset;
    transition: all ease 0.4s;
}
.frame__material {
    position: absolute;
    z-index: 1;
    width: 0;
    height: 0;
}
.frame__material::before,
.frame__material::after {
    content: "";
    position: absolute;
}
.frame__material_1 {
    top: -16px;
    left: 40px;
    border-top: solid 80px var(--material);
    border-left: solid 30px transparent;
    border-right: solid 20px transparent;
    border-bottom: solid 0 transparent;
}
.frame__material_1::before {
    top: -120px;
    left: 60px;
    border-top: solid 0 transparent;
    border-left: solid 40px transparent;
    border-right: solid 20px transparent;
    border-bottom: solid 80px var(--material);
}
.frame__material_1::after {
    top: -20px;
    left: 100px;
    border-top: solid 20px transparent;
    border-left: solid 0 transparent;
    border-right: solid 90px var(--material);
    border-bottom: solid 50px transparent;
}
.frame__material_2 {
    top: 140px;
    right: -30px;
    border-top: solid 40px transparent;
    border-left: solid 0 transparent;
    border-right: solid 100px var(--material);
    border-bottom: solid 60px transparent;
}
.frame__material_2::before {
    top: 70px;
    left: -10px;
    border-top: solid 20px transparent;
    border-left: solid 0 transparent;
    border-right: solid 90px var(--material);
    border-bottom: solid 50px transparent;
    transform: rotate(45deg);
}
.frame__material_2::after {
    top: 50px;
    left: -100px;
    border-top: solid 0 transparent;
    border-left: solid 40px transparent;
    border-right: solid 60px transparent;
    border-bottom: solid 120px var(--material);
}
.frame__material_3 {
    top: 254px;
    right: 208px;
    border-top: solid 40px transparent;
    border-left: solid 0 transparent;
    border-right: solid 100px var(--material);
    border-bottom: solid 60px transparent;
}
.frame__material_3::before {
    top: -140px;
    left: 15px;
    border-top: solid 20px transparent;
    border-left: solid 0 transparent;
    border-right: solid 90px var(--material);
    border-bottom: solid 50px transparent;
    transform: rotate(346deg);
}
.frame__material_3::after {
    top: -285px;
    left: 20px;
    border-top: solid 0 transparent;
    border-left: solid 40px transparent;
    border-right: solid 60px transparent;
    border-bottom: solid 120px var(--material);
    transform: rotate(120deg);
}
/* ----------------
    button
------------------*/
.button {
    position: absolute;
    z-index: 60;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    font-weight: bold;
    font-family: "MedievalSharp", cursive;
    width: 100%;
    height: 64px;
    text-decoration: none;
    color: #fff;
    background: var(--button);
}
.text {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    display: flex;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    background: #7d6500;
    transition: all ease 0.4s;
}
.button__material_A {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-left: solid 48px transparent;
    border-right: solid 48px transparent;
}
.material--1 {
    top: -10px;
    border-top: solid 0 transparent;
    border-bottom: solid 12px var(--button);
}
.material--2 {
    bottom: -10px;
    border-top: solid 12px var(--button);
    border-bottom: solid 0 transparent;
}
.button__material_A::before,
.button__material_A::after {
    content: "";
    position: absolute;
    border-left: solid 24px transparent;
    border-right: solid 24px transparent;
}
.button__material_A::before {
    left: -96px;
}
.button__material_A::after {
    right: -96px;
}
.material--1::after,
.material--1::before {
    top: 4px;
    border-top: solid 0 transparent;
    border-bottom: solid 8px var(--button);
}
.material--2::after,
.material--2::before {
    bottom: 4px;
    border-top: solid 8px var(--button);
    border-bottom: solid 0 transparent;
}
.button__material_B {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 0;
    height: 0;
    border-top: solid 24px transparent;
    border-bottom: solid 24px transparent;
}
.material--3 {
    left: -10px;
    border-left: solid 0 transparent;
    border-right: solid 12px var(--button);
}
.material--4 {
    right: -10px;
    border-right: solid 0 transparent;
    border-left: solid 12px var(--button);
}
.button__material_B::before,
.button__material_B::after {
    content: "";
    position: absolute;
    border-left: solid 12px transparent;
    border-right: solid 12px transparent;
}
.material--3::before,
.material--3::after {
    left: 4px;
}
.material--4::before,
.material--4::after {
    right: 4px;
}
.material--3::before {
    top: -36px;
    border-top: solid 24px var(--button);
    border-bottom: solid 0 transparent;
    transform: rotate(-45deg);
}
.material--3::after {
    bottom: -36px;
    border-bottom: solid 24px var(--button);
    border-top: solid 0 transparent;
    transform: rotate(45deg);
}
.material--4::before {
    top: -36px;
    border-top: solid 24px var(--button);
    border-bottom: solid 0 transparent;
    transform: rotate(45deg);
}
.material--4::after {
    bottom: -36px;
    border-bottom: solid 24px var(--button);
    border-top: solid 0 transparent;
    transform: rotate(-45deg);
}
/* ----------------
    bat
------------------*/
.bat {
    position: absolute;
    top: 42px;
    right: -80px;
    width: 24px;
    height: 24px;
    perspective: 400px;
    transition: all ease 0.8s;
    animation: bat_move_1 5s ease infinite;
}
.bat__body {
    position: absolute;
    top: 0;
    left: -16px;
    width: 24px;
    height: 32px;
    border-radius: 2px 2px 8px 8px;
    transform: rotateX(30deg);
    transform-origin: center bottom;
    background: #000;
    animation: bat_move_2 3s ease infinite;
}
.bat__body::before,
.bat__body::after {
    content: "";
    position: absolute;
    top: -8px;
    width: 0;
    height: 0;
    border-top: solid 12px transparent;
    border-bottom: solid 8px transparent;
}
.bat__body::before {
    left: 0;
    border-left: solid 12px #000;
    border-right: solid 0 transparent;
}
.bat__body::after {
    right: 0;
    border-left: solid 0 transparent;
    border-right: solid 12px #000;
}
.bat__wing {
    position: absolute;
    top: 8px;
    width: 0;
    height: 0;
    border-top: solid 16px #000;
    border-left: solid 8px transparent;
    border-right: solid 12px transparent;
    border-bottom: solid 0 transparent;
}
.wing--L {
    right: -12px;
    animation: wing_L linear 0.13s infinite alternate;
    transform-origin: top left;
}
.wing--R {
    left: -12px;
    animation: wing_R linear 0.13s infinite alternate;
    transform-origin: top right;
}
.bat__wing::before,
.bat__wing::after {
    content: "";
    position: absolute;
}
.bat__wing::before {
    top: -16px;
    border-top: solid 16px #000;
    border-left: solid 8px transparent;
    border-right: solid 8px transparent;
    border-bottom: solid 0 transparent;
}
.wing--L::before {
    right: -18px;
    transform: rotate(-12deg);
}
.wing--R::before {
    left: -18px;
    transform: rotate(12deg);
}

.bat__wing::after {
    top: -18px;
    border-top: solid 22px #000;
    border-bottom: solid 0 transparent;
}
.wing--L::after {
    right: -28px;
    border-left: solid 16px transparent;
    border-right: solid 4px transparent;
    transform: rotate(-24deg);
}
.wing--R::after {
    left: -28px;
    border-right: solid 16px transparent;
    border-left: solid 4px transparent;
    transform: rotate(24deg);
}
/* ----------------
    controlPanel__panel
------------------*/
.controlPanel__panel {
    position: absolute;
    z-index: 50;
    width: 130px;
    height: 170px;
}
.panel--1 {
    top: -50px;
    left: -75px;
}
.panel--2 {
    top: -50px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.panel--3 {
    top: -50px;
    right: -75px;
}
.panel--4 {
    top: 120px;
    left: -75px;
}
.panel--5 {
    top: 120px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.panel--6 {
    top: 120px;
    right: -75px;
}
.panel--7 {
    top: 290px;
    left: -75px;
}
.panel--8 {
    top: 290px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.panel--9 {
    top: 290px;
    right: -75px;
}
/* ----------------
    dracula main
------------------*/
.dracula {
    position: absolute;
    z-index: 10;
    width: 100%;
}
/* ----------------
    head
------------------*/
.dracula__head {
    position: absolute;
    z-index: 10;
    top: 90px;
    left: 60px;
    width: 120px;
    height: 112px;
    transition: all ease 0.8s;
}
.dracula__head__wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
}
/* ----------------
    face
------------------*/
.dracula__face {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    perspective: 400px;
    width: 100%;
    height: 100%;
}
.dracula__face::before {
    content: "";
    position: absolute;
    z-index: 12;
    bottom: 14px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 32px;
    height: 3px;
    border-radius: 2px;
    background: #000;
    transition: all ease 0.2s;
}
.dracula__face::after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 4px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 60px;
    height: 88px;
    transform-origin: bottom center;
    transform: rotateX(-40deg);
    background: #710032;
    transition: all ease 0.8s;
}
.dracula__face__top {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 80px;
    height: 100px;
    border-radius: 0 0 8px 8px;
    transform-origin: top center;
    transform: rotateX(20deg);
    background: var(--skin_A);
    transition: all ease 0.6s;
}
.dracula__face__top::before {
    content: "";
    position: absolute;
    top: 48px;
    left: -28px;
    width: 0;
    height: 0;
    border-top: solid 0 transparent;
    border-left: solid 22px transparent;
    border-right: solid 22px transparent;
    border-bottom: solid 18px var(--skin_A);
    transform: rotate(45deg);
    transition: inherit;
}
.dracula__face__top::after {
    content: "";
    position: absolute;
    top: 48px;
    right: -28px;
    width: 0;
    height: 0;
    border-top: solid 0 transparent;
    border-left: solid 22px transparent;
    border-right: solid 22px transparent;
    border-bottom: solid 18px var(--skin_A);
    transform: rotate(-45deg);
    transition: inherit;
}
.dracula__face__bottom {
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 68px;
    height: 40px;
    border-radius: 0 0 12px 12px;
    transform-origin: bottom center;
    transform: rotateX(-60deg);
    background: var(--skin_A);
    transition: all ease 0.6s;
}
.dracula__face__eye {
    position: absolute;
    top: 52px;
    width: 28px;
    height: 28px;
    background: #e0d8c5;
    border-radius: 50%;
    transition: all ease 0.6s;
}
.dracula__eye--L {
    left: 7px;
}
.dracula__eye--R {
    right: 7px;
}
.dracula__face__eye::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: -10px;
    width: 24px;
    height: 6px;
    background: #000;
}
.dracula__eye--L::before {
    right: 4px;
    transform: skew(30deg) rotate(7deg);
    transition: inherit;
}
.dracula__eye--R::before {
    left: 4px;
    transform: skew(-30deg) rotate(-7deg);
    transition: inherit;
}
.dracula__face__eye::after {
    content: "";
    position: absolute;
    z-index: 2;
    bottom: -4px;
    width: 28px;
    height: 0;
    border-radius: 50%;
    background: var(--skin_A);
    transition: inherit;
}
.dracula__eye--L::after {
    right: 0;
}
.dracula__eye--R::after {
    left: 0;
}
.dracula__face__eye__inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 26px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    overflow: hidden;
    transition: all ease 0.6s;
}
.dracula__face__eye__inner::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #000;
    transition: inherit;
    transition: all ease 0.3s;
}

/* ----------------
    fang
------------------*/
.dracula__face__fang {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 60px;
    height: 16px;
    transition: all ease 0.8s;
    overflow: hidden;
}
.fang--T {
    top: 94px;
    transform-origin: center top;
}
.fang--B {
    bottom: 14px;
    transform-origin: center bottom;
}
.dracula__face__fang::before,
.dracula__face__fang::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: solid 6px transparent;
    border-right: solid 6px transparent;
    transition: all ease 0.6s;
}
.fang--T::before,
.fang--T::after {
    top: -16px;
    border-top: solid 14px #fff;
    border-bottom: solid 0 transparent;
}
.fang--T::before {
    left: 0;
}
.fang--T::after {
    right: 0;
}
.fang--B::before,
.fang--B::after {
    bottom: -14px;
    border-top: solid 0 transparent;
    border-bottom: solid 12px #fff;
}
.fang--B::before {
    left: 4px;
}
.fang--B::after {
    right: 4px;
}
/* ----------------
    hair
------------------*/
.dracula__hair__left {
    position: absolute;
    z-index: 22;
    top: 16px;
    left: -26px;
    width: 0;
    height: 0;
    border-top: solid 0 transparent;
    border-left: solid 22px transparent;
    border-right: solid 64px transparent;
    border-bottom: solid 24px #000;
    transform: rotate(72deg);
}
.dracula__hair__left::before {
    content: "";
    position: absolute;
    top: -15px;
    left: -30px;
    width: 0;
    height: 0;
    border-top: solid 24px #000;
    border-left: solid 22px transparent;
    border-right: solid 44px transparent;
    border-bottom: solid 0 transparent;
    transform: rotate(-32deg);
}
.dracula__hair__right {
    position: absolute;
    z-index: 22;
    top: 16px;
    right: -26px;
    width: 0;
    height: 0;
    border-top: solid 0 transparent;
    border-left: solid 64px transparent;
    border-right: solid 22px transparent;
    border-bottom: solid 24px #000;
    transform: rotate(-72deg);
}
.dracula__hair__right::before {
    content: "";
    position: absolute;
    top: -15px;
    right: -30px;
    width: 0;
    height: 0;
    border-top: solid 24px #000;
    border-left: solid 44px transparent;
    border-right: solid 22px transparent;
    border-bottom: solid 0 transparent;
    transform: rotate(32deg);
}
.dracula__hair__center {
    position: absolute;
    z-index: 20;
    top: -36px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 80px;
    height: 60px;
}
.dracula__hair__center::before,
.dracula__hair__center::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 0;
    height: 0;
    border-top: solid 30px transparent;
    border-bottom: solid 30px transparent;
}
.dracula__hair__center::before {
    left: 0;
    border-right: solid 40px #000;
    border-left: solid 0 transparent;
}
.dracula__hair__center::after {
    right: 0;
    border-left: solid 40px #000;
    border-right: solid 0 transparent;
}
/* ----------------
    body
------------------*/
.dracula__body {
    position: absolute;
    z-index: 2;
    top: 140px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 200px;
    height: 154px;
}
.dracula__body__wrapper {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    height: 100px;
    overflow: hidden;
}
.dracula__body__inner {
    position: absolute;
    bottom: 0;
    left: 40px;
    width: 120px;
    height: 100px;
    overflow: hidden;
    transform-origin: 50px 50px;
    transition: all ease 0.8s;
}
.dracula__body__inner::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: solid 0 transparent;
    border-right: solid 60px transparent;
    border-left: solid 60px transparent;
    border-bottom: solid 240px var(--body);
}
.dracula__body__inner::after {
    content: "";
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #000;
}
.dracula__body__best {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 40px;
    height: 100%;
    background: #4e6069;
}
.dracula__body__best::before {
    content: "";
    position: absolute;
    top: 16px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: solid 50px #fff;
    border-left: solid 20px transparent;
    border-right: solid 20px transparent;
    border-bottom: solid 0 transparent;
}
.dracula__body__best::after {
    content: "";
    position: absolute;
    bottom: 22px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #000;
}
.dracula__body__tie {
    position: absolute;
    top: 20px;
    left: 39px;
    width: 0;
    height: 0;
    border-top: solid 12px transparent;
    border-bottom: solid 12px transparent;
    border-left: solid 28px #b00025;
    border-right: solid 0 transparent;
}
.dracula__body__tie::before {
    content: "";
    position: absolute;
    top: -12px;
    left: -14px;
    width: 0;
    height: 0;
    border-top: solid 12px transparent;
    border-bottom: solid 12px transparent;
    border-right: solid 28px #b00025;
    border-left: solid 0 transparent;
}
.dracula__body__tie::after {
    content: "";
    position: absolute;
    top: -9px;
    left: -16px;
    width: 18px;
    height: 18px;
    border-radius: 2px;
    background: #84001c;
}
.dracula__body__collar {
    position: absolute;
    top: 30px;
    left: 20px;
    width: 0;
    height: 0;
    border-top: solid 48px var(--body);
    border-left: solid 80px transparent;
    border-right: solid 80px transparent;
    border-bottom: solid 0 transparent;
    transition: all ease 0.8s;
}
/* ----------------
    arm
------------------*/
.dracula__body__box {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    height: 140px;
    overflow: hidden;
}
.dracula__body__arm {
    position: absolute;
    z-index: 1;
    width: 20px;
    height: 70px;
    border-radius: 10px;
    transform-origin: 10px 10px;
    background: var(--body);
    transition: all ease 0.8s;
}
.arm--L {
    top: 52px;
    right: 50px;
    transform: rotate(-36deg);
}
.arm--L::before {
    content: "";
    position: absolute;
    bottom: -40px;
    left: 0;
    width: 100%;
    height: 60px;
    border-radius: 10px 10px 0 0;
    transform-origin: 10px 10px;
    transform: rotate(36deg);
    transition: inherit;
    background: var(--body);
}
.arm--R {
    top: 52px;
    left: 50px;
    transform: rotate(36deg);
}
.arm--R::before {
    content: "";
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    height: 50px;
    border-radius: 10px;
    transform-origin: 10px 10px;
    transform: rotate(140deg);
    transition: inherit;
    background: var(--body);
}
.dracula__body__hand {
    position: absolute;
    z-index: 3;
    background: var(--skin_A);
    transition: all ease 0.8s;
}
.hand--L {
    left: 18px;
    bottom: 60px;
    width: 22px;
    height: 26px;
    border-radius: 8px 2px 2px 8px;
}
.hand--R {
    right: 18px;
    bottom: -30px;
    width: 26px;
    height: 22px;
    border-radius: 8px 8px 2px 2px;
}
/* ----------------
    grass
------------------*/
.wineGrass {
    position: absolute;
    z-index: 1;
    left: 8px;
    bottom: 60px;
    width: 40px;
    height: 76px;
    transition: all ease 0.8s;
    transform: translateX(-2px);
    animation: turn linear 0.8s infinite alternate;
}
.wineGrass__cup {
    position: relative;
    width: 100%;
    height: 42px;
    border-radius: 2px 2px 24px 24px;
    background: rgba(255, 255, 255, 0.3);
}
.wineGrass__wine {
    content: "";
    position: absolute;
    top: 10px;
    left: -4px;
    width: 48px;
    height: 36px;
    transform-origin: top center;
    animation: wine linear 0.8s infinite alternate;
    transform: rotate(-5deg);
    overflow: hidden;
}
.wineGrass__wine::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 6px;
    right: 0;
    width: 36px;
    height: 32px;
    border-radius: 0 0 24px 24px;
    transform-origin: top center;
    animation: wine-rev linear 0.8s infinite alternate;
    transform: rotate(5deg);
    background: rgba(210, 0, 50, 0.6);
}
.wineGrass__parts {
    position: absolute;
    bottom: 0;
    left: 6px;
    width: 28px;
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.3);
}
.wineGrass__parts::before {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 4px;
    height: 30px;
    background: rgba(255, 255, 255, 0.3);
}
.wineGrass__parts::after {
    content: "";
    position: absolute;
    bottom: 6px;
    left: 2px;
    width: 22px;
    height: 26px;
    border-radius: 8px 2px 2px 8px;
    background: var(--skin_A);
    transition: all ease 0.8s;
}
/* ----------------
    reflection
------------------*/
.reflection {
    position: absolute;
    z-index: 30;
    top: 16px;
    left: 16px;
    width: calc(240px - 32px);
    height: calc(300px - 32px);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.8) inset;
    transition: all ease 0.4s;
    overflow: hidden;
}
.reflection::before,
.reflection::after {
    content: "";
    position: absolute;
    top: -40px;
    transform: rotate(-32deg);
    height: 280px;
    background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    transition: inherit;
}
.reflection::before {
    left: 0;
    width: 40px;
}
.reflection::after {
    left: 64px;
    width: 16px;
}
.panel--1:hover ~ .dracula .dracula__face__eye__inner::before {
    top: 0;
    left: 0;
}
.panel--2:hover ~ .dracula .dracula__face__eye__inner::before {
    top: 0;
    left: 5px;
}
.panel--3:hover ~ .dracula .dracula__face__eye__inner::before {
    top: 0;
    left: 10px;
}
.panel--4:hover ~ .dracula .dracula__face__eye__inner::before {
    top: 4px;
    left: 0;
}
.panel--5:hover ~ .dracula .dracula__face__eye__inner::before {
    top: 4px;
    left: 5px;
}
.panel--6:hover ~ .dracula .dracula__face__eye__inner::before {
    top: 4px;
    left: 10px;
}
.panel--7:hover ~ .dracula .dracula__face__eye__inner::before {
    top: 8px;
    left: 0;
}
.panel--8:hover ~ .dracula .dracula__face__eye__inner::before {
    top: 8px;
    left: 5px;
}
.panel--9:hover ~ .dracula .dracula__face__eye__inner::before {
    top: 8px;
    left: 10px;
}
.button:hover ~ .dracula .dracula__head {
    top: 150px;
    left: 10px;
    height: 160px;
    transform: scale(1.2) rotate(-20deg);
}
.button:hover .text {
    background: #574600;
}
.button:hover ~ .dracula .dracula__face::before {
    background: transparent;
}
.button:hover ~ .dracula .dracula__face::after {
    background: #190055;
}
.button:hover ~ .dracula .dracula__head__wrapper {
    animation: dracula_face 5s linear infinite;
}
.button:hover ~ .dracula .dracula__face__top {
    background: var(--skin_B);
}
.button:hover ~ .dracula .dracula__face__top::before {
    border-bottom-color: var(--skin_B);
}
.button:hover ~ .dracula .dracula__face__top::after {
    border-bottom-color: var(--skin_B);
}
.button:hover ~ .dracula .dracula__face__bottom {
    background: var(--skin_B);
}
.button:hover ~ .dracula .dracula__face__eye {
    background: #a6c8e0;
}
.button:hover ~ .dracula .dracula__eye--L {
    transform: rotate(-10deg);
}
.button:hover ~ .dracula .dracula__eye--R {
    transform: rotate(10deg);
}
.button:hover ~ .dracula .dracula__eye--L::before {
    right: 0;
}
.button:hover ~ .dracula .dracula__eye--R::before {
    left: 0;
}
.button:hover ~ .dracula .dracula__face__eye::after {
    background: var(--skin_B);
    height: 16px;
}
.button:hover ~ .dracula .dracula__face__eye__inner {
    top: 4px;
    background: #ffe01c;
}
.button:hover ~ .dracula .dracula__face__eye__inner::before {
    top: 2px;
    left: 9px;
    width: 8px;
}
.button:hover ~ .dracula .fang--T::before,
.button:hover ~ .dracula .fang--T::after {
    top: 0;
}
.button:hover ~ .dracula .fang--B::before,
.button:hover ~ .dracula .fang--B::after {
    bottom: 0;
}
.button:hover ~ .frame .frame__inner {
    background: #6a0044;
}
.button:hover ~ .frame .frame__inner::before {
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.8) inset;
}
.button:hover ~ .frame .bat {
    right: 48px;
}
.button:hover ~ .dracula .dracula__body__inner {
    left: 30px;
    bottom: -48px;
    transform: rotate(-30deg);
}
.button:hover ~ .dracula .dracula__body__collar {
    transform: rotate(-20deg) scale(1.1);
    top: 80px;
    left: -20px;
}
.button:hover ~ .dracula .arm--L {
    top: 84px;
    right: 80px;
    transform: rotate(-110deg);
}
.button:hover ~ .dracula .arm--L::before {
    transform: rotate(100deg);
}
.button:hover ~ .dracula .arm--R::before {
    height: 30px;
}
.button:hover ~ .dracula .dracula__body__hand {
    background: var(--skin_B);
}
.button:hover ~ .dracula .hand--R {
    bottom: 0;
}
.button:hover ~ .dracula .wineGrass {
    left: 4px;
    bottom: 0;
    animation-play-state: paused;
}
.button:hover ~ .dracula .wineGrass__parts::after {
    background: var(--skin_B);
}

.button:hover ~ .reflection {
    background: rgba(255, 255, 255, 0);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0) inset;
}
.button:hover ~ .reflection::before,
.button:hover ~ .reflection::after {
    opacity: 0;
}
@keyframes wine {
    0% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(5deg);
    }
}
@keyframes wine-rev {
    0% {
        transform: rotate(5deg);
    }
    100% {
        transform: rotate(-5deg);
    }
}
@keyframes turn {
    0% {
        transform: translateX(-2px);
    }
    100% {
        transform: translateX(2px);
    }
}
@keyframes wing_L {
    0% {
        transform: rotate(20deg);
    }
    100% {
        transform: rotate(-20deg);
    }
}
@keyframes wing_R {
    0% {
        transform: rotate(-20deg);
    }
    100% {
        transform: rotate(20deg);
    }
}
@keyframes bat_move_1 {
    0% {
        transform: translateY(-20px);
    }
    50% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(-20px);
    }
}
@keyframes bat_move_2 {
    0% {
        left: -16px;
    }
    50% {
        left: 16px;
    }
    100% {
        left: -16px;
    }
}
@keyframes dracula_face {
    0% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(0);
    }
    22% {
        transform: translateY(10px);
    }
    24% {
        transform: translateY(0);
    }
    26% {
        transform: translateY(10px);
    }
    28% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(10px);
    }
    32% {
        transform: translateY(0);
    }
    34% {
        transform: translateY(10px);
    }
    36% {
        transform: translateY(0);
    }
    38% {
        transform: translateY(10px);
    }
    40% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(0);
    }
}

Botón con efecto de desplazamiento de Drácula animado

Recomendado

Cuadro de búsqueda

Un código de Mete Han

Burbuja de mensaje HTML con diseño SVG

HTML

CSS

JS

Recomendado

Cuadro de búsqueda

Un código de Mete Han

Burbuja de mensaje HTML con diseño SVG

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS