Teach you step by step how to use CSS3 to achieve dynamic effects of button hovering and flashing-CSS Tutorial-php.cn

Teach you step by step how to use CSS3 to achieve dynamic effects of button hovering and flashing

青灯夜游

Release： 2021-12-10 19:20:41

Original

4606 people have browsed it

In the previous article "How to create a waterfall flow layout with pure CSS3? In "A Brief Analysis of Columns Method", we introduced the method of using CSS3 column series properties to create a waterfall flow layout. Interested friends can learn about it~

And today we will take a look at how to use CSS3 to create a waterfall flow layout. Add dynamic effects to buttons to achieve a button hover shiny shadow animation effect, making the web page more interactive and attractive!

Let’s take a look at the renderings first

Teach you step by step how to use CSS3 to achieve dynamic effects of button hovering and flashing

Let’s study how to achieve this effect:

First of all It is the HTML part, define a div container to wrap the button button, use the tag pair in the button to contain the button text

<div id="shiny-shadow">
  <button><span>鼠标悬停</span></button>
</div>

Copy after login

and then start Define css styles for modification: adjust layout style, color range

#shiny-shadow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #1c2541;
}

button {
  border: 2px solid white;
  background: transparent;
  text-transform: uppercase;
  color: white;
  padding: 15px 50px;
  outline: none;
}

span {
  z-index: 20;  
}

Copy after login

##Then create a flashing overlay:

Use the

:after selector to create a rectangle with transparency and position it absolutely relative to the button button

button {
  position: relative;
}
button:after {
	content: &#39;&#39;;
	display: block;
	position: absolute;
	background: white;
	width: 50px;
	height: 125px;
	opacity: 20%;
}

Copy after login

transform: rotate(-45deg);
Style
```
button:after {
	transform: rotate(-45deg);
}
```
Copy after login

button:after {
	top: -2px;
	left: -1px;
}

Copy after login

Finally implement the button hover flashing animation effect

:hover
Selector; we want to set the position of the rectangle when the mouse is hovering
```
button:hover:after {
  left: 120%;
}
```
Copy after login

Teach you step by step how to use CSS3 to achieve dynamic effects of button hovering and flashing

transition
attribute to add a transition effect, because this attribute is a new attribute of CSS3, and a prefix needs to be added to be compatible with other browsers
```
button:hover:after {
  left: 120%;
  transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
   -webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
}
```
Copy after login

overflow: hidden;

style<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">button { overflow: hidden; }</pre><div class="contentsignin">Copy after login</div></div># to the button label.

Teach you step by step how to use CSS3 to achieve dynamic effects of button hovering and flashing

##It can be seen that there is still a problem with the position of the overlay. In the final effect, the overlay is not displayed at the beginning. We use the top attribute and the left attribute to adjust it. Teach you step by step how to use CSS3 to achieve dynamic effects of button hovering and flashing

button:after {
	top: -36px;
	left: -100px;
}

Copy after login

OK, you’re done! The complete code is attached below:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			#shiny-shadow {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100vh;
				background: #1c2541;
			}

			button {
				border: 2px solid white;
				background: transparent;
				text-transform: uppercase;
				color: white;
				padding: 15px 50px;
				outline: none;
				position: relative;
				overflow: hidden;
			}

			span {
				z-index: 20;
			}

			button:after {
				content: &#39;&#39;;
				display: block;
				position: absolute;
				background: white;
				width: 50px;
				height: 125px;
				opacity: 20%;
				transform: rotate(-45deg);
				top: -36px;
				left: -100px;
			}

			button:hover:after {
				left: 120%;
				transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
				-webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
			}
		</style>
	</head>
	<body>
		<div id="shiny-shadow">
			<button><span>鼠标悬停</span></button>
		</div>
	</body>
</html>

Copy after login

The PHP Chinese website platform has a lot of video teaching resources. Everyone is welcome to learn "

css Video Tutorial

The above is the detailed content of Teach you step by step how to use CSS3 to achieve dynamic effects of button hovering and flashing. For more information, please follow other related articles on the PHP Chinese website!