用JQ + CSS实现浪漫表白必备

发布日期:2020年8月25日 22:28 星期二

  • 正文内容
  • 相关推荐

JQ + CSS实现浪漫表白必备页面

 

效果图:

图片素材 :

用JQ + CSS实现浪漫表白必备

代码如下,复制即可使用:

<!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 = ['能够遇见你,对我来说是最大的幸福。有了你,我的生活变的无限宽广,有了你,世界变得如此迷人。你是世界,世界是你。我愿意用自己的心,好好的陪着你,爱着你。陪你到你想去的地方,用心走完我们人生的余下的旅程。在未来的日子里,也许什么都无法确定,但唯一可以确定的是,我爱的人是你,无论现在还是将来,我想我这里都会是你最温暖的港湾,都是为你遮风避雨的城墙。无论狂风,无论暴雨。我都会陪在你的身旁,让你不会感到丝毫的担心和惶恐。我会珍惜和你在一起的每一刻,每一分,每一秒。谁叫你是我最爱的人,谁叫你是第二幸福的人(因为爱上她你是最幸福的了,哈哈)。为了你,我愿用自己的双手为你撑起一片艳阳!'];

                //  分隔字符串

                var str = b.join(""),i=0,arr = str.split('');

                 

                var ms_stop = setInterval(function(){

                //  设置自动出现文字

                    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>

如果您有更好的点子或更多的功能,可以和我们大家一起分享哦,如有错误,欢迎联系我改正,非常感谢!!!

趣乐分享-趣乐资源网
如有密码均为:www.itql.cn
学到东西应该懂得感恩作者 无脑喷子永封IP段+删帐号所有评论
本站资源软件和源码 文章大部分为网上收集,如侵犯您的权利,请告知管理员,我们会及时删除,并向您赔礼道歉.

站长QQ:209993299  

作者资料
描述: 90后草根站长!不忘初心,方得始终!

本文标签:

文章标题:用JQ + CSS实现浪漫表白必备

文章链接:https://www.itql.cn/post-3282.html

版权声明:若无特殊注明,本文皆为《钱哆哆》原创,转载请保留文章出处。