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实现当鼠标移进去时当前亮其他变灰效果
Apr 08 HTML / CSS
CSS+jQuery实现的在线答题功能
Apr 25 HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
html5用video标签流式加载的实现
May 20 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 21 HTML / CSS
基于CSS制作创意端午节专属加载特效
Jun 01 HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 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
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
PHP+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
js 将json字符串转换为json对象的方法解析
2013/11/13 Javascript
jquery实现保存已选用户
2014/07/21 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
详解django中自定义标签和过滤器
2017/07/03 Python
python matplotlib画图实例代码分享
2017/12/27 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
Linux内核产生并发的原因
2012/07/13 面试题
2014年新生军训方案
2014/05/01 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
写给老婆的保证书
2015/02/27 职场文书
盗窃案辩护词
2015/05/21 职场文书
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android