HTML+CSS+JS實作 ??love520愛心表白??

🍅 作者主頁：Java李楊勇

🍅 簡介：Java領域優質創作者🏆、【java李楊勇】公號作者? 簡歷模板、學習資料、面試題庫、技識訓助【關注我，都給你】

🍅 歡迎點贊 👍 收藏 ?留言 📝

效果演示： 文末獲取原始碼

代碼目錄：

主要代碼實作：

主頁展示：

CSS樣式：

* {
            margin: 0;
            padding: 0;
        }

        body {
            background: url("images/1.jpg");
            background-size: cover;
        }

        /*start top*/

        .top {
            width: 400px;
            height: 100px;
            margin: 60px auto;
            font-size: 30px;
            font-family: "華文行楷";
            color: #fff;
            < !--background: -webkit-linear-gradient(45deg, #ff0000, #ffcc00, #ffff99, #33ccff, #00ff33, #6600ff, #333399);
            -webkit-background-clip: text;
            -->
        }

        /*end top*/

        /*start box*/

        .box {
            width: 310px;
            height: 310px;
            margin: auto;
            perspective: 800px;
            /*景深*/
        }

        .box .pic {
            position: relative;
            transform-style: preserve-3d;
            /*3d環境*/
            animation: play 10s linear infinite;
            /*影片名稱 執行時間 勻速 無限執行*/
        }

        .box ul li {
            list-style: none;
            position: absolute;
            top: 0;
            left: 0;
        }

        /*start box*/

        /*定義一個關鍵幀*/

        @keyframes play {
            from {
                transform: rotateY(0deg);
            }
            to {
                transform: rotateY(360deg);
            }
        }

        /*start text*/

        #text {
            width: 500px;
            height: 200px;
            color: #6fade1;
            margin: auto;
            font-size: 24px;
            font-family: "方正喵嗚體";
        }

        /*end text*/
    </style>

HTML代碼 :

圖片替換成自己喜歡的

 <!--start top-->
    <div class="top">
        <marquee behavior="alternate">時光不老，我們不散</marquee>
    </div>
    <!--end top-->
    <!--start box-->
    <div class="box">
        <div class="pic">
            <ul>
                <li><img src="images/1.png" width="" height="" alt="" /></li>
                <li><img src="images/2.png" width="" height="" alt="" /></li>
                <li><img src="images/3.png" width="" height="" alt="" /></li>
                <li><img src="images/4.png" width="" height="" alt="" /></li>
                <li><img src="images/5.png" width="" height="" alt="" /></li>
                <li><img src="images/6.png" width="" height="" alt="" /></li>
            </ul>
        </div>
    </div>

javaScript實作 :

 <script src="js/jquery.min.js"></script>
    <!--雪花-->
    <script src="js/snow.js"></script>
    <script>
        $(".pic ul li").each(function(i) { //遍歷
            var deg = 360 / $(".pic ul li").size(); //size個數
            //當前的li物件 添加css樣式
            $(this).css({
                "transform": "rotateY(" + deg * i + "deg) translateZ(216px)"
            });

            $.fn.snow({
                minSize: 10,
                maxSize: 15,
                newOn: 500,
                flakeColor: "#ffffff"
            });
        });

        var i = 0;
        var str = "能夠遇見你是我最大的幸運，有了你生活變得豐富多彩，有了你，世界變得如此迷人；你是我的世界，我的世界是你，對我來說，不是在最美好的時光遇見了你，而是遇見你后都是最美好的時光！";

        window.onload = function typing() {
            //獲取div
            var mydiv = document.getElementById("text");
            mydiv.innerHTML += str.charAt(i);
            i++;
            var id = setTimeout(typing, 100);
            if (i == str.length) {
                clearTimeout(id);
            }
        }
    </script>

作品來自于網路收集、侵權立刪

獲取完整原始碼：

大家點贊、收藏、關注、評論啦 、查看👇🏻👇🏻👇🏻微信公眾號獲取👇🏻👇🏻👇🏻

打卡 文章 更新 61/ 100天

專欄推薦閱讀訂閱：

java畢設專案精品實戰案例《100套》

web前端期末大作業網頁實戰《100套》

HTML5+CSS網頁特效實戰分享《100套》