Home > Article > Web Front-end > jQuery + CSS realizes romantic confession! (with code)

jQuery + CSS realizes romantic confession! (with code)

青灯夜游forward: 2020-06-30 10:02:132788browse

This article will introduce to you the necessary page to use jQuery CSS to realize romantic confession. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

JQ CSS necessary page to realize romantic confession

Rendering:

jQuery + CSS realizes romantic confession! (with code)

Picture material:

jQuery + CSS realizes romantic confession! (with code)

#The code is as follows, copy and use:

<!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 = [&#39;能够遇见你，对我来说是最大的幸福。有了你，我的生活变的无限宽广，有了你，世界变得如此迷人。你是世界，世界是你。我愿意用自己的心，好好的陪着你，爱着你。陪你到你想去的地方，用心走完我们人生的余下的旅程。在未来的日子里，也许什么都无法确定，但唯一可以确定的是，我爱的人是你，无论现在还是将来，我想我这里都会是你最温暖的港湾，都是为你遮风避雨的城墙。无论狂风，无论暴雨。我都会陪在你的身旁，让你不会感到丝毫的担心和惶恐。我会珍惜和你在一起的每一刻，每一分，每一秒。谁叫你是我最爱的人，谁叫你是第二幸福的人（因为爱上她你是最幸福的了，哈哈）。为了你，我愿用自己的双手为你撑起一片艳阳！&#39;];
                //  分隔字符串
                var str = b.join(""),i=0,arr = str.split(&#39;&#39;);
                
                var ms_stop = setInterval(function(){
                //  设置自动出现文字
                    if(i>str.length-1){
                        i = 0;
                        document.getElementById(&#39;test&#39;).innerHTML=&#39;&#39;;
                        }
                        document.getElementById(&#39;test&#39;).innerHTML=document.getElementById(&#39;test&#39;).innerHTML+arr[i];
                        i++;
                    },200);
            }
            
    </script>
</body>
</html>

If you have better ideas or more functions, you can share them with us. If there are any errors, please contact me Correction, thank you very much! ! !

More cool CSS3, html5, javascript, jQuery special effects codes, all in:

js special effects collection

The above is the detailed content of jQuery + CSS realizes romantic confession! (with code). For more information, please follow other related articles on the PHP Chinese website!

JavaScript html5 jquery css css3 JS

Statement：

This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Detailed explanation of the usage of JS recursionNext article：Detailed explanation of the usage of JS recursion

See more

jQuery + CSS realizes romantic confession! (with code)

Related articles