jQuery + CSS实现浪漫表白！（附代码）-js教程-PHP中文网

首页

web前端

js教程

jQuery + CSS实现浪漫表白！（附代码）

青灯夜游

Jun 30, 2020 am 10:02 AM

css jquery

本篇文章给大家介绍一下使用jQuery + CSS实现浪漫表白必备页面。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

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

效果图：

jQuery + CSS实现浪漫表白！（附代码）

图片素材：

jQuery + 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 = [&#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>

登录后复制

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

更多炫酷CSS3、html5、javascript、jQuery特效代码，尽在：js特效大全

以上是jQuery + CSS实现浪漫表白！（附代码）的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7356

Java教程

1628

CakePHP 教程

1353

Laravel 教程

1265

PHP教程

1214

显示更多

Related knowledge

vue中placeholder是什么意思 May 07, 2024 am 09:57 AM

在 Vue.js 中，placeholder 属性指定输入元素的占位符文本，当用户未输入内容时显示，提供输入提示或示例，提高表单可访问性。其用法为在输入元素中设置 placeholder 属性，并可使用 CSS 自定义外观。最佳实践包括与输入相关、简短清晰、避免默认文本，并考虑可访问性。

js中span是什么意思 May 06, 2024 am 11:42 AM

span 标签可为文本添加样式、属性或行为，用于：添加样式，如颜色、字体大小。设置属性，如 id、class 等。关联行为，如点击、悬停等。标记文本，以便进一步处理或引用。

js中rem是什么意思 May 06, 2024 am 11:30 AM

CSS 中的 REM 是一种相对于根元素（html）字体大小的相对单位。它具有以下特点：相对根元素字体大小，不受父元素影响。当根元素字体大小改变时，使用 REM 的元素也会相应调整。可用于任何 CSS 属性。使用 REM 的优点包括：响应性：保持不同设备和屏幕大小上的文本可读性。一致性：确保整个网站字体大小一致。可扩展性：通过调整根元素字体大小轻松更改全局字体大小。

vue中引入图片的方法 May 02, 2024 pm 10:48 PM

Vue 中引入图片有五种方法：通过 URL、require 函数、静态文件、v-bind 指令和 CSS 背景图片。可以在 Vue 的计算属性或侦听器中处理动态图片，并使用打包工具优化图片加载。确保路径正确，否则会显示加载错误。

js中什么是节点 May 07, 2024 pm 09:06 PM

节点是 JavaScript DOM 中表示 HTML 元素的实体。它们代表页面中的特定元素，可用于访问和操作该元素。常见的节点类型包括元素节点、文本节点、注释节点和文档节点。通过 DOM 方法（如 getElementById()），可以访问节点并对其进行操作，包括修改属性、添加/移除子节点、插入/替换节点和克隆节点。节点遍历有助于在 DOM 结构中导航。节点在动态创建页面内容、事件处理、动画和数据绑定方面非常有用。