问答详情
源自:2-3 完成基本界面元素(二)

在chrome浏览器 ,没有祝福语出现的动画效果,transition:all 1s 0.5s不起作用

<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: 0px;margin: 0px;

}

body {

background: #000;

min-width: 1200px;

min-height: 600px;

-webkit-font-smoothing:antialiased;

font-family: 'WenQunYi Micro Hei',SimSun,sans-serif;

}

.main{

width: 1200px;

height: 600px;

background: #000 url(img/bg.jpg);

position: absolute;

left: 50%;

top: 50%;

margin-left: -600px;

margin-top: -300px;

overflow: hidden;

}

/*粽子盒子,所有内部元件都在这里*/

.c_zongzi_box {

width: 312px;

height: 305px;

position: absolute;

left: 700px;

top: 108px;

}

.c_zongzi {

width: 312px;

height: 305px;

background: url(img/zz.png);

}

.c_zongzi_box_rock {

-webkit-animation:rock 2s infinite;

}

.c_shengzi_1 {

width: 218px;

height: 180px;

background: url(img/line_1.png);

position: absolute;

left: 10px;

top: 120px;

}

.c_zuoye {

width: 114px;

height: 266px;

background: url(img/leaf_left.png);

position: absolute;

left: 0px;

top: -30px;

z-index: 101;

opacity: 0;

transition:all 1s;

}

/*右叶*/

.c_youye {

width: 318px;

height: 338px;

background: url(img/leaf_right.png);

position: absolute;

left:80px;

top: -60px;

z-index:111;

opacity: 0;

transition:all 1s;


}

/*底叶*/

.c_diye {

width: 618px;

height: 468px;

background: url(img/leaf_expand.png);

position: absolute;

left: -150px;

top: -45px;

z-index: 99;

opacity: 0;

transition:all 1s;

}

/*粽子肉*/

.c_zongzirou {

width: 288px;

height: 206px;

background: url(img/zzr_1.png);

background-size: 288px 206px;

position: absolute;

left: 50px;

top: 34px;

z-index: 110;

opacity: 0;

transition:all 1s;

}

/*文字*/

.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-origin:center center;

transform:scale(.8);

opacity: 0;

transition:all 1s;



}

.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-origin:center center;

transform:scale(.8);

opacity: 0;

transition:all 1s;

}


.text_in {

}

/*祝福语*/

.text {

width: 400px;

height: 370px;

position: absolute;

left: 180px;

top: 140px;

font-size: 14px;

line-height: 20px;

color: #333;

}

.text .caption {

width: 400px;

height: 240px;

background:url(img/caption.png) no-repeat;

margin-left: 40px;

opacity: 0;

transition:all 1s;


}

.text .to {

width: 400px;

margin-top: 10px;

margin-left: 40px;

opacity: 0;

transition:all 1s 5s;

}

.text .msg {

width: 400px;

margin-top: 10px;

margin-left: 40px;

opacity: 0;

transition:all 1s 1s;

}

.text .from{

width: 400px;

margin-top: 10px;

margin-left: 40px;

text-align: right;

opacity: 0;

transition:all 1s 1.5s;

}

.text_in .caption,

.text_in .to,

.text_in .msg,

.text_in .form{

opacity: 1;

margin-left: 0px;

}

</style>

<body>

<div class="main">

<div class="c_zongzi_box c_zongzi_box_rock">

<div class="c_zongzi"></div>


<div class="c_shengzi_1"></div>

<div class="c_shengzi_2"></div>

<div class="c_shengzi_3"></div>

<div class="c_shengzi_4"></div>


<div class="c_zongzirou"></div>


<div class="c_zuoye"></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">软件14级的同学们</div>

<div class="msg">希望大家喜欢web前台开发与设计课程</div>

<div class="from">小晗</div>

</div>

</div>

</div>

</body>

</html>


提问者:hanqian 2016-07-11 19:00

个回答

  • 幽倩1234
    2016-09-26 11:07:59

    你.text .to中transition: all 1s 0.5s;写的是5s