Effet de survol de la consommation de soda

Ouvrir dans l'éditeur Publiez votre code Precisa de um site?

Recommandé

3 September 2024

<!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=Rubik+Mono+One&display=swap" rel="stylesheet" /><link rel="stylesheet" href="./style.css">

</head>
<body>
<div class="container">
  <a href="#" class="glass soda">
    <div class="waveWrap">
      <div class="wave">
        <div class="bubbleWrap">
          <div class="bubble sz-s sp-1 dl-2"></div>
          <div class="bubble sz-m sp-3 dl-1"></div>
          <div class="bubble sz-l sp-2 dl-5"></div>
          <div class="bubble sz-s sp-2 dl-3"></div>
          <div class="bubble sz-m sp-3 dl-2"></div>
          <div class="bubble sz-l sp-1 dl-3"></div>
          <div class="bubble sz-s sp-2 dl-1"></div>
          <div class="bubble sz-m sp-1 dl-1"></div>
          <div class="bubble sz-l sp-3 dl-5"></div>
          <div class="bubble sz-s sp-1 dl-2"></div>
          <div class="bubble sz-m sp-3 dl-4"></div>
          <div class="bubble sz-l sp-2 dl-3"></div>
          <div class="bubble sz-m sp-1 dl-2"></div>
          <div class="bubble sz-l sp-3 dl-3"></div>
          <div class="bubble sz-s sp-1 dl-4"></div>
          <div class="bubble sz-m sp-2 dl-1"></div>
          <div class="bubble sz-s sp-1 dl-2"></div>
          <div class="bubble sz-m sp-3 dl-1"></div>
          <div class="bubble sz-l sp-2 dl-5"></div>
          <div class="bubble sz-s sp-2 dl-3"></div>
          <div class="bubble sz-m sp-3 dl-2"></div>
          <div class="bubble sz-l sp-1 dl-3"></div>
          <div class="bubble sz-s sp-2 dl-1"></div>
          <div class="bubble sz-m sp-1 dl-1"></div>
          <div class="bubble sz-l sp-3 dl-5"></div>
          <div class="bubble sz-s sp-1 dl-2"></div>
          <div class="bubble sz-m sp-3 dl-4"></div>
          <div class="bubble sz-l sp-2 dl-3"></div>
          <div class="bubble sz-m sp-1 dl-2"></div>
          <div class="bubble sz-l sp-3 dl-3"></div>
          <div class="bubble sz-s sp-1 dl-4"></div>
          <div class="bubble sz-m sp-2 dl-1"></div>
          <div class="bubble sz-m sp-1 dl-1"></div>
          <div class="bubble sz-l sp-3 dl-4"></div>
          <div class="bubble sz-s sp-1 dl-5"></div>
          <div class="bubble sz-m sp-2 dl-2"></div>
        </div>
      </div>
    </div>
    <div class="fruit fruit--lime">
      <div class="fruit__inner"></div>
    </div>
    <div class="iceWrap">
      <div class="ice ice-1"></div>
      <div class="ice ice-2"></div>
      <div class="ice ice-3"></div>
      <div class="ice ice-4"></div>
      <div class="ice ice-5"></div>
      <div class="ice ice-6"></div>
    </div>
    <span class="text">ENTRY</span>
    <div class="reflection"></div>
  </a>

<a href="#" class="glass cola">
    <div class="waveWrap">
      <div class="wave">
        <div class="bubbleWrap">
          <div class="bubble sz-s sp-1 dl-2"></div>
          <div class="bubble sz-m sp-3 dl-1"></div>
          <div class="bubble sz-l sp-2 dl-5"></div>
          <div class="bubble sz-s sp-2 dl-3"></div>
          <div class="bubble sz-m sp-3 dl-2"></div>
          <div class="bubble sz-l sp-1 dl-3"></div>
          <div class="bubble sz-s sp-2 dl-1"></div>
          <div class="bubble sz-m sp-1 dl-1"></div>
          <div class="bubble sz-l sp-3 dl-5"></div>
          <div class="bubble sz-s sp-1 dl-2"></div>
          <div class="bubble sz-m sp-3 dl-4"></div>
          <div class="bubble sz-l sp-2 dl-3"></div>
          <div class="bubble sz-m sp-1 dl-2"></div>
          <div class="bubble sz-l sp-3 dl-3"></div>
          <div class="bubble sz-s sp-1 dl-4"></div>
          <div class="bubble sz-m sp-2 dl-1"></div>
          <div class="bubble sz-s sp-1 dl-2"></div>
          <div class="bubble sz-m sp-3 dl-1"></div>
          <div class="bubble sz-l sp-2 dl-5"></div>
          <div class="bubble sz-s sp-2 dl-3"></div>
          <div class="bubble sz-m sp-3 dl-2"></div>
          <div class="bubble sz-l sp-1 dl-3"></div>
          <div class="bubble sz-s sp-2 dl-1"></div>
          <div class="bubble sz-m sp-1 dl-1"></div>
          <div class="bubble sz-l sp-3 dl-5"></div>
          <div class="bubble sz-s sp-1 dl-2"></div>
          <div class="bubble sz-m sp-3 dl-4"></div>
          <div class="bubble sz-l sp-2 dl-3"></div>
          <div class="bubble sz-m sp-1 dl-2"></div>
          <div class="bubble sz-l sp-3 dl-3"></div>
          <div class="bubble sz-s sp-1 dl-4"></div>
          <div class="bubble sz-m sp-2 dl-1"></div>
          <div class="bubble sz-m sp-1 dl-1"></div>
          <div class="bubble sz-l sp-3 dl-4"></div>
          <div class="bubble sz-s sp-1 dl-5"></div>
          <div class="bubble sz-m sp-2 dl-2"></div>
        </div>
      </div>
    </div>
    <div class="fruit fruit--lemon">
      <div class="fruit__inner"></div>
    </div>
    <div class="iceWrap">
      <div class="ice ice-1"></div>
      <div class="ice ice-2"></div>
      <div class="ice ice-3"></div>
      <div class="ice ice-4"></div>
      <div class="ice ice-5"></div>
      <div class="ice ice-6"></div>
    </div>
    <span class="text">ENTRY</span>
    <div class="reflection"></div>
  </a>
</div>  
</body>
</html>

CSS

body {
    background: #232332;
}
.container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.glass:first-child {
    margin-right: 120px;
}

.glass {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 0;
    text-decoration: none;
    width: 320px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2));
    border-radius: 0 0 12px 12px;
}
.glass::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -22px;
    left: -6px;
    width: 10px;
    height: 100px;
    transform-origin: top left;
    border-radius: 0 6px 0 0;
    transform: rotate(-20deg);
}
.glass::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: -24px;
    left: -31px;
    width: 36px;
    height: 10px;
    transform-origin: top left;
    border-radius: 0 6px 0 0;
}
.glass.soda::before,
.glass.soda::after {
    background: #ff3363;
}
.glass.cola::before,
.glass.cola::after {
    background: #fff;
}

.text {
    position: relative;
    z-index: 4;
    font-family: 'Rubik Mono One', monospace;
    font-weight: 400;
    font-style: normal;
    font-size: 28px;
    letter-spacing: 0.2em;
    color: #fff;
}

.reflection {
    position: absolute;
    z-index: 9;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: solid 2px rgba(255, 255, 255, 0.8);
    border-radius: inherit;
}
.reflection::before,
.reflection::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: calc(100% - 12px);
}
.reflection::before {
    top: 4px;
    height: calc(100% - 12px);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8));
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 90% 100%, 90% 0%, 15% 0%, 15% 100%, 12% 100%, 12% 0%, 8% 0%, 8% 100%, 0% 100%);
}
.reflection::after {
    bottom: 6px;
    height: 40%;

border-radius: 0 0 6px 6px;
}
.glass.soda .reflection::after {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
}
.glass.cola .reflection::after {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
}

.iceWrap {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: calc(100% - 12px);
    height: calc(100% - 6px);
}
.ice {
    position: absolute;
    width: 32px;
    height: 32px;
    transition: all ease 4s;
    animation: ice ease 5s infinite;
}
.ice::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    background: radial-gradient(rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.5));
    mix-blend-mode: soft-light;
}
.ice-1 {
    left: 3%;
    bottom: 40%;
    transform: rotate(-25deg);
}
.ice-2 {
    left: 15%;
    bottom: 20%;
    transform: rotate(34deg);
}
.ice-3 {
    left: 35%;
    bottom: 35%;
    transform: rotate(20deg);
}
.ice-4 {
    left: 50%;
    bottom: 30%;
    transform: rotate(-22deg);
}
.ice-5 {
    left: 70%;
    bottom: 50%;
    transform: rotate(30deg);
}
.ice-6 {
    left: 84%;
    bottom: 30%;
    transform: rotate(-47deg);
}

.waveWrap {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: calc(100% - 12px);
    height: calc(100% - 6px);
    border-radius: 0 0 6px 6px;
    overflow: hidden;
}
.waveWrap::before {
    content: '';
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    height: 30%;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
    mix-blend-mode: soft-light;
}
.wave {
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: path('M0,124V2.71c122.49-10.81,209.27,15.25,320,0v121.29H0Z');
    animation: wave1 ease 5s infinite;
    transition: all ease 4s;
}
.wave::before,
.wave::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
}
.wave::before {
    top: 0%;
    clip-path: path('M0,1.15v78.25h320V1.15C206.2-3.87,122.14,9.73,0,1.15Z');
    animation: wave2 ease 6s infinite;
    background-color: hsla(0, 0%, 100%, 0);
}
.wave::after {
    top: 0%;
    clip-path: path('M0,124V2.71c122.49-10.81,209.27,15.25,320,0v121.29H0Z');
    animation: wave1 ease 7s infinite;
    background-color: hsla(0, 0%, 100%, 0);
}
.glass.soda .wave {
    background-color: hsla(184, 100%, 83%, 0.8);
    background-image: radial-gradient(at 15% 25%, hsla(197, 71%, 55%, 0.53) 0px, transparent 50%), radial-gradient(at 78% 30%, hsla(178, 100%, 77%, 0.73) 0px, transparent 50%), radial-gradient(at 94% 92%, hsla(210, 97%, 57%, 0.84) 0px, transparent 50%), radial-gradient(at 11% 87%, hsla(176, 100%, 52%, 0.63) 0px, transparent 50%), radial-gradient(at 45% 86%, hsla(178, 75%, 49%, 0.63) 0px, transparent 50%);
}
.glass.soda .wave::before {
    mix-blend-mode: hard-light;
    background-image: radial-gradient(at 28% 80%, hsla(197, 71%, 55%, 0.53) 0px, transparent 50%), radial-gradient(at 66% 64%, hsla(178, 100%, 77%, 0.73) 0px, transparent 50%), radial-gradient(at 94% 28%, hsla(210, 97%, 57%, 0.84) 0px, transparent 50%), radial-gradient(at 50% 32%, hsla(176, 100%, 52%, 0.63) 0px, transparent 50%), radial-gradient(at 16% 29%, hsla(178, 75%, 49%, 0.63) 0px, transparent 50%);
}
.glass.soda .wave::after {
    background-image: radial-gradient(at 25% 51%, hsla(197, 71%, 55%, 0.53) 0px, transparent 50%), radial-gradient(at 69% 48%, hsla(178, 100%, 77%, 0.73) 0px, transparent 50%), radial-gradient(at 10% 94%, hsla(210, 97%, 57%, 0.84) 0px, transparent 50%), radial-gradient(at 90% 90%, hsla(176, 100%, 52%, 0.63) 0px, transparent 50%), radial-gradient(at 60% 89%, hsla(178, 75%, 49%, 0.63) 0px, transparent 50%);
}
.glass.cola .wave {
    background-color: hsla(26, 77%, 83%, 0.8);
    background-image: radial-gradient(at 25% 51%, hsla(18, 74%, 47%, 0.53) 0px, transparent 50%), radial-gradient(at 69% 48%, hsla(18, 100%, 60%, 0.73) 0px, transparent 50%), radial-gradient(at 9% 94%, hsla(18, 77%, 20%, 0.84) 0px, transparent 50%), radial-gradient(at 90% 90%, hsla(0, 88%, 18%, 0.63) 0px, transparent 50%), radial-gradient(at 60% 89%, hsla(0, 52%, 64%, 0.63) 0px, transparent 50%);
}
.glass.cola .wave::before {
    mix-blend-mode: color-burn;
    background-image: radial-gradient(at 85% 18%, hsla(18, 74%, 47%, 0.53) 0px, transparent 50%), radial-gradient(at 52% 26%, hsla(18, 100%, 60%, 0.73) 0px, transparent 50%), radial-gradient(at 12% 18%, hsla(18, 56%, 48%, 0.84) 0px, transparent 50%), radial-gradient(at 22% 81%, hsla(5, 73%, 54%, 0.63) 0px, transparent 50%), radial-gradient(at 75% 82%, hsla(0, 52%, 64%, 0.63) 0px, transparent 50%);
}
.glass.cola .wave::after {
    mix-blend-mode: multiply;
    background-image: radial-gradient(at 86% 93%, hsla(18, 62%, 27%, 1) 0px, transparent 50%), radial-gradient(at 76% 24%, hsla(14, 73%, 30%, 0.93) 0px, transparent 50%), radial-gradient(at 48% 94%, hsla(1, 53%, 32%, 0.92) 0px, transparent 50%), radial-gradient(at 12% 95%, hsla(0, 52%, 21%, 0.86) 0px, transparent 50%), radial-gradient(at 12% 16%, hsla(0, 47%, 36%, 0.94) 0px, transparent 50%), radial-gradient(at 30% 45%, hsla(0, 52%, 64%, 0.63) 0px, transparent 50%);
}

.glass .bubbleWrap {
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height: 125%;
    overflow: hidden;
}
.glass .bubble {
    position: absolute;
    z-index: 3;
    bottom: 0;
    aspect-ratio: 1/1;
    transition: 1.5s;
    animation-name: up;
    animation-iteration-count: infinite;
    mix-blend-mode: hard-light;
}
.bubble::before,
.bubble::after {
    content: '';
    position: absolute;
    border-radius: 50%;
}
.glass.soda .bubble::before,
.glass.soda .bubble::after {
    background: radial-gradient(rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.6));
}
.glass.cola .bubble::before,
.glass.cola .bubble::after {
    background: radial-gradient(rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.2));
}
.bubble::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.bubble.sz-s::after {
    top: 120%;
    left: -600%;
    width: 200%;
    height: 200%;
}
.bubble.sz-m::after {
    top: 300%;
    left: 400%;
    width: 110%;
    height: 110%;
}
.bubble.sz-l::after {
    top: 300%;
    left: -500%;
    width: 60%;
    height: 60%;
}

.glass .bubble.sz-l {
    width: 4%;
}
.glass .bubble.sz-m {
    width: 3%;
}
.glass .bubble.sz-s {
    width: 2%;
}

.glass .bubble.sp-1 {
    animation-duration: 1.5s;
}
.glass .bubble.sp-2 {
    animation-duration: 1.8s;
}
.glass .bubble.sp-3 {
    animation-duration: 2.2s;
}
.glass .bubble.dl-2 {
    animation-delay: 0.4s;
}
.glass .bubble.dl-3 {
    animation-delay: 0.8s;
}
.glass .bubble.dl-4 {
    animation-delay: 1.2s;
}
.glass .bubble.dl-5 {
    animation-delay: 1.6s;
}

.glass .bubble:nth-child(1) {
    right: 0%;
}
.glass .bubble:nth-child(2) {
    right: 15%;
}
.glass .bubble:nth-child(3) {
    right: 6%;
}
.glass .bubble:nth-child(4) {
    right: 12%;
}
.glass .bubble:nth-child(5) {
    right: 20%;
}
.glass .bubble:nth-child(6) {
    right: 14%;
}
.glass .bubble:nth-child(7) {
    right: 20%;
}
.glass .bubble:nth-child(8) {
    right: 25%;
}
.glass .bubble:nth-child(9) {
    right: 28%;
}
.glass .bubble:nth-child(10) {
    right: 33%;
}
.glass .bubble:nth-child(11) {
    right: 35%;
}
.glass .bubble:nth-child(12) {
    right: 38%;
}
.glass .bubble:nth-child(13) {
    right: 42%;
}
.glass .bubble:nth-child(14) {
    right: 48%;
}
.glass .bubble:nth-child(15) {
    right: 50%;
}
.glass .bubble:nth-child(16) {
    right: 47%;
}
.glass .bubble:nth-child(17) {
    right: 55%;
}
.glass .bubble:nth-child(18) {
    right: 57%;
}
.glass .bubble:nth-child(19) {
    right: 59%;
}
.glass .bubble:nth-child(20) {
    right: 62%;
}
.glass .bubble:nth-child(21) {
    right: 64%;
}
.glass .bubble:nth-child(22) {
    right: 66%;
}
.glass .bubble:nth-child(23) {
    right: 69%;
}
.glass .bubble:nth-child(24) {
    right: 72%;
}
.glass .bubble:nth-child(25) {
    right: 74%;
}
.glass .bubble:nth-child(26) {
    right: 78%;
}
.glass .bubble:nth-child(27) {
    right: 80%;
}
.glass .bubble:nth-child(28) {
    right: 82%;
}
.glass .bubble:nth-child(29) {
    right: 84%;
}
.glass .bubble:nth-child(30) {
    right: 86%;
}
.glass .bubble:nth-child(31) {
    right: 70%;
}
.glass .bubble:nth-child(32) {
    right: 98%;
}
.glass .bubble:nth-child(33) {
    right: 82%;
}
.glass .bubble:nth-child(34) {
    right: 88%;
}
.glass .bubble:nth-child(35) {
    right: 94%;
}
.glass .bubble:nth-child(36) {
    right: 96%;
}
/*-------------------------------

レモン&ライム

-------------------------------*/
.fruit {
    position: absolute;
    top: -32px;
    right: -32px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    box-sizing: border-box;
    border-style: solid;
    border-width: 3px;
}
.fruit::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    border-radius: 50%;
}
.fruit__inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 3px;
    height: 100%;
}
.fruit__inner::before,
.fruit__inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    background: inherit;
}
.fruit__inner::before {
    transform: rotate(60deg);
}
.fruit__inner::after {
    transform: rotate(-60deg);
}
.fruit--lemon {
    background: #fffede;
    border-color: #ffe605;
}
.fruit--lemon::before {
    background: #fff77a;
}
.fruit--lemon .fruit__inner {
    background: #fffede;
}
.fruit--lime {
    background: #eaffb3;
    border-color: #62c800;
}
.fruit--lime::before {
    background: #a3ff6e;
}
.fruit--lime .fruit__inner {
    background: #eaffb3;
}
/*-------------------------------

アクション

-------------------------------*/
.glass:hover .ice {
    bottom: 0px;
    transform: rotate(0deg);
}
.glass:hover .wave {
    top: 100%;
}
@keyframes up {
    0% {
        bottom: 0%;
    }
    100% {
        bottom: 120%;
    }
}
@keyframes wave1 {
    0% {
        clip-path: path('M0,124V2.71c122.49-10.81,209.27,15.25,320,0v121.29H0Z');
    }
    50% {
        clip-path: path('M0,123.96V2.66c122.28,13.91,215.81-10.38,320,0v121.29H0Z');
    }
    100% {
        clip-path: path('M0,124V2.71c122.49-10.81,209.27,15.25,320,0v121.29H0Z');
    }
}
@keyframes wave2 {
    0% {
        clip-path: path('M0,1.15v78.25h320V1.15C206.2-3.87,122.14,9.73,0,1.15Z');
    }
    50% {
        clip-path: path('M0,1.75v78.25h320V1.75C209.27,11.59,122.49-5.22,0,1.75Z');
    }
    100% {
        clip-path: path('M0,1.15v78.25h320V1.15C206.2-3.87,122.14,9.73,0,1.15Z');
    }
}

Effet de survol de la consommation de soda

Recommandé

GRANDE ROUE

site web moderne

Champ de mot de passe animé

HTML

CSS

JS

Recommandé

GRANDE ROUE

site web moderne

Champ de mot de passe animé

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS