Bewegen Sie die Maus über die CSS3-Taste, um einen Blendeneffekt zu erzielen-CSS-Tutorial-php.cn

Bewegen Sie die Maus über die CSS3-Taste, um einen Blendeneffekt zu erzielen

高洛峰

Freigeben： 2017-03-02 15:40:18

Original

2385 Leute haben es durchsucht

In diesem Artikel wird anhand eines Beispielcodes erläutert, wie Sie mithilfe von CSS3 den Effekt der Tasten- und Mausaufhängungsöffnung erzielen können. Schauen wir uns das an.

1. HTML-bezogene Wissenspunkte
HTML (Hypertext Markup Language) ist der Kern von Webseiten. Haben Sie keine Angst Am Anfang ist es viel, mehr zu üben, aber am Ende muss man noch viel selbst lernen. Der Einstieg ist einfach, aber das gute Erlernen von HTML ist die Grundvoraussetzung, um Webentwickler zu werden .

2. CSS3-bezogene Wissenspunkte
Verbessern Sie die Arbeitseffizienz durch den Einsatz von CSS! In unserem CSS-Tutorial haben wir gelernt, wie man mit CSS den Stil und das Layout mehrerer Webseiten gleichzeitig steuert. Um einer Webseite einen schönen Stil zu verleihen, ist die Verwendung von Stilen erforderlich muss beherrschen.

3. Geben Sie den Code direkt ein

Der Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Zusammenfassung:

Manchmal müssen Menschen weiter forschen und Entdeckungen machen, bevor sie das Vergnügen der nächsten Sekunde erleben können. Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium oder die Arbeit aller hilfreich sein.

Weitere Artikel zum Thema CSS3-Tasten-Mausbewegen zum Erzielen eines Blendeneffekts finden Sie auf der chinesischen PHP-Website!