html5+CSS3+JS完成7夕言情作用编码

日期:2020-10-14 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

 由于今日8月28日便是我国的情人节—7夕,做为程序流程猿1枚的我就仅有在家敲编码咯!但我還是有1颗脱单的心;制做了h5+css+js页面祝小伙子伴们:7夕开心

实际的作用有:

1.下雪的情况动漫

2.下面的文本逐字显示信息,并伴随视频语音

3.中部的照片3d轮播

附上源代码:

<!doctype html>
<html>
 <head>
  <meta charset="UTF⑻">
  <meta name="Keywords" content="重要字,重要词">
  <meta name="Description" content="叙述信息内容">
  <title>7夕开心</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⑶d;/*搭载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:"方正喵呜体";}
    /*界定1个重要帧*/
    @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>
                <!--照片4要素 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⑴.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="把天空的星空截下,汇成感情的心河,流进你的内心;把天空的鹊桥摘下,变为感情的心桥,搭在你的内心。给你今生不会改变的至爱. 7夕开心 ! ! !";
        //视频语音
        var obj = $('<audio src="http://fanyi.baidu.com/gettts?lan=zh&amp;text='+str+'&amp;spd=5&amp;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完成7夕言情作用编码,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!

上一篇:H5仿手机微信页面实例教程(1) 返回下一篇:没有了