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

Posted 2021-05-20 萌新北笙

由于要用到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礼物，哈哈哈由于钱包空空，不能真的给你送一朵花，等我有钱了一定补上。");
    }

演示站：http://520.bs666.cn:1314/
写的十分简单，大佬们勿喷。