HTML5는 대화 풍선 클릭 애니메이션을 구현합니다.

이 글에서는 HTML5를 사용하여 대화 풍선 클릭 애니메이션을 구현하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

요구사항

아직 요구사항을 먼저 생각해내야 합니다. 요구 사항:

1. 대화 말풍선에는 애니메이션이 있어야 하며, 총 애니메이션은 4초입니다.
2. 클릭이 없으면 8초마다 풍선이 나타납니다.
3. 클릭해도 애니메이션이 끝나지 않으면 재생되지 않습니다. 애니메이션이 재생되면 바로 버블이 나옵니다

완성된 그림을 꺼내서 이렇게 만들어 보세요.

아이디어

1. 먼저 버블을 만들어 보세요
2. 두 번째로 CSS를 사용하여 애니메이션을 만듭니다.
3. 타이머를 추가하여 클릭 애니메이션과 타이밍 애니메이션을 완료합니다.

반투명 버블 생성

html 구조

<p>闭上眼睛，用心祈祷，努力的人有回报</p>

less를 달성합니다. (rem 규칙은 직접 변환하면 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;
    }
}

Dialog 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;
    }
}

타이머를 추가하여 클릭 애니메이션과 타이밍 애니메이션을 완성하세요

먼저 이 영역을 클릭하면 거품이 생깁니다.

<!--点击<・)))><|出气泡-->
<div></div>

캡슐화된 함수 function

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

Function call

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

모든 것이 상대적으로 간단하므로 여기에 기록하겠습니다. 더 멋진 특수 효과를 보려면

자바스크립트 특수 효과 컬렉션

을 방문하는 것이 좋습니다!

위 내용은 HTML5는 대화 풍선 클릭 애니메이션을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!