How to use CSS to achieve various common effects

CSS is a technology used to style and layout web pages. In this article, we’ll explore how to use CSS to achieve a variety of common effects.

1. Implement circular images

In web design, circular images are often used for beautification. There are usually two ways to implement a circular image: one is to use a square image and crop it into a circle, and the other is to use the CSS border-radius property to round the corners of the image. Here we'll explore how to use the latter method.

First, we need to set the width and height of the image to equal values, and then set the border-radius property to 50% to render the image as a circle.

For example:

img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

2. Implement responsive layout

With the popularity of mobile devices, web design should pay more and more attention to responsive layout. Responsive layout refers to adaptively changing the layout of web pages according to the screen size.

To implement responsive layout, you first need to define the container. In CSS, you can use media queries to specify the layout method under different screen sizes.

For example:

.container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

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

In the above code, we define a container named container, which uses flex layout to achieve horizontal arrangement and limits the width to 100%. Then, use the @media query to determine if the width of the screen is less than or equal to 600 pixels. If so, change the container's flex-direction and justify-content properties to vertical alignment and centered alignment.

3. Implement background animation

Background animation can increase the vitality of the web page and leave a deeper impression on users. Here, we’ll cover a common way to animate backgrounds using CSS – gradient animation.

Gradient animation allows the background color to gradually change from one color to another over a period of time. We need to use CSS's linear-gradient function to generate gradient color values, and combine it with the animation property to achieve animation effects.

For example:

body {
  background: linear-gradient(to right, #000000, #ffffff);
  animation: bgGradient 10s ease infinite alternate;
}

@keyframes bgGradient {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}

In the code above, we set the background of the body element to a linear gradient from black to white. Then, use the animation property to define an animation named bgGradient with a duration of 10 seconds and an easing function of ease that loops infinitely and reverses the animation direction at the end of each loop. Finally, use the @keyframes rule to define the keyframes of the animation, and use the background-position property to control the gradient direction of the background color.

Summary:

CSS can achieve many cool effects. This article introduces common techniques for using CSS to achieve circular images, responsive layout, background animation, etc. These techniques can make your web pages more vivid and beautiful, and can also improve the user experience.

The above is the detailed content of How to use CSS to achieve various common effects. For more information, please follow other related articles on the PHP Chinese website!