Un code par mironovbogdan341

Ouvrir dans l'éditeur Publiez votre code

Recommandé

4 December 2024

Galerie de défilement infini CSS CodePen Home

1 December 2024

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<title>Центрированная RGB-переливающаяся кнопка</title>
<style>
  /* Центрируем весь контент */
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Высота всей видимой части окна */
    margin: 0;
    background-color: #f0f0f0; /* Можно добавить фон для красоты */
  }

/* Создаем плавную анимацию с плавным переходом через цвета RGB */
  @keyframes rainbow {
    0% { background-color: rgb(255, 0, 0); }
    16.66% { background-color: rgb(255, 255, 0); }
    33.33% { background-color: rgb(0, 255, 0); }
    50% { background-color: rgb(0, 255, 255); }
    66.66% { background-color: rgb(0, 0, 255); }
    83.33% { background-color: rgb(255, 0, 255); }
    100% { background-color: rgb(255, 0, 0); }
  }

/* Стиль кнопки с эффектами и анимацией */
  .rainbow-button {
    padding: 15px 40px;
    font-size: 18px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    background-color: rgb(255, 0, 0);
    animation: rainbow 8s linear infinite;
    transition: background-color 0.3s, transform 0.2s;
  }

/* Эффект при наведении */
  .rainbow-button:hover {
    opacity: 0.85;
    transform: scale(1.05);
  }
</style>
</head>
<body>

<button class="rainbow-button">Плывущая RGB-кнопка</button>

</body>
</html>

Un code par mironovbogdan341

Recommandé

Un code par fastcloud893

Galerie de défilement infini CSS CodePen Home

Un code par ledoc

HTML

CSS

JS

Recommandé

Un code par fastcloud893

Galerie de défilement infini CSS CodePen Home

Un code par ledoc

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS