How to use CSS3 button mouse suspension to achieve aperture effect
This article mainly explains "how to use CSS3 button mouse suspension to achieve aperture effect", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use CSS3 button mouse suspension to achieve aperture effect"!
1. HTML related knowledge points
HTML (Hypertext markup language) is the core of a web page, first of all, you have to learn, don't be afraid, HTML is easy to learn, just start to remember more and practice more, but in the end you still have to go deep into your own research, simple entry is very fast, but to learn HTML is the basic condition to become a Web developer.
2. CSS3 related knowledge points
Improve productivity by using CSS! In our CSS tutorials, we learned how to use CSS to control the style and layout of multiple web pages at the same time, and how to dress a web page into a beautiful style.
3. Go to the code directly
CSS3 button aperture suspension effect * {margin:0;padding:0;} body {font-size:12px;font-family: "Microsoft Yahei"; background-color:#000} ul {margin:0 auto; text-align: center; margin-top: 80px;} li {display: inline-block; list-style: none Margin-right: 50px; text-align: center;-webkit-perspective: 1000;-webkit-backface-visibility: hidden;} .button {position: relative; font-family: futura, helvetica, sans; letter-spacing: 1px; text-transform: uppercase; background-color: # ffeded; display: inline-block; line-height: 60px Width: 55px; height: 55px;-moz-border-radius: 50%;-webkit-border-radius: 50%; border-radius: 60%; text-decoration: none; color: # c4000;-moz-transition: all 275ms cubic-bezier (0.53,0.73,0.74) -o-transition: all 275ms cubic-bezier (0.53,0.67,0.73,0.74);-webkit-transition: all 275ms cubic-bezier (0.53,0.67,0.73,0.74); transition: all 275ms cubic-bezier (0.53,0.67,0.73,0.74);} .button: hover {background-color: # fff -moz-transition-timing-function: cubic-bezier (0.37,0.74,0.15,1.65);-o-transition-timing-function: cubic-bezier (0.37,0.74,0.15,1.65);-webkit-transition-timing-function: cubic-bezier (0.37,0.74,0.15,1.65) Transition-timing-function: cubic-bezier (0.37,0.74,0.15,1.65);} .button: hover .pus {opacity: 1; border: 1px solid # A8CFCB;-moz-transform: scale (1.15);-ms-transform: scale (1.15);-webkit-transform: scale (1.15); transform: scale (1.15) -moz-transition-timing-function: cubic-bezier (0.37,0.74,0.15,1.65);-o-transition-timing-function: cubic-bezier (0.37,0.74,0.15,1.65);-webkit-transition-timing-function: cubic-bezier (0.37,0.74,0.15,1.65) Transition-timing-function: cubic-bezier (0.37,0.74,0.15,1.65);} .pus {position: absolute; top:-1px; left:-1px; width: 100%; height: 100%; opacity: 0; background: none; border: 1px solid # C56089;-moz-border-radius: 50% -webkit-border-radius: 50%; border-radius: 50%;-moz-transition: all 0.3s cubic-bezier (0.53,0.67,0.79,0.74);-o-transition: all 0.3s cubic-bezier (0.53,0.67,0.79,0.74) -webkit-transition: all 0.3s cubic-bezier (0.53,0.67,0.79,0.74); transition: all 0.3s cubic-bezier (0.53,0.67,0.79,0.74) } booking purchase payment Thank you for your reading. The above is the content of "how to use CSS3 button mouse suspension to achieve aperture effect". After the study of this article, I believe you have a deeper understanding of how to use CSS3 button mouse suspension to achieve aperture effect. The specific use situation still needs to be verified by practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
