CSS motion effects: add flow and motion effects to web page elements

CSS motion effect: Add flow and motion effects to web page elements, specific code examples are required
CSS (Cascading Style Sheets) is a markup language used to describe the style of web page elements , by using CSS, we can beautify web pages and change the appearance and behavior of elements. Among them, the motion effect is a very interesting and commonly used style effect that can add vitality and appeal to web pages. In this article, we’ll share some common CSS motion effects and provide corresponding code examples.

1. Smooth scrolling effect:
   The smooth scrolling effect can add a soft and smooth animation effect to the web page. This can be achieved through the following code:

html {
  scroll-behavior: smooth;
}

In this example, we set the scroll-behavior attribute to smooth, so that when the user clicks on a When there is an anchor linked element, the page will smoothly scroll to the target location.

2. Rotation animation:
   Rotation animation can add a sense of movement and visual appeal to elements. The following example shows how to implement a rotating block:

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.square {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotate 2s linear infinite;
}

In this example, we create a keyframe animation named rotate. With the transform property, we set the initial and final rotation angles of the element at 0% and 100% keyframes respectively. We then apply this animation to a square element, using the animation attributes to specify the animation name, duration, animation speed, and number of animations.

3. Gradient background color animation:
   Gradient background color animation can add flowing and changing effects to the background color of elements. The following example shows how to animate a gradient background:

@keyframes gradient {
  0% { background-color: red; }
  50% { background-color: blue; }
  100% { background-color: red; }
}

.element {
  width: 200px;
  height: 200px;
  animation: gradient 3s linear infinite;
}

In this example, we create a keyframe animation named gradient. By setting different background colors at different key frames, we achieve an animation effect of a gradient background. We then apply this animation to an element, using the animation attributes to specify the animation name, duration, animation speed, and number of animations.

4. Scale animation:
   Scale animation can add a larger or smaller effect to an element. The following example shows how to implement a scaled circle:

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

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  animation: scale 2s ease-in-out infinite;
}

In this example, we create a keyframe animation named scale. By setting different scaling ratios at different keyframes, we achieve a scaling effect. We then apply this animation to a circle element, using the animation attributes to specify the animation name, duration, animation speed, and number of animations.

Summary:
Motion effects can add vitality and appeal to web page elements, giving users a better browsing experience. In this article, we shared sample code for smooth scrolling effect, rotation animation, gradient background color animation, and zoom animation. By using these sample codes, you can add flow and movement effects to your web pages to create richer and more interesting web designs. Different animation effects can be selected and implemented according to your needs and creativity. I hope this article will be helpful for you to learn and practice CSS motion effects!

The above is the detailed content of CSS motion effects: add flow and motion effects to web page elements. For more information, please follow other related articles on the PHP Chinese website!