jq 设置margin_用JQ + CSS实现浪漫表白必备

最新推荐文章于 2022-10-18 12:03:18 发布

weixin_40004051

最新推荐文章于 2022-10-18 12:03:18 发布

阅读量89

点赞数

文章标签： jq 设置margin

本文链接：https://blog.csdn.net/weixin_40004051/article/details/113454262

版权

这篇博客分享了一个利用JQuery、CSS3和JavaScript实现的浪漫表白页面，包含3D旋转动画效果。通过HTML结构、CSS样式和JavaScript代码的详细展示，展示了如何创建一个动态的心形图案和滚动的文字表达爱意，同时背景音乐增强了情感氛围。

摘要由CSDN通过智能技术生成

php中文网最新课程

每日17点准时技术干货分享

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

效果图：

图片素材：

推荐：《js高级教程》

代码如下，复制即可使用：

<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>            <div class = "top">        <marquee behavior="alternate">Love Page By:阿杜marquee>    div>                <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>        <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"/>        <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>