点击出现文字效果

最新推荐文章于 2022-11-24 17:42:11 发布

闹闹没有闹

最新推荐文章于 2022-11-24 17:42:11 发布

阅读量127

点赞数

分类专栏：小demo html css 文章标签： html javascript

本文链接：https://blog.csdn.net/qq_41893686/article/details/117265229

版权

小demo 同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

html

13 篇文章 0 订阅

订阅专栏

css

6 篇文章 1 订阅

订阅专栏

代码：


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            transition: 2s;
            cursor: pointer;
        }

        span {
            font-size: 20px;
            user-select: none;
            position: absolute;
            transition: 2s;
        }

        @keyframes move {
            0% {
                opacity: 1;
                /* transform: translateY(); */
            }

            100% {
                opacity: 0;
                transform: translateY(-230px);
            }
        }
    </style>
</head>

<body>
    <script>
        function showConent(data, small) {
            let body = document.querySelector("body");
            document.onclick = function (e) {
                document.body.style.backgroundColor = styleRGB(true);

                // 创建span并且设置器距离
                let span = document.createElement("span");
                span.style.left = e.clientX + "px";
                span.style.top = e.clientY + "px";

                // 设置span内容以及颜色
                let arr = data[Math.floor(Math.random() * data.length)];
                let firstSmall = small[Math.floor(Math.random() * small.length)];
                span.style.color = styleRGB();
                span.innerHTML = firstSmall + "   " + arr;
                span.style.animation = "move 3s ";

                // 显示
                // setTimeout(function () {
                //     span.style.opacity = "1"
                //     span.style.transform = "translateY(-100px)"
                // }, 100)
                // setTimeout(function () {
                //     span.style.opacity = "0"
                //     span.style.transform = "translateY(-230px)"
                //     document.body.removeChild(span)
                //     document.body.style.backgroundColor = ""
                // }, 1500)

                // 加入body中
                document.body.appendChild(span);
                // 监听动画结束事件
                span.addEventListener('animationend',function(){
                    // debugger
                    document.body.removeChild(span)
                    body.style.backgroundColor="#ffffff"
                })
                // 颜色设置
                function styleRGB(show = false) {
                    let r = Math.floor(Math.random() * 256);
                    let g = Math.floor(Math.random() * 256);
                    let b = Math.floor(Math.random() * 256);
                    let op = Math.random().toString().substring(0, 3);
                    return `rgb${show ? "a" : ""}(${r},${g},${b}${
              show ? "," + op : ""
            })`;
                }
            };
        }

        let data = [
            "与君相逢 寒枝露正浓",
            "心生欢喜 一眼印永恒",
            "湖面秋风 廊前侧影",
            "默契借着诗与歌 托起朗朗的心声",
            "墨池有雨 我从书中来",
            "红墙白雪 岁月满苍苔",
            "一纸便签 牵我心怀",
        ];
        let small = ["*^_^*", " ^*^", " ^-^", " ^_^", " ^︵^"];

        showConent(data, small);
    </script>
</body>

</html>

闹闹没有闹

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
点击出现文字效果

代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &l.
复制链接

扫一扫