Tips and methods to use CSS to achieve shadow effects when the mouse is hovering

Tips and methods of using CSS to implement shadow effects when the mouse is hovering, specific code examples are required

In web design, the mouseover effect is a common interaction One of the ways. By having elements display specific effects on mouse hover, you can increase the user experience and the attractiveness of your website. Among them, using CSS to implement shadow effects when the mouse is hovering is a common and simple method. This article will introduce how to implement this technique and give specific code examples.

1. Simple shadow effect
First, we need to use CSS to define a basic style, and then add additional shadow effects when the mouse hovers. Here is a sample code to implement a simple shadow effect:

HTML：

Shadow on mouseover

CSS:
.box {
width: 200px;
height: 200px;
background-color: #f1f1f1;
transition: box-shadow 0.3s;
}

.box:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

Code Description:

• HTML Part, we use a div element with the "box" class as an example.
• CSS part, we set the width, height and background color of the div element, and use the transition attribute to define the transition effect.
• When the div element is in the mouse-over state, we use the :hover selector to add the box-shadow attribute to achieve the shadow effect.

2. Multi-layer shadow effect
If we need to achieve multi-layer shadow effects, we can use multiple box-shadow attributes to superimpose. The following is a sample code to achieve a multi-layer shadow effect:

HTML：

Multi-layer shadow

CSS：
.box {
width: 200px;
height: 200px;
background-color: #f1f1f1;
transition: box-shadow 0.3s;
}

.box:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2),

          0 5px 15px rgba(0, 0, 0, 0.4),
          0 10px 20px rgba(0, 0, 0, 0.6);

}

Code Description:

# The ##HTML part is the same as the previous example.
• CSS part, in the :hover pseudo-class, we use three box-shadow attributes to define three layers of shadows respectively,
  The blur radius of the first layer of shadows The blur radius of the second layer of shadow is 15px and the transparency is 0.4;
  • The blur radius of the third layer of shadow is 20px and the transparency is 0.6.
  3. Irregular shadow effect
If we want to achieve an irregular-shaped shadow effect, we can use pseudo-classes and transform attributes in combination. The following is a sample code to achieve an irregular shadow effect:

HTML：

Irregular Shadow

CSS：
.box {

width: 200px;

height: 200px;
background-color: #f1f1f1;
transition: box-shadow 0.3s;
position: relative;
overflow: hidden;
}

.box::before {
content: "";

position: absolute;

width: 100%;
height: 100% ;
background-color: rgba(0, 0, 0, 0.4);
transform: rotate(-45deg);
top: 50%;
left: -100%;
z-index: -1;
transition: transform 0.3s;
}

.box:hover::before {
transform: rotate(45deg);

left: 100 %;

}

Code description:

The HTML part is the same as the previous example.

In the CSS part, we use the pseudo-class::before to create a rotated background layer, in which transform: rotate(-45deg) can achieve a 45-degree rotation effect.
• When the mouse is hovering, use the :hover pseudo-class and transform attribute to change the rotation angle and position of the background layer to achieve irregular shadow effects.
• Summary:
This article introduces the techniques and methods of using CSS to achieve shadow effects when the mouse is hovering, and gives specific code examples. By mastering these basic CSS properties and pseudo-class selectors, we can easily implement various mouse-over shadow effects, increasing the visual appeal and user experience of web pages.

The above is the detailed content of Tips and methods to use CSS to achieve shadow effects when the mouse is hovering. For more information, please follow other related articles on the PHP Chinese website!