برای کارایی کامل و بهتر این پلتفرم، باید جاوا اسکریپت مرورگر خود را فعال کنید.

کد ساخت کارت جادویی با انیمیشن متحرک با HTML و CSS

بی تاک

در طراحی سایت های گیمینگ و بازی و مجله ها، یکی از قسمت هایی که می توان به صورت یک بخش جذاب به سایت اضافه کرد، جعبه، باکس یا به عبارتی کارتی است که سایه آن به صورت جادویی و متحرک باشد! از این کارت می توانیم در سایت های مجله، فیلم و سریال یا سایت های موزیک برای بخشی که دارای بالاترین اهمیت است و می خواهیم محتوای آن توسط دیگران به خوبی دیده شود استفاده کنیم و آن را تبدیل به مکانی ویژه در سایت کنیم. در این تاپیک قصد داریم نحوه ساخت این کارت جادویی بسیار ساده را به شما آموزش دهیم.

کد HTML

بخش اولیه این کارت یک تکه کد HTML خیلی کوچک است. اما شما می توانید از عکس و المنت های دیگری هم داخل این کارت استفاده کنیم. یا به عنوان مثال یک عکس روی کارت قرار دهید یا هر تگ دیگر!

<div class="card">
  متن یا کدی که به صورت هاور نمایش داده می شود
</div>

کد CSS

بخش اصلی و بعدی برای ساختن این کارت، کدهای استایل است که سایه را به صورت متحرک تبدیل کند. این کدها را در فایل استایل سایتتان قرار دهید:

@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

:root {
  --card-height: 65vh;
  --card-width: calc(var(--card-height) / 1.5);
}


body {
  min-height: 100vh;
  background: #212534;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 2rem;
  padding-bottom: 2rem;
  box-sizing: border-box;
}


.card {
  background-image: url("https://betalk.ir/assets/files/2022-07-10/1657442919-810107-yaghi-pic.jpg") !important;
  background-size: cover !important;
  background: #191c29;
  width: var(--card-width);
  height: var(--card-height);
  padding: 3px;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  font-size: 1.5em;
  color: rgb(88 199 250 / 0%);
  cursor: pointer;
  font-family: cursive;
}

.card:hover {
  color: rgb(88 199 250 / 100%);
  transition: color 1s;
}
.card:hover:before, .card:hover:after {
  animation: none;
  opacity: 0;
}


.card::before {
  content: "";
  width: 104%;
  height: 102%;
  border-radius: 8px;
  background-image: linear-gradient(
    var(--rotate)
    , #5ddcff, #3c67e3 43%, #4e00c2);
    position: absolute;
    z-index: -1;
    top: -1%;
    left: -2%;
    animation: spin 2.5s linear infinite;
}

.card::after {
  position: absolute;
  content: "";
  top: calc(var(--card-height) / 6);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(calc(var(--card-height) / 6));
  background-image: linear-gradient(
    var(--rotate)
    , #5ddcff, #3c67e3 43%, #4e00c2);
    opacity: 1;
  transition: opacity .5s;
  animation: spin 2.5s linear infinite;
}

@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}

a {
  color: #212534;
  text-decoration: none;
  font-family: sans-serif;
  font-weight: bold;
  margin-top: 2rem;
}