css动态样式

/* 示例代码：使用CSS动态样式 */

/* 1. 使用:hover伪类实现鼠标悬停效果 */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.button:hover {
  background-color: red;
}

/* 2. 使用:active伪类实现点击时的效果 */
.button:active {
  transform: translateY(2px);
}

/* 3. 使用@media查询实现响应式设计 */
@media (max-width: 600px) {
  .button {
    width: 100%;
  }
}

/* 4. 使用CSS变量实现动态样式 */
:root {
  --main-color: green;
}

.dynamic-button {
  background-color: var(--main-color);
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

/* 解释说明：
- :hover伪类用于当鼠标悬停在元素上时改变样式。
- :active伪类用于当元素被点击时改变样式。
- @media查询用于根据屏幕宽度调整样式，实现响应式设计。
- CSS变量允许你定义可重用的样式值，并可以在整个样式表中动态更改这些值。
*/