子比-公告弹窗样式美化

2024-9-14

前言

我们经常逛别人的网站，有些网站的美化效果特别好看，那么我们如何实现呢？其实很简单，只需一句代码即可实现。请看下面的教程。

代码部署

自己在弹窗内容里面添加代码即可。

<html>
    <body>
<!--文本-->
<a href="https://www.3ip.cn" rel="external nofollow"  target="_blank"  title="吾爱博客">
    <img style="display: inline-block; width: 100%; max-width: 100%; height: auto;border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;" src="https://img.wiiuii.cn/WP-TUTU/%E9%A6%96%E9%A1%B5%E5%85%AC%E5%91%8A%E5%9B%BE/ttvvg.gif">
</a>
        <div class="text_body" style="padding-bottom: 30px;">
            <div class="text" id="container" style="font-weight:bold;">
                欢迎光临寒舍！吾爱博客(39IP.CN),分享丰富网络资源。提供实用工具软件、VM虚拟机,涵盖手游、UI素材等。还有WordPress指南、主题、插件,及Windows优化系统下载。与您共探互联网和技术的变革。
            </div>
        </div>
<!--文本结束-->
<script type="text/javascript">
var text = $("#container").text().trim();
        $("#container").html("");
        for(var i = 0;i < text.length;i++){
            $("#container").append("<span>"+text[i]+"</span>")
        }
        var s = 0;
        var tim = setInterval(function(){
            $("#container span").eq(s++).css("color",getColor()).show();
            if(s == text.length){
                clearInterval(tim)
            }
        }, 100)
        function getColor(){
            return "rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
        }
        </script>
    </body>
</html>

阅读剩余

九月 14