Maison > interface Web > Tutoriel H5 > le corps du texte

HTML5 implémente l'animation de clic de bulle de dialogue

青灯夜游
Libérer: 2020-10-23 17:10:16
avant
4281 Les gens l'ont consulté

Cet article vous présentera comment utiliser HTML5 pour implémenter une animation de clic de bulle de dialogue. 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 sera utile à tout le monde.

Exigences

Vous devez d'abord définir les exigences. Exigences :

  1. La bulle de dialogue doit être animée, avec une animation totale de 4 secondes
  2. Quand il n'y a pas de clic, la bulle apparaîtra toutes les 8 secondes
  3. Lorsque vous cliquez dessus, si l'animation n'a pas fini de jouer, elle ne sera pas exécutée. Si l'animation a fini de jouer, des bulles apparaîtront immédiatement

Retirez ensuite l'image terminée et faites-le ressembler à ceci :

HTML5 implémente lanimation de clic de bulle de dialogue

Idées

  1. Faites d'abord des bulles
  2. Deuxièmement, utilisez CSS pour animer
  3. Ajouter une minuterie pour terminer l'animation de clic et l'animation de synchronisation

Réaliser

Production de bulles translucides

HTML5 implémente lanimation de clic de bulle de dialogue

Structure HTML

<p>闭上眼睛,用心祈祷,努力的人有回报</p>
Copier après la connexion

moins (les règles rem sont converties par vous-même, vous pouvez également utiliser px)

.select-toast{
    position: absolute;   //确定对话的位置
    top: 3.4rem;
    right: 0.2rem;
    width: 1.45rem;   //确定宽度,高度由文字撑开
    padding: 0.18rem;  //确定文字距离对话框外部的距离
    line-height: 0.4rem;  //确定文字的行高
    color: #d06e5a;  //文字颜色
    background-color: rgba(255,255,255,0.85);  //背景色,半透明
    border-radius: 0.2rem;  //对话框圆角
    opacity: 0;  //初始情况透明度为0
    &::before{    //三角的制作
        content:"";   //伪元素必需
        width: 0;    //本身的宽高为0
        height: 0;
        border-width: 0.2rem;  //三角形的高
        border-color:transparent rgba(255,255,255,0.85) transparent transparent;   //角朝左的三角形
        border-style: solid;  //边框为实心的
        position: absolute;  //三角的位置
        left: -0.4rem;
        top: 0.4rem;
    }
}
Copier après la connexion

Animation css de la boîte de dialogue

.select-toast.toastAni{
     -webkit-animation: toast 4s;   //对话框的动画
     animation: toast 4s;
}

//对话框的动画定义
@-webkit-keyframes toast {  
    8%{
        opacity: 0.8;
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    16%{
        opacity: 1;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    24%{
        opacity: 1;
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }
    32%{
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    82.5%{
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100%{
        opacity: 0;
    }
}

@keyframes toast {
    8%{
        opacity: 0.8;
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    16%{
        opacity: 1;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    24%{
        opacity: 1;
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }
    32%{
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    82.5%{
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100%{
        opacity: 0;
    }
}
Copier après la connexion

Ajouter une minuterie pour terminer l'animation de clic et l'animation de synchronisation

Tout d'abord, déterminez une zone de clic. Une fois cette zone cliquée, des bulles apparaîtront

<!--点击<・)))><|出气泡-->
<div></div>
Copier après la connexion

Fonction d'encapsulation

//随机出现的话术数组
var toastText = [
   "哈哈,早安",
   "早上吃饭了吗?",
   "好好学习,天天向上",
   "闭上眼睛,用心祈祷,努力的人有回报",
   "记得早点睡觉",
]

//计时器变量
var fishAlert;
//弹出功能函数
function textShow(aniTime,spaceTime){
    //清空计时器
    clearInterval(fishAlert);
    //解绑事件
    $("#fish-click").off("tap");
    //设置显示的文本,随机生成0-4的整数
    var random = Math.floor(Math.random() * 5);
    //展示随机生成的文本
    $("#select-toast").html(toastText[random]).addClass("toastAni");
    //4000秒后去掉动画
    setTimeout(function(){
        //去掉动画样式
        $("#select-toast").removeClass("toastAni");
        //重新绑定事件
        $("#fish-click").off("tap").on("tap",function(){
            textShow(4000,8000);
        })
        //添加8秒计时器
        fishAlert = setInterval(function(){
            //随机生成0-4的整数
            var random = Math.floor(Math.random() * 5);
            //添加动画
            $("#select-toast").html(toastText[random]).addClass("toastAni");
            setTimeout(function(){
                //动画结束后移除动画
                $("#select-toast").removeClass("toastAni");
            },aniTime)
        },spaceTime);
    },aniTime);
}
Copier après la connexion

Appel de fonction

$(document).ready(function(){
    //动画时间4000ms,间隔时间8000ms
    textShow(4000,8000);
})
Copier après la connexion

Le tout est relativement simple, donc je vais l'enregistrer ici.

Pour des effets spéciaux plus sympas, il est recommandé de visiter : Collection d'effets spéciaux Javascript !

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!

Étiquettes associées:
source:juejin.im
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!