<!doctype>
<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;
}
.main
{
width:1200px;
height:600px;
background:#000 url(img/bg.jpg);
position:absolute;
left:50%；
top:50%；
overflow:hidden;
}
.c_zongzi_box
{
width:312px;
height:305px;
background:url(img/zz.png);
overflow:hidden;
position:absolute;
left:700px;
top:184px;
}
.c_zongzi_box_rock
{
-webkit-animation:rock 2s infinite;
}
.c_zongzi
{
width:312px;
height:305px;
background:url(img/zz.png);
transition:all 1s;
}
.c_zongzi_out
{
opacity: 1;
transform:scale(.5);
}
.c_shengzi_1
{
width:218px;
height:180px;
background:url(img/line_1.png);
position:absolute;
left:10px;
top:120px;
}
.c_shengzi_2
{
width:219px;
height:159px;
background:url(img/line_2.png);
position:absolute;
left:10px;
top:158px;
}
.c_shengzi_3
{
width:264px;
height:117px;
background:url(img/line_3.png);
position:absolute;
left:10px;
top:220px;
}
.c_shengzi_4
{
width:288px;
height:56px;
background:url(img/line_4.png);
position:absolute;
left:10px;
top:260px;
}
.c_zongzirou
{
width:288px;
height:206px;
position:absolute;
left:50px;
top:34px;
background-size:288px 206px;
background:url(img/zzr_1.png);
z-index:110;
opacity:0;
display:none;
}
.c_zuoye
{
width:114px;
height:266px;
position:absolute;
left:0px;
top:-30px;
background:url(img/leaf_left.png);
z-index:1;
opacity:0;
display:none;
}
.c_youye
{
width:318px;
height:338px;
position:absolute;
left:80px;
top:-60px;
background:url(img/leaf_right.png);
z-index:111;
opacity:0;
display:none;
}
.c_diye
{
width:618px;
height:468px;
position:absolute;
left:-150px;
top:-45px;
background:url(img/leaf_expand.png);
z-index:99;
opacity:0;
display:none;
}
.c_t_1
{
width:180px;
height:100px;
background:url(img/t_jixiang.png);
position:absolute;
left:50%;
top:50%;
margin-left:-70px;
margin-top:-50px;
z-index:200;
transform:scale(.8);
transform-origin:center center;
opacity:0;
display:none;
}
.c_t_2
{
width:180px;
height:100px;
background:url(img/t_ruyi.png);
position:absolute;
left:50%;
top:50%;
margin-left:-70px;
margin-top:-50px;
z-index:200;
transform:scale(.8);
transform-origin:center center;
opacity:0;
display:none;
}
.text
{
position:absolute;
width:400px;
height:370px;
left:180px;
top:140px;
font-size:14px;
line-height:20px;
color:#333;
opacity:0;
display:none;
transition:all 1s;
}
.text .caption
{
width:400px;
height:240px;
background:url(img/caption.png) no-repeat;
margin-left:40px;
}
.text .to
{
width:400px;
margin-top:10px;
margin-left:40px;
transition:all 1s .5s;
}
.text .msg
{
width:400px;
margin-top:10px;
margin-left:40px;
transition:all 1s 1s;
}
.text .from
{
width:400px;
margin-top:10px;
margin-left:40px;
text-align:right;
transition:all 1s 1.5s;
}
.text_in
{ display:block;
opacity:1;
}
.text_in .to,
.text_in .msg,
.text_in .from
{ opacity:1;
margin-left:0px;
}
</style>
<body>
<div class="main">
<div class="c_zongzi_box c_zongzi_box_rock">
<div class="c_zongzi c_zongzi_out"></div>
<div class="c_shengzi_1"></div>
<div class="c_zuoye"></div>
<div class="c_zongzirou"></div>
<div class="c_youye"></div>
<div class="c_diye"></div>
<div class="c_t_1"></div>
<div class="c_t_2"></div>
</div>
<div class="text text_in">
<div class="caption"></div>
<div class="to">小伙伴们</div>
<div class="msg">在端午节来临之际，我给大家送来心意，希望大家找到真正的喜乐和满足</div>
<div class="from">小慧</div>
</div>
</div>
</body>
</HTML>
去掉display：none试试