Home > Article > Web Front-end > CSS3 button mouse hover to achieve aperture effect

CSS3 button mouse hover to achieve aperture effect

高洛峰Original: 2017-03-02 15:40:182383browse

This article uses example code to introduce to you how to use CSS3 to achieve the effect of button and mouse suspension aperture. Friends in need can refer to it. Let’s take a look together.

1. HTML related knowledge points
HTML (Hypertext Markup Language) is the core of web pages. First of all, you have to learn it. Don’t be afraid. HTML is easy to learn. It’s easy to learn at first. Remember to practice more, but in the end you still have to study deeply on your own. It is quick to get started simply, but learning HTML well is the basic condition for becoming a web developer.

2. CSS3 related knowledge points
Improve work efficiency by using CSS! In our CSS tutorial, we learned how to use CSS to control the style and layout of multiple web pages at the same time. How to dress a web page into a beautiful style requires the use of styles. This is something that front-end development must master.

3. Directly upload the code

The code is as follows:

<!doctype html>
<html>
<head>
   <!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
   <!--当前页面的三要素-->
     <meta charset="UTF-8">
     <meta name="Generator" content="EditPlus®">
     <meta name="Author" content="吉米">
     <meta name="Keywords" content="">
     <meta name="Description" content="">
    <title>CSS3按钮光圈悬浮效果</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        body{font-size:12px;font-family:"微软雅黑";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: #c40000;
         -moz-transition: all 275ms cubic-bezier(0.53, -0.67, 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);
       }
    </style>
</head>
 <body>
       <ul>
         <li><a href="#">预约<span></span></a></li>
         <li><a href="#">购买<span></span></a></li>
         <li><a href="#">支付<span></span></a></li>
      </ul>

 </body>
</html>

Summary:

Sometimes people have to keep struggling to study and discover before they can experience the pleasure of the next second. The above is the entire content of this article. I hope it will be helpful to everyone’s study or work.

For more articles related to CSS3 button mouse hover to achieve aperture effect, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：The most comprehensive list of CSS hack methods (compatible with multiple browsers)Next article：The most comprehensive list of CSS hack methods (compatible with multiple browsers)

See more

CSS3 button mouse hover to achieve aperture effect

Related articles