CSS3ボタンマウスホバーにより絞り効果を実現-CSSチュートリアル-php.cn

CSS3ボタンマウスホバーにより絞り効果を実現

高洛峰

リリース： 2017-03-02 15:40:18

オリジナル

2402 人が閲覧しました

この記事では、CSS3 を使用してボタンとマウスのサスペンションアパーチャの効果を実現する方法をサンプルコードを使用して紹介します。必要な方は以下を参照してください。

1. HTML 関連の知識ポイント
HTML (ハイパーテキストマークアップ言語) は、最初は簡単に覚えて練習する必要があります。ですが、最終的にはやはり自分で学習する必要があり、綿密な学習と専門知識があれば、簡単に始めるのは非常に早いですが、HTML をよく学ぶことが Web 開発者になるための基本条件です。

2.CSS3関連の知識ポイント
CSSを活用して作業効率を向上させましょう！ CSS チュートリアルでは、CSS を使用して複数の Web ページのスタイルとレイアウトを同時に制御する方法を学びました。これは、フロントエンド開発で必要となるものです。マスターしなければなりません。

3. コードに直接移動します

コードは次のとおりです:

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

ログイン後にコピー

概要:

次の楽しみを体験するために、時々、人は研究と発見に苦労し続けなければなりません。 2番。以上がこの記事の全内容ですので、皆様の勉強や仕事のお役に立てれば幸いです。

CSS3 ボタンのマウスホバーによる絞り効果の実現に関するその他の記事については、PHP 中国語 Web サイトに注目してください。