网页背景（点击出现文字）

最新推荐文章于 2021-06-15 14:46:09 发布

程佳豪

最新推荐文章于 2021-06-15 14:46:09 发布

阅读量251

点赞数

原文链接：https://blog.csdn.net/qq_43271452/article/details/86625370

版权

网页背景（点击出现文字）

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CanvasDemo</title>
    <style>
        body{
            width: 100%;
            height: 100%;
            animation: shake-it .5s reverse infinite;
            overflow: hidden;
        }

        /*给文字添加类似于抖音的那种抖动效果*/
        @keyframes shake-it {
            0%{
                text-shadow:0 0 rgba(0,255,255,.5), 0 0 rgba(255,0,0,.5);
            }
            12.5%{
                text-shadow:-1px 0 rgba(0,255,255,.5), 1px 0 rgba(255,0,0,.5);
            }
            25%{
                text-shadow:-2px 0 rgba(0,255,255,.5), 2px 0 rgba(255,0,0,.5);
            }
            37.5%{
                text-shadow:-1px 0 rgba(0,255,255,.5), 1px 0 rgba(255,0,0,.5);
            }
            50%{
                text-shadow: -5px 0 rgba(0,255,255,.5), 3px 0 rgba(255,0,0,.5);
            }
            100%{
                text-shadow: 3px 0 rgba(0,255,255,.5), 5px 0 rgba(255,0,0,.5) ;
            }
        }

    </style>
</head>
<body>
</body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
    //定义获取词语下标
    var a_idx = 0;
    $(function() {
        $("body").click(function(e) {
            //需要显示的词语
            var a = new Array("$model","$row", "$items", "$lastTime","$data", "$param", "$pages","$count","$mow","$uid","$access_token","$tuid");
            //设置词语给span标签
            var $i = $("<span/>").text(a[a_idx]);
            //下标等于原来下标+1  余 词语总数
            a_idx = (a_idx + 1)% a.length;
            //获取鼠标指针的位置，分别相对于文档的左和右边缘。
            //获取x和y的指针坐标
            var x = e.pageX, y = e.pageY;
            //在鼠标的指针的位置给$i定义的span标签添加css样式
            $i.css({"z-index" : 999,
                "top" : y - 20,
                "left" : x,
                "position" : "absolute",
                "font-weight" : "bold",
                "color" : color16()
            });
            //在body添加这个标签
            $("body").append($i);
            //animate() 方法执行 CSS 属性集的自定义动画。
            //该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
            //详情请看http://www.w3school.com.cn/jquery/effect_animate.asp
            $i.animate({
                //将原来的位置向上移动180
                "top" : y - 180,
                "opacity" : 0
                //1500动画的速度
            }, 1500, function() {
                //时间到了自动删除
                $i.remove();
            });
        });
    });
    function color16(){//十六进制颜色随机
        var r = Math.floor(Math.random()*256);
        var g = Math.floor(Math.random()*256);
        var b = Math.floor(Math.random()*256);
        var color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
        return color;
    }
</script>
</html>

程佳豪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页背景（点击出现文字）

网页背景（点击出现文字）<!DOCTYPE><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CanvasDemo...
复制链接

扫一扫