What are some examples of dynamic CSS?

What are some examples of dynamic CSS?

Dynamic CSS refers to styles that change based on user interaction or other conditions. Examples include hover effects, media queries, and animations.

Can you show me a simple hover effect example?

Sure! Here's a simple example:

.button {
  background-color: blue;
  color: white;
  transition: background-color 0.3s;
}

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

This changes the button's background color when hovered.

What about using media queries for responsive design?

Media queries allow you to apply styles based on the viewport size. For example:

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

This changes the layout for smaller screens.

Can you explain CSS animations?

Absolutely! CSS animations let you create smooth transitions between styles. For example:

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

.box {
  animation: slide 2s;
}

This moves the box 100 pixels to the right over 2 seconds.