                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /HTML/CSS
                        
                        /JS+CSS3實(shí)現(xiàn)“粽情端午”

粽子不能縮放怎么辦

<!doctype>
<HTML>
<head>
<title>粽情端午</title>

</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">在端午節(jié)來(lái)臨之際，我給大家送來(lái)心意，希望大家找到真正的喜樂(lè)和滿足</div>
?????????????? <div class="from">小慧</div>
????? </div>
?????
</div>
</body>
</HTML>