Maison > Article > interface Web > Comment utiliser HTML5+CSS3 pour créer une boîte de dialogue avec effet de fondu (code complet ci-joint)

Comment utiliser HTML5+CSS3 pour créer une boîte de dialogue avec effet de fondu (code complet ci-joint)

坏嘻嘻original: 2018-09-30 11:23:123268parcourir

Lorsque nous naviguons sur le Web, nous voyons souvent des outils d'invite. Le plus courant est le style de boîte d'invite. La boîte d'invite peut non seulement jouer un rôle de navigation clair, mais également afficher des informations cachées sans occuper l'espace de la page Web. , vous devez donc comprendre l'écriture d'outils d'invite pendant le processus de développement front-end. Cet article va donc vous montrer l'effet spécial d'une boîte d'invite : la boîte d'invite avec effet de fondu entrant. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Étapes pour utiliser HTML5+CSS3 pour créer une boîte d'invite d'effet de fondu entrant

Étape 1 : Configuration une boîte de dialogue de base

Le code est le suivant

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

L'effet est comme indiqué sur l'image

Comment utiliser HTML5+CSS3 pour créer une boîte de dialogue avec effet de fondu (code complet ci-joint)

Étape 2 : utilisez l'attribut de transition CSS3 et l'attribut d'opacité pour obtenir le fondu -en effet de l'outil d'invite

Le code est le suivant

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

L'effet est comme indiqué sur l'image

Comment utiliser HTML5+CSS3 pour créer une boîte de dialogue avec effet de fondu (code complet ci-joint)

Résumé

Utilisation éléments conteneurs (comme

) en HTML et ajoutez la classe "tooltip", dans Les informations de l'info-bulle seront affichées lorsque la souris passe sur

, puis lorsque le texte de l'info-bulle est placé sur l'élément en ligne (tel que ) et class="tooltiptext" est utilisé, le sélecteur :hover est utilisé lorsque la souris se déplace vers L'invite affichée lorsque l'élément spécifié

En CSS3, la classe d'info-bulle utilise position:relative et le texte d'invite doit définir la valeur de positionnement position:absolute. Pour la classe tooltiptext utilisée pour le texte d'astuce réel, le mode est masqué Lorsque la souris se déplace sur l'élément à afficher, il suffit de définir la largeur, la couleur d'arrière-plan, la couleur de la police et d'autres styles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html5 css3 html class 选择器 position transition

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Que signifie la fusion des marges CSS ? Comment résoudre le problème de la fusion des marges CSS ?Article suivant：Que signifie la fusion des marges CSS ? Comment résoudre le problème de la fusion des marges CSS ?

Articles Liés

Voir plus