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="data:images/1.gif" height="210px" width="210px"/></li>

                <li><img src="data:images/2.gif" height="210px" width="210px"/></li>

                <li><img src="data:images/3.gif" height="210px" width="210px"/></li>

                <li><img src="data:images/4.gif" height="210px" width="210px"/></li>

                <li><img src="data:images/5.gif" height="210px" width="210px"/></li>

                <li><img src="data:images/6.gif" height="210px" width="210px"/></li>

            </ul>

        </div>

    </div>

    <!--E box -此处需要自己修改图片路径-->

    <div class = "xin">

        <img src="data:images/xin.png" width="100px" height="100px"/>

    </div>

    <div class = "xin1">

        <img src="data: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>

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

JQ + CSS实现浪漫表白必备的更多相关文章

Normalize.css – 现代 Web 开发必备的 CSS resets
Normalize.css 是一个可定制的 CSS 文件,使浏览器呈现的所有元素,更一致和符合现代标准.它正是针对只需要统一的元素样式.该项目依赖于研究浏览器默认元素风格之间的差异,精确定位需要重置的 ...
js,jq,css选择器
js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; / ...
html/京东项目/京东网页高仿/js/jq/css/java web/
登录部分HTML+CSS: <!DOCTYPE html><html> <head> <meta charset="UTF-8& ...
2018-06-28 jq CSS处理
CSS处理 1.CSS样式 css() -> 获取jq对象的css样式 css({'':"'}) ->设置jq对象的css样式相当于js对象的style()方法 2.位置 of ...
jq+css+html简单实现导航下拉菜单
相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了,直接上code. Html部分 <div class="_nav"> <ul id=&qu ...
Div+Css（一）必备知识
我只积累我不知道的参考链接 http://www.kwstu.com/ArticleView/divcss_201442291125960 http://www.kwstu.com/ArticleV ...
jq css()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
零基础入门C/C++实现你的浪漫表白：浪漫流星雨表白程序
想要讨女朋友欢心也巩固自己所学的知识,各位小伙伴有自己的想法了吗?准备好想要怎样实施了吗?有什么美好的计划了吗?如果没有的话那么别慌,我知道,在座的各位肯定都是有自己的心仪的姑娘,那么今天就教大家一招 ...
jq——css类
1 addClass(classname) 添加类 <script type="text/javascript"> $("input").clic ...

随机推荐

bug -- android 7.0 popwindow显示位置异常情况解决
android 7.0 popwindow显示位置异常,在android7.1官方进行解决了,但是还是要多7.0的bug进行解决,我的解决方案里面通过重写popwindow进行适配: import a ...
JVM 垃圾回收机制和常见算法
垃圾回收机制:释放那些不再持有引用的对象的内存. 如何判断对象是否需要回收? 引用计数:对象,内存,磁盘空间等被引用次数保存起来,次数为0时将其进行释放. 对象引用遍历:对象应用遍历从一组对象开始,沿 ...
Python常见初级错误
一.常见错误(编辑器:Geany) 1.错误原因:或因不兼容中文注释 2.错误原因:vehicles变量前面有多余的空格 3.错误原因:没有正确的缩进(indent)
VS生成事件执行XCOPY时出现Invalid num of parameters的解决方案
最近想偷懒想把项目生成的dll全部自动汇集到一个文件夹下于是乎就动用了VS的生成后事件在执行Xcopy的时候碰到了点问题 Invalid number of parameters 挺奇怪的,在公 ...
php中文网在这里给大家汇总了最热门最全面的php面试题
PHP面试题汇总视频版: 1.<最新PHP面试视频教程> http://www.php.cn/course/876.html 2.<PHP经典算法面试题> http://ww ...
Docker入门与应用系列（三）容器管理
一.启动容器启动容器有两种方式,一种是基于镜像新建一个容器并启动,另一个是将终止状态的容器重新启动. 1.1 新建并启动主要命令为 docker run 下面的命令输出一个”Hello,world ...
CSS之float样式
一.简介 Css样式的float浮动属性,用于设置标签对象(如:<div>标签盒子.<span>标签.<a>标签.<em>标签等html标签)的浮动布局 ...
K8S从私有仓库拉取镜像
通常来讲,我们在通过公共镜像仓库拉取docker镜像的时候,不需要任何的认证操作,但我们在构建了企业的私有镜像以后,就不得不在拉取镜像之前通过用户名密码来完成认证. 在docker单机环境中,我们可以 ...
P2042 [NOI2005]维护数列 && Splay区间操作（四）
到这里 $A$ 了这题, $Splay$ 就能算入好门了吧. 今天是个特殊的日子, $NOI$ 出成绩, 大佬 $Cu$ 不敢相信这一切这么快, 一下子机房就只剩我和 $zrs$ ...
Linux操作系统常见安装方式
Linux操作系统常见安装方式作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 在window操作系统安装程序只需要点点鼠标就能搞定的事情,但是在Linux操作系统中,尤其是字符终端 ...

JQ + CSS实现浪漫表白必备

JQ + CSS实现浪漫表白必备的更多相关文章

随机推荐

热门专题