<!DOCTYPE html>
<html>
<head><title>粽情端午</title><meta charset="utf-8" >
</head>
<style type="text/css">@-webkit-keyframes rock{0%{ transform:rotate(0deg) }10%{ transform:rotate(3deg) }20%{ transform:rotate(-3deg) }30%{ transform:rotate(2deg) }40%{ transform:rotate(-2deg) }50%{ transform:rotate(1deg) }60%{ transform:rotate(-1deg) }70%{ transform:rotate(0deg) }100%{ transform:rotate(0deg) }}*{padding: 0;margin: 0}body{background: #000;min-width: 1200px;min-height: 600px;-webkit-font-smoothing:antialiased;font-family: 'WenQuanYi Micro Hei',Simsun, sans-serif;}.main{width: 1200px;height: 600px;background: url(bg.jpg);position: absolute;margin-left: -600px;margin-top: -300px;left: 50%;top: 50%;overflow: hidden;}.c_zongzi_box{width: 312px;height: 315px;position: absolute;left: 700px;top: 184px;}.c_zongzi_box_rock{-webkit-animation:rock 2s infinite;}.c_zongzi{width: 312px;height: 315px;background: url(zz.png);transition:all 1s;}.c_zongzi_out{opacity: 1;transform:scale(.5);}.c_shengzi_1{width: 218px;height: 180px;position: absolute;background: url(line_1.png);top: 120px;left: 10px;z-index: 999;cursor: pointer;}.c_shengzi_2{width: 219px;height: 159px;background: url(line_2.png);position: absolute;top: 158px;left:10px;}.c_shengzi_3{width: 264px;height: 117px;background: url(line_3.png);position: absolute;top: 220px;left: 10px;}.c_shengzi_4{width: 288px;height: 56px;background: url(line_4.png);position: absolute;top: 290px;left:10px;}.c_shengzi_0{display: none;}.c_zongzirou{background: url(zzr_1.png) no-repeat;background-size: 288px 206px;position: absolute;width: 288px;height: 240px;top: 50px;left: 34px;z-index: 101;opacity: 0;transform:scale(.8);transform-origin:top center;}.c_zongzirou_in{opacity: 1;transform:scale(1);}.c_zongzirou_view_1{transition:all 0;background: url(zzr_1.png) no-repeat;}.c_zongzirou_view_2{transition:all 0;background: url(zzr_2.png) no-repeat;}.c_zongzirou_view_3{transition:all 0;background: url(zzr_3.png) no-repeat;}.c_zongzirou_view_4{transition:all 0;background: url(zzr_4.png) no-repeat;}.c_zongzirou_view_0{transition:all 0;background: url(zzr_1.png) no-repeat;}.c_zuoye{background: url(leaf_left.png);width: 114px;height: 266px;position: absolute;top: -39px;left: -13px;z-index: 101;opacity: 0;transition:all 1s;transform-origin:left bottom;}.c_zuoye_in{opacity: 1;transform:rotate(-3deg);}.c_zuoye_out{opacity: 0;transform:rotate(-15deg);}.c_youye{background: url(leaf_right.png);width: 318px;height: 338px;position: absolute;top: -9px;left: 80px;z-index: 111;opacity: 0;transition:all 1s;transform:scale(.8);}.c_youye_in{opacity: 1;transform:rotate(5deg) scale(.8);}.c_youye_out{opacity: 0;transform:rotate(15deg) scale(.8);}.c_diye{background: url(leaf_expand.png);width: 618px;height: 468px;position: absolute;top: -45px;left: -150px;z-index: 99;opacity:0;transition:all 1s;}.c_diye_in{opacity: 1;}.c_t_1{width: 180px;height: 100px;background: url(t_jixiang.png);position: absolute;left: 50%;top: 50%;z-index: 200;margin-left: -70px;margin-top: -50px;opacity: 0;transform-origin:center center;transform:scale(.8);}.c_t_2{width: 180px;height: 100px;background: url(t_ruyi.png);position: absolute;left: 50%;top: 50%;z-index: 200;margin-left: -70px;margin-top: -50px;opacity: 0;transform-origin:center center;transform:scale(.8);}.c_t_in{opacity: 1;}/*文字视角*/.c_t_view_0{transition:all 0;transform:scale(.8);}.c_t_mirror_0{transition:all 0;display: none;}.c_t_view_2{transition:all 0;transform: scale(.8) rotateY(30deg) rotate(8deg) translate(-46px,-3px);}.c_t_mirror_2{transition:all 0;transform: scale(.7) rotateY(70deg) rotate(-7deg) translate(240px,25px);}/*transiton:all 0 为了让文字跟着粽子的旋转动，而自己本身不需要有任何动画效果*/.c_t_view_3{transiton:all 0;transform:scale(.65) rotateY(52deg) rotate(17deg) translate(-145px,24px);}.c_t_mirror_3{transition:all 0;transform:scale(.75) rotateY(48deg) rotate(-14deg) translate(67px,10px);}.c_t_view_4{transition:all 0;transform:scale(.5) rotateY(50deg) rotate(24deg) translate(-178px,10px);}.c_t_mirror_4{transition:all 0;transform:scale(.8) rotateY(30deg) rotate(-5deg) translate(42px,10px);}/**祝福语*/.text{position: absolute;width: 400px;height: 300px;left: 180px;top: 140px;font-size: 14px;line-height: 20px;color: #333;}.text_in{opacity: 1;}.text .caption{width: 400px;height: 240px;background: url(caption.png) no-repeat;margin-left: 40px; /*为了实现左右晃动动画*/opacity: 0;transition:all 1s;}.text .caption_rock{animation:4s rock infinite;}.text .from{width: 400px;margin-top: 10px;margin-left: 40px;text-align: right;opacity: 0;transition:all 1s 1.5s;}.text .msg{width: 400px;margin-top: 10px;margin-left: 40px;opacity: 0;transition:all 1s 1s;}.text .to{width: 400px;margin-top: 10px;margin-left: 40px;opacity: 0;transition:all 1s .5s;}.text_in .caption,.text_in .to,.text_in .msg,.text_in .from{opacity: 1;margin-left: 0px;}
</style>
<body><div class="main"><div class="c_zongzi_box" id="c_zongzi_box"><div class="c_zongzi" id="c_zongzi"></div><div class="c_shengzi_1" id="c_shengzi"></div><div class="c_zongzirou" id="c_zongzirou"></div><div class="c_zuoye" id="c_zuoye"></div><div class="c_youye" id="c_youye"></div><div class="c_diye" id="c_diye"></div><div class="c_t_1" id="c_t_1"></div><div class="c_t_2" id="c_t_2"></div></div><div class="text" id="text"><div class="caption" id="caption"></div><div class="to" style="font-size: 20px;line-height: 20px;">朋友：</div><div class="msg" style="font-size: 20px;line-height: 20px;">每一粒思念都粘连着我最真诚的想念，每一颗祝福都收藏着我采自天然的幸福，每一层快乐都包裹着我们之间的情谊不变，每一个粽子都香飘万里到你那里，致我的祝愿，端午节，致我最好的朋友，挂念。</div><div class="from" style="font-size: 20px;line-height: 20px;">杨</div></div></div>
</body>
<script type="text/javascript">/*获取id*/var g = function(id){ElementById(id);}
/*时间轴*/var TimeLine = function(){der = [];this.add = function(timeout, func, log){der.push({timeout:timeout,func:func,log:log})}this.start = function(ff){ //执行到指定的时间位置，相当于快进for(s der){(function(me){var fn = me.func;var timeout = me.timeout;var log = me.log;timeout = Math.max(timeout-(ff||0),0)setTimeout(fn, timeout);setTimeout(function(){console.log('time==',timeout,'log==',log)}, timeout);})(der[s])}}}//初始动作，场景var s1 = new TimeLine(); //构造函数//粽子展开的场景var s2 = new TimeLine();//粽子旋转var s3 = new TimeLine();/*1.粽子不停的在抖动* 2.绳子点击触发绳子事件*/s1.add(1,function(){g('c_zongzi_box').className = 'c_zongzi_box c_zongzi_box_rock';g("c_shengzi").onclick = function(){s2.start();}})//粽子展开的动作s2.add(1,function(){g('c_zongzi_box').className = 'c_zongzi_box';g('text').className = 'text text_in';})//绳子变换s2.add(100,function(){g("c_shengzi").className = 'c_shengzi_2'})s2.add(500,function(){g("c_shengzi").className = 'c_shengzi_3'})s2.add(1000,function(){g("c_shengzi").className = 'c_shengzi_4'})s2.add(1500,function(){g("c_shengzi").className = 'c_shengzi_0'})//粽叶变换s2.add(2000,function(){g("c_zongzi").className = 'c_zongzi_out';g("c_zongzirou").className = 'c_zongzirou c_zongzirou_in';g("c_zuoye").className = 'c_zuoye c_zuoye_in';g("c_youye").className = 'c_youye c_youye_in';g('c_t_1').className = 'c_t_1 c_t_in';g('c_t_2').className = 'c_t_2 c_t_mirror_0';})s2.add(3000,function(){g("c_zuoye").className = "c_zuoye c_zuoye_in c_zuoye_out";g("c_youye").className = "c_youye c_zuoye_in c_youye_out"g("c_diye").className = 'c_diye c_diye_in';s3.start();})//粽子托盘旋转动画s3.add(1000,function(){g("c_zongzirou").className = "c_zongzirou c_zongzirou_in c_zongzirou_view_1";g("caption").className = "caption caption_rock"})s3.add(1200,function(){g("c_zongzirou").className = "c_zongzirou c_zongzirou_in c_zongzirou_view_2";g('c_t_1').className ="c_t_1 c_t_in c_t_view_2";g("c_t_2").className = "c_t_2 c_t_in c_t_mirror_2";})s3.add(1400,function(){g("c_zongzirou").className = "c_zongzirou c_zongzirou_in c_zongzirou_view_3";g('c_t_1').className ="c_t_1 c_t_in c_t_view_3";g("c_t_2").className = "c_t_2 c_t_in c_t_mirror_3";})s3.add(1600,function(){g("c_zongzirou").className = "c_zongzirou c_zongzirou_in c_zongzirou_view_4";g('c_t_1').className ="c_t_1 c_t_in c_t_view_4";g("c_t_2").className = "c_t_2 c_t_in c_t_mirror_4";})s3.add(1800,function(){g("c_zongzirou").className = "c_zongzirou c_zongzirou_in c_zongzirou_view_0";g('c_t_1').className ="c_t_1 c_t_in c_t_mirror_0";g("c_t_2").className = "c_t_2 c_t_in c_t_view_0";})s3.add(3000,function(){g("c_zongzirou").className = "c_zongzirou c_zongzirou_in c_zongzirou_view_4";g('c_t_1').className ="c_t_1 c_t_in c_t_view_4";g("c_t_2").className = "c_t_2 c_t_in c_t_mirror_4";})s3.add(3200,function(){g("c_zongzirou").className = "c_zongzirou c_zongzirou_in c_zongzirou_view_3";g('c_t_1').className ="c_t_1 c_t_in c_t_view_3";g("c_t_2").className = "c_t_2 c_t_in c_t_mirror_3";})s3.add(3400,function(){g("c_zongzirou").className = "c_zongzirou c_zongzirou_in c_zongzirou_view_2";g('c_t_1').className ="c_t_1 c_t_in c_t_view_2";g("c_t_2").className = "c_t_2 c_t_in c_t_mirror_2";})s3.add(3600,function(){g("c_zongzirou").className = "c_zongzirou c_zongzirou_in c_zongzirou_view_1";g('c_t_1').className ="c_t_1 c_t_in c_t_view_0";g("c_t_2").className = "c_t_2 c_t_in c_t_mirror_0";})//每隔5秒循环一次执行s3.add(4500,function(){s3.start()})//s2.start();//图片加载器var imgs = ['zzr_2.png','zzr_3.png','zzr_4.png'];var imgs_onload = function(){imgs.pop();if (imgs.length == 0) {s1.start()};}for(s in imgs){var img = new load = imgs_onload;img.src = imgs[s];}
</script>
</html>本文发布于:2024-01-29 09:36:10，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170649217614357.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
