html5七夕情人节主题动画页面特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

7 27 10



特效描述:七夕情人节 主题动画页面。html5基于canvas制作七夕情人节主题表白动画页面。3D正方体图片相册拖拽,雪花背景,video背景音乐,点击左上角可以开启,切换音乐。

代码结构

1. 引入CSS

<link rel="stylesheet" href="./css/iconfont.css">
<link rel="stylesheet" href="./css/t.css">

2. 引入JS

<script src="./js/jquery.min.js"></script>
<script src="./js/TweenMax.min.js"></script>
<script src="./js/script.js"></script>
<script src="./js/snow.js"></script>

3. HTML代码

    <canvas id="c">
    </canvas>
    <div class="snowback">
        <div class="ziti" id="ziti">
            <span id="world">山有木兮木有枝,心悦君兮君不知</span>
        </div>
        <div class="main">
            <div class="box">
                <ul class="zhoxian1">
                    <li class="small idv1"><img src="./image/img/111.jpg" alt=""></li>
                    <li class="small idv2"><img src="./image/img/222.jpg" alt=""></li>
                    <li class="small idv3"><img src="./image/img/333.jpg" alt=""></li>
                    <li class="small idv4"><img src="./image/img/444.jpg" alt=""></li>
                    <li class="small idv5"><img src="./image/img/555.jpg" alt=""></li>
                    <li class="small idv6"><img src="./image/img/666.jpg" alt=""></li>
                </ul>
            </div>
            <div class="box-biger">
                <ul class="zhoxian2">
                    <li class="biger idv7"><img src="./image/img/111.jpg" alt=""></li>
                    <li class="biger idv2"><img src="./image/img/222.jpg" alt=""></li>
                    <li class="biger idv3"><img src="./image/img/333.jpg" alt=""></li>
                    <li class="biger idv4"><img src="./image/img/444.jpg" alt=""></li>
                    <li class="biger idv5"><img src="./image/img/555.jpg" alt=""></li>
                    <li class="biger idv12"><img src="./image/img/666.jpg" alt=""></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="btn btnonlond" onClick="biggen()">
        <img class="btnimg" src="./image/mypic.gif" alt="">
    <div class="hiddenbox">
        <div class="audiobox">
            <audio class="myaudio" src="./music/mp3/pygh.mp3" autoplay controls loop></audio>
        </div>
        <input type="text" placeholder="请输入音乐名称">
        <div class="btn inpbtn" onClick="inpbtnc()">放这个</div>
    </div>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: html5动画导航菜单 html5图片动画 html5文字动画 html5表情动画 html5线条动画 html5飘落动画 html5光标动画 html5悬停动画 加载动画 html5弹窗动画 html5动画h5动画 html5按钮动画

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到