利用css js写一个简单520祝福。

最新推荐文章于 2025-12-12 11:10:07 发布

原创最新推荐文章于 2025-12-12 11:10:07 发布 · 425 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #css #html

学习笔记专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用Bootstrap和SweetAlert创建一个简单的520主题网页，包含背景图片轮播效果及点击交互提示，适合初学者快速上手。

由于要用到bootstrap，sweetalert，需要引入它们的css文件与js文件。
因为我用的是本地的，有需要可以使用我的。

    <link href="http://520.bs666.cn:1314/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
    <link href="http://520.bs666.cn:1314/css/sweetalert.css" rel="stylesheet">
    <script src="http://520.bs666.cn:1314/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
    <script src="http://520.bs666.cn:1314/js/sweetalert.min.js"></script>

引入完之后进入正题

css：

.selector-for-some-widget {
          box-sizing: content-box;
        }
        body{
            background-image: url('img/bj1.jpeg') ;
            background-size:cover;
            background-attachment:fixed;
            background-repeat:no-repeat;
        }
        #hua{
            width:5em;
            position: fixed;
            z-index: 99;
            border-radius: 5px;
            right: 20px;
            bottom: 5em;
            transform: rotate(-15deg);
            animation: hua 2s infinite;
        }
        @keyframes hua {
            0% {
                transform: scale(1) rotate(-15deg);
            }
        
            50% {
                transform: scale(1.2) rotate(-15deg);
            }
        
            100% {
                transform: scale(1) rotate(-15deg);
            }
        }

body：

<div class="container">
    <img id="hua" src="img/hua.jpg" class="img-fluid">
</div>

js：

    var i = 1;
    var img = [];
    img[img.length]={src:"url('img/bj1.jpeg')"};
    img[img.length]={src:"url('img/bj2.jpeg')"};
    img[img.length]={src:"url('img/bj3.jpeg')"};
    img[img.length]={src:"url('img/bj4.jpeg')"};
    img[img.length]={src:"url('img/bj5.jpeg')"};
    img[img.length]={src:"url('img/bj6.jpeg')"};
    img[img.length]={src:"url('img/bj7.jpeg')"};
    img[img.length]={src:"url('img/bj8.jpeg')"};
    setInterval(function(){
        i=Math.random()*img.length;
        i=parseInt(i);
        document.body.style.backgroundImage=img[i].src;
},5000); 
    hua.onclick=function(){
        swal("520快乐✧( ु•⌄• )◞","首先祝你520快乐，我用属于我的方式来送你一个小小的520礼物，哈哈哈由于钱包空空，不能真的给你送一朵花，等我有钱了一定补上。");
    }