在chrome浏览器 ，没有祝福语出现的动画效果，transition：all 1s 0.5s不起作用
hanqian
2016-07-11 19:00
<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>
1回答
-
- 幽倩1234
- 2016-09-26 11:07:59
你.text .to中transition: all 1s 0.5s;写的是5s
JS+CSS3实现“粽情端午”
39505 学习 · 74 问题
相似问题