用JQ+CSS實(shí)現(xiàn)浪漫表白的方法是什么

用JQ + CSS實(shí)現(xiàn)浪漫表白的方法是什么？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

創(chuàng)新互聯(lián)主營(yíng)鳳縣網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都app軟件開發(fā),鳳縣h5成都微信小程序搭建,鳳縣網(wǎng)站營(yíng)銷推廣歡迎鳳縣等地區(qū)企業(yè)咨詢

JQ + CSS實(shí)現(xiàn)浪漫表白必備頁(yè)面

效果圖：

用JQ + CSS實(shí)現(xiàn)浪漫表白的方法是什么

圖片素材：

用JQ + CSS實(shí)現(xiàn)浪漫表白的方法是什么

用JQ + CSS實(shí)現(xiàn)浪漫表白的方法是什么推薦：《js高級(jí)教程》

代碼如下，復(fù)制即可使用：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浪漫表白 By：阿杜</title>

    <style type = "text/css">
        
        *{
            margin:0px;
            padding:0px;
            }
        html,body{
            height:100%;
            }    
        body{
            font-family:"微軟雅黑";　　　　　　　　<!-- 此處需要自己修改圖片路徑 -->
            background:url(images/b1j.jpg) no-repeat fixed;
            background-size:cover;
            
            }    
        .top{
            width:500px;
            height:150px;
            margin:50px auto;
            font-size:30px;
            color:#ea544d;
            }
            
        .box{
            width:310px;
            height:310px;
            margin:0px auto;
            perspective:800px;
            margin-top:-40px;
            }    
        .box .wrap{
            width:210px;
            height:210px;
            position:relative;
            transform-style:preserve-3d;
            animation:play 10s linear infinite;
            }
        .box .wrap ul li{
            list-style:none;
            position:absolute;
            top:0;left:0;
            }    
        @keyframes play{
            from{transform:rotateY(0deg);}
            to{transform:rotateY(360deg);}
            }
            
        .xin,.xin1{
            position:absolute;
            }
            
        .xin{
            animation:xin 8s linear infinite;
            }    
        @keyframes xin{
            0%{top:0%;left:50%;opacity:1;}
            20%{top:20%;left:80%;opacity:0;}
            40%{top:50%;left:50%;opacity:1;}
            60%{top:80%;left:40%;opacity:0;}
            80%{top:50%;left:20%;opacity:1;}
            100%{top:10%;left:0%;opacity:0;}
            }
            .xin1{
            animation:xin 15s linear infinite;
            }
            
        @keyframes xin1{
            0%{top:10%;right:50%;opacity:1;}
            20%{top:50%;right:80%;opacity:0;}
            40%{top:40%;right:50%;opacity:1;}
            60%{top:60%;right:40%;opacity:0;}
            80%{top:50%;right:20%;opacity:1;}
            100%{top:0%;right:0%;opacity:0;}
            }
        .text{
            width:60%;
            margin:0 auto;
            margin-top:-60px;
            font-size:20px;
            line-height:30px;
            font-weight:500;
            animation:color 10s linear infinite;
            }
        @keyframes color{
            0%{color:#039;}
            20%{color:#9C3;}
            40%{color:#6C6;}
            60%{color:#66F;}
            80%{color:#FC9;}
            100%{color:#9FF;}
            }    
                                    
    </style>
    
</head>

<body>
    
    <!--S top-->
    <div class = "top">
        <marquee behavior="alternate">Love Page By:阿杜</marquee>
    </div>
    <!--E top-->
    
    <!--S box-->
    <div class = "box">
        <div class = "wrap">　　　　　　　　<!-- 此處需要自己修改圖片路徑 -->
            <ul>
                <li><img src="images/1.gif" height="210px" width="210px"/></li>
                <li><img src="images/2.gif" height="210px" width="210px"/></li>
                <li><img src="images/3.gif" height="210px" width="210px"/></li>
                <li><img src="images/4.gif" height="210px" width="210px"/></li>
                <li><img src="images/5.gif" height="210px" width="210px"/></li>
                <li><img src="images/6.gif" height="210px" width="210px"/></li>
            </ul>
        </div>
    </div>
    <!--E box -此處需要自己修改圖片路徑-->
    <div class = "xin">
        <img src="images/xin.png" width="100px" height="100px"/>
    </div>
    
    <div class = "xin1">
        <img src="images/xin.png" width="100px" height="100px"/>
    </div>
    
    <div class = "text">
        <p id = "test"></p>
    </div>　　　　<!-- 此處需要自己修改音頻路徑 -->
    <embed src="sound/bg.mp3" hidden="true"/>
    <!-- 此處需要自己修改JQ路徑 -->
    <script type = "text/javascript" src="js/jquery.min.js"></script>
    
    <script type = "text/javascript">
        
        $(function(){
            
            $(".wrap ul li").each(function(i){
                    var Deg = 360/$(".wrap ul li").size();
                    $(this).css({
                        "transform":"rotateY("+Deg*i+"deg) translateZ(220px)"
                    });
                
                });
            });
            
            window.onload = function autoplay(){
                var b = ['能夠遇見你，對(duì)我來說是最大的幸福。有了你，我的生活變的無限寬廣，有了你，世界變得如此迷人。你是世界，世界是你。我愿意用自己的心，好好的陪著你，愛著你。陪你到你想去的地方，用心走完我們?nèi)松挠嘞碌穆贸獭Ｔ谖磥淼娜兆永?，也許什么都無法確定，但唯一可以確定的是，我愛的人是你，無論現(xiàn)在還是將來，我想我這里都會(huì)是你最溫暖的港灣，都是為你遮風(fēng)避雨的城墻。無論狂風(fēng)，無論暴雨。我都會(huì)陪在你的身旁，讓你不會(huì)感到絲毫的擔(dān)心和惶恐。我會(huì)珍惜和你在一起的每一刻，每一分，每一秒。誰叫你是我最愛的人，誰叫你是第二幸福的人（因?yàn)閻凵纤闶亲钚腋５牧?，哈哈）。為了你，我愿用自己的雙手為你撐起一片艷陽！'];
                //  分隔字符串
                var str = b.join(""),i=0,arr = str.split('');
                
                var ms_stop = setInterval(function(){
                //  設(shè)置自動(dòng)出現(xiàn)文字
                    if(i>str.length-1){
                        i = 0;
                        document.getElementById('test').innerHTML='';
                        }
                        document.getElementById('test').innerHTML=document.getElementById('test').innerHTML+arr[i];
                        i++;
                    },200);
            }
            
    </script>
</body>
</html>

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)用JQ + CSS實(shí)現(xiàn)浪漫表白的方法是什么大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文題目：用JQ+CSS實(shí)現(xiàn)浪漫表白的方法是什么
地址分享：http://bm7419.com/article44/phdsee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、ChatGPT、微信公眾號(hào)、搜索引擎優(yōu)化、網(wǎng)站營(yíng)銷、App開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容