HTML5实现对话气泡动画方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5实现对话气泡点击动画</title>
    <style type="text/css">
    .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;

       }

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

    }

}
    </style>
    <script type="text/javascript" src="https://www.php.cn/static/js/jquery.min.js"> </script>
</head>
<body>
    <p class="select-toast" id="select-toast">测试数据</p>
    <div class="fish-click" id="fish-click">点击</div>
</body>
<script type="text/javascript">
    
    //随机出现的话术数组

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);

}
$(document).ready(function(){

    //动画时间4000ms,间隔时间8000ms

    textShow(4000,8000);

})
</script>
</html>

 

HTML5实现对话气泡动画方法

上一篇:js深浅拷贝


下一篇:CSS 数字