css を編集 - dictionary

デザインを<a href="/dictionary/感じ悪ぅ">感じ悪ぅ</a>いものから<br>
<p class="rainbow-text">そうじゃなくすること</p>
<a href="/dictionary/html">HTML</a>と併用して使用する。
<style>
@keyframes rainbow {
  0% { color: red; }
  16% { color: orange; }
  32% { color: yellow; }
  48% { color: green; }
  64% { color: blue; }
  80% { color: indigo; }
  100% { color: violet; }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}

.rainbow-text {
  font-size: 2rem;
  animation: 
    rainbow 3s infinite linear,
    pulse 2s infinite ease-in-out;
  font-weight: bold;
}
    .css {
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
      background: linear-gradient(120deg, #f0f4ff, #c6dbf0);
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .card {
      backdrop-filter: blur(12px);
      background: rgba(255, 255, 255, 0.25);
      border-radius: 20px;
      padding: 40px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      max-width: 500px;
      text-align: center;
      color: #333;
    }
    .css h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      background: linear-gradient(to right, #6a93ff, #c56cff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .css p {
      font-size: 1.1rem;
      line-height: 1.6;
    }
    @media (max-width: 600px) {
      .card {
        padding: 20px;
      }
      .css h1 {
        font-size: 2rem;
      }
    }
  </style><br>
<div class="css">
  <div class="card">
    <h1>CSSの魔法</h1>
    <p>このレイアウトは、グラスモーフィズム、シャドウ、レスポンシブデザインなどのCSSの魅力を詰め込んでいます。優雅で視覚的に心地よい体験を届けます。</p>
  </div>
</div>

リンクを挿入