Heim > Web-Frontend > H5-Tutorial > Hauptteil

HTML5 implementiert eine Dialogblasen-Klickanimation

青灯夜游
Freigeben: 2020-10-23 17:10:16
nach vorne
4282 Leute haben es durchsucht

In diesem Artikel erfahren Sie, wie Sie mit HTML5 eine Dialogblasen-Klickanimation implementieren. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Anforderungen

Die Anforderungen müssen zunächst noch erarbeitet werden. Anforderungen:

  1. Die Dialogblase muss animiert sein, mit einer Gesamtanimation von 4 Sekunden
  2. Wenn kein Klick erfolgt, erscheint die Blase alle 8 Sekunden
  3. Wenn Sie darauf klicken und die Animation noch nicht abgespielt wurde, wird sie nicht ausgeführt. Wenn die Animation abgespielt wurde, erscheint sofort eine Blase

Nehmen Sie dann das fertige Bild heraus und lass es so aussehen:

HTML5 implementiert eine Dialogblasen-Klickanimation

Ideen

  1. Zuerst Blasen machen
  2. Zweitens CSS zum Animieren verwenden
  3. Timer hinzufügen, um die Klick- und Timing-Animation abzuschließen

Realisieren

Transluzente Blasenproduktion

HTML5 implementiert eine Dialogblasen-Klickanimation

HTML-Struktur

<p>闭上眼睛,用心祈祷,努力的人有回报</p>
Nach dem Login kopieren

weniger (rem-Regeln werden von Ihnen selbst konvertiert, Sie können auch px verwenden)

.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;
    }
}
Nach dem Login kopieren

Dialogbox-CSS-Animation

.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;
    }
}
Nach dem Login kopieren

Timer hinzufügen, um die Klickanimation und Timing-Animation abzuschließen

Bestimmen Sie zunächst einen Klickbereich Sobald dieser Bereich angeklickt wird, werden Blasen angezeigt

<!--点击<・)))><|出气泡-->
<div></div>
Nach dem Login kopieren

Kapselungsfunktionsfunktion

//随机出现的话术数组
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);
}
Nach dem Login kopieren

Funktionsaufruf

$(document).ready(function(){
    //动画时间4000ms,间隔时间8000ms
    textShow(4000,8000);
})
Nach dem Login kopieren

Das Ganze ist relativ einfach , also werde ich es hier aufzeichnen.

Für weitere coole Spezialeffekte empfehlen wir einen Besuch: Javascript Special Effects Collection!

Das obige ist der detaillierte Inhalt vonHTML5 implementiert eine Dialogblasen-Klickanimation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:juejin.im
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!