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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

高洛峰

Mar 02, 2017 pm 03:40 PM

css3絞り浮遊するボタン

この記事では、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 サイトに注目してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

css怎么隐藏元素但不占空间Jun 01, 2022 pm 07:15 PM

两种方法：1、利用display属性，只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素，只需给元素添加“position:absolute;top:-9999px;”样式。

原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！

css3什么是自适应布局Jun 02, 2022 pm 12:05 PM

自适应布局又称“响应式布局”，是指可以自动识别屏幕宽度、并做出相应调整的网页布局；这样的网页能够兼容多个不同的终端，而不是为每个终端做一个特定的版本。自适应布局是为解决移动端浏览网页而诞生的，能够为使用不同终端的用户提供很好的用户体验。

css3如何实现鼠标点击图片放大Apr 25, 2022 pm 04:52 PM

实现方法：1、使用“:active”选择器选中鼠标点击图片的状态；2、使用transform属性和scale()函数实现图片放大效果，语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。

css3动画效果有变形吗Apr 28, 2022 pm 02:20 PM

css3中的动画效果有变形；可以利用“animation:动画属性 @keyframes ..{..{transform:变形属性}}”实现变形动画效果，animation属性用于设置动画样式，transform属性用于设置变形样式。

css3怎么设置动画旋转速度Apr 28, 2022 pm 04:32 PM

在css3中，可以利用“animation-timing-function”属性设置动画旋转速度，该属性用于指定动画将如何完成一个周期，设置动画的速度曲线，语法为“元素{animation-timing-function:速度属性值;}”。

一文了解CSS3中的新特性 ::target-text 选择器Apr 12, 2022 am 11:24 AM

本篇文章带大家一起深入了解一下CSS3中的新特性::target-text 选择器，聊聊该选择器的作用和使用方法，希望对大家有所帮助！

css3线性渐变可以实现三角形吗Apr 25, 2022 pm 02:47 PM

css3线性渐变可以实现三角形；只需创建一个45度的线性渐变，设置渐变色为两种固定颜色，一个是三角形的颜色，另一个为透明色即可，语法“linear-gradient(45deg,颜色值,颜色值 50%,透明色 50%,透明色 100%)”。

See all articles

ホットAIツール

ホットツール

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。