ホームページ > 記事 > ウェブフロントエンド > HTML5+CSS3 を使用してフェードイン効果のあるプロンプト ボックスを作成する方法 (完全なコードを添付)
HTML5+CSS3 を使用してフェードイン効果のあるプロンプト ボックスを作成する方法 (完全なコードを添付)
- 坏嘻嘻オリジナル
- 2018-09-30 11:23:123266ブラウズ
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>結果は次のとおりです。画像
ステップ 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>
効果は次のとおりです図に示す
概要
コンテナ要素 (< など) を使用します;div>) を HTML に追加し、マウスを に移動するとプロンプト情報が表示され、プロンプト テキストがインライン要素 ( など) に配置されると、「tooltip」クラスが追加されます。 ="tooltiptext" が使用され、:hover セレクターが指定された要素にマウスを移動するために使用されます。
がオンの場合に表示されるプロンプトです。 CSS3 では、ツールチップ クラスはposition:relativeを使用し、プロンプト テキストは位置決め値position:absoluteを設定する必要があります。実際のヒント テキストに使用される toolstiptext クラスの場合、モードは非表示になります。マウスが表示する要素に移動すると、幅、背景色、フォント色、その他のスタイルを設定するだけで済みます。
以上がHTML5+CSS3 を使用してフェードイン効果のあるプロンプト ボックスを作成する方法 (完全なコードを添付)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。