HTML5+CSS3 を使用してフェードイン効果のあるプロンプトボックスを作成する方法 (完全なコードを添付)-CSSチュートリアル-php.cn

HTML5+CSS3 を使用してフェードイン効果のあるプロンプトボックスを作成する方法 (完全なコードを添付)

坏嘻嘻

リリース： 2018-09-30 11:23:11

オリジナル

3316 人が閲覧しました

Web を閲覧するとき、最も一般的なのはプロンプトボックススタイルです。プロンプトボックスは、明確なナビゲーションの役割を果たすだけでなく、Web ページのスペースを占有せずに非表示の情報を表示することもできます。 , したがって、フロントエンド開発プロセス中にプロンプトツールの作成を理解する必要があります。そこでこの記事では、プロンプトボックスの特殊な効果、つまりフェードイン効果を備えたプロンプトボックスについて説明します。困っている友人は参考にしていただければ幸いです。

HTML5 CSS3 を使用してフェードイン効果プロンプトボックスを作成する手順

ステップ 1: 基本的なプロンプトボックスを設定するプロンプトボックス

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    /* 定位 */
    position: absolute;
    z-index: 1;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<body style="text-align:center;">
<div class="tooltip">鼠标移动到这
  <span class="tooltiptext">提示文本</span>
</div>
</body>
</html>

ログイン後にコピー

結果は次のとおりです。画像

HTML5+CSS3 を使用してフェードイン効果のあるプロンプトボックスを作成する方法 (完全なコードを添付)

ステップ 2: CSS3 トランジションプロパティと不透明度プロパティを使用してフェードイン効果を実現しますプロンプトツールの

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    
    /* 淡入 - 1秒内从 0% 到 100% 显示: */
    opacity: 0;
    transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
</style>
<body style="text-align:center;">
<h2>淡入效果</h2>
<p>鼠标移动到以下元素，提示工具会再一秒内从 0% 到 100% 完全显示。</p>
<div class="tooltip">PHP中文网
  <span class="tooltiptext">666666666666</span>
</div>
</body>
</html>

ログイン後にコピー

効果は次のとおりです図に示す

HTML5+CSS3 を使用してフェードイン効果のあるプロンプトボックスを作成する方法 (完全なコードを添付)

概要

コンテナ要素 (< など) を使用します;div>) を HTML に追加し、マウスを

に移動するとプロンプト情報が表示され、プロンプトテキストがインライン要素 ( など) に配置されると、「tooltip」クラスが追加されます。 ="tooltiptext" が使用され、:hover セレクターが指定された要素にマウスを移動するために使用されます。

がオンの場合に表示されるプロンプトです。

CSS3 では、ツールチップクラスはposition:relativeを使用し、プロンプトテキストは位置決め値position:absoluteを設定する必要があります。実際のヒントテキストに使用される toolstiptext クラスの場合、モードは非表示になります。マウスが表示する要素に移動すると、幅、背景色、フォント色、その他のスタイルを設定するだけで済みます。

以上がHTML5+CSS3 を使用してフェードイン効果のあるプロンプトボックスを作成する方法 (完全なコードを添付)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。