html5+CSS3+JS实现七夕言情功能代码


Posted in HTML / CSS onAugust 28, 2017

 因为今天8月28日就是中国的情人节—七夕,作为程序猿一枚的我就只有在家敲代码咯!但我还是有一颗脱单的心;制作了h5+css+js界面祝小伙伴们:七夕快乐

具体的功能有:

1.下雪的背景动画

2.下面的文字逐字显示,并伴有语音

3.中部的图片3d轮播

html5+CSS3+JS实现七夕言情功能代码

附上源码:

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="关键字,关键词">
  <meta name="Description" content="描述信息">
  <title>七夕快乐</title>
  <!--css 样式 层叠样式表-->
  <style type="text/css">
    *{margin:0;padding:0;}
    html,body{width:100%;height:100%;}
    body{background:url(images/3.jpg);background-size:cover;overflow:hidden;}
    /*top start*/
    .top{width:400px;height:100px;margin:60px auto;font-size:30px;font-family:"华文行楷";color:#fff;}
    /*background:-webkit-linear-gradient(45deg,#ff0000,#ff0099,#ffff00,#33ff00,#3300cc,#000000);*/
    /*end top*/
    /*box start*/
    .box{width:310px;height:310px;margin:auto;perspective:800px;}
    .box .pic{position:relative;transform-style:preserve-3d;/*搭载3d环境*/animation:play 10s linear infinite;}
    /*animation:play 速度 匀速 循环;*/
    .box ul li{list-style:none;position:absolute;top:0;left:0;}
    /*end box*/
    #text{width:500px;height:200px;margin:auto;color:#6fade1;margin:auto;font-size:24px;font-family:"方正喵呜体";}
    /*定义一个关键帧*/
    @keyframes play{
        from{transform:rotateY(0deg);}
        to{transform:rotateY(360deg);}
    }
  </style>
 </head>
 <body>
    <!--top start-->
    <div class="top">
    <!--marquee滚动标签 behaviod="alternate"碰撞-->
    <marquee behavior="alternate">时光不老 我们不散</marquee>
    </div>
    <!--end top-->
    <!--box start-->
    <div class="box">
        <div class="pic">
            <ul>
                <!--图片四要素 src路径 width height alt描述 优化-->
                <li><img src="images/1.png" width="" height="" alt="描述"></li>
                <li><img src="images/2.png" width="" height="" alt="描述"></li>
                <li><img src="images/3.png" width="" height="" alt="描述"></li>
                <li><img src="images/4.png" width="" height="" alt="描述"></li>
                <li><img src="images/5.png" width="" height="" alt="描述"></li>
                <li><img src="images/6.png" width="" height="" alt="描述"></li>
            </ul>
        </div>
    </div>
    <!--end box-->
    <div id="text"></div>
    <!--插入背景音乐-->
    <embed src="周杰伦+-+告白气球.mp3"/>
    <!--引入jQuery类库-->
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <!--下雪的动画背景 js-->
    <script type="text/javascript" src="js/trans.js"></script>
    <script>
        //拿到每一个li
        $(".pic ul li").each(function(i){
            //每一张图片的旋转角度是不相同的
            var deg=360/$(".pic ul li").size();
        //当前的li对象
        $(this).css({"transform":"rotateY("+deg*i+"deg) translateZ(216px)"});
        //调用下雪的动画
        $.fn.snow({
            minSize:10,
            maxSize:15,
            newOn:500,
            flakeColor:"#fff"
        });
    });
        var i=0;
        var str="把天上的银河截下,汇成爱情的心河,流进你的心里;把天上的鹊桥摘下,变成爱情的心桥,搭在你的心里。给你此生不变的挚爱. 七夕快乐 ! ! !";
        //语音
        var obj = $('<audio src="http://fanyi.baidu.com/gettts?lan=zh&text='+str+'&spd=5&sorce=web" autoplay></audio>');
        $("body").append(obj);
        window.onload= function typing(){
            //获取div
        var mydiv=document.getElementById("text");
        //实现逐字显示
        mydiv.innerHTML+=str.charAt(i);
        i++;
        //定时器
        var id = setTimeout(typing,100);
            //判断str显示完后清空setTimeout
            if(i==str.length){
                clearTimeout(id);
            }
        }
    </script>
 </body>
</html>

总结

以上所述是小编给大家介绍的html5+CSS3+JS实现七夕言情功能代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
浅析两列自适应布局的3种思路
May 03 HTML / CSS
CSS3制作酷炫的三维相册效果
Jul 01 HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
Jan 11 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 HTML / CSS
HTML5几个设计和修改的页面范例分享
Sep 29 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
CSS3 天气图标动画效果
Apr 06 HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 HTML / CSS
HTML中link标签属性的具体用法
May 07 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 #HTML / CSS
前端面试必备之html5的新特性
Sep 05 #HTML / CSS
html5仿支付宝密码框的实现代码
Sep 06 #HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 #HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
Sep 12 #HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 #HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 #HTML / CSS
You might like
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
改进Django中的表单的简单方法
2015/07/17 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
python函数不定长参数使用方法解析
2019/12/14 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
python生成大写32位uuid代码
2020/03/03 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
全球虚拟主机商:HostGator
2017/02/06 全球购物
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
Java中实现多态的机制
2015/08/09 面试题
大专毕业生自我评价分享
2013/11/10 职场文书
就业意向书范文
2014/04/01 职场文书
亚运会口号
2014/06/20 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
聚会通知怎么写
2015/04/23 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
python基础入门之普通操作与函数(三)
2021/06/13 Python
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript