放大缩小有点变形, 这也是作为一个初学者我自己写任何项目的一个错误点, 始终解决不了! 希望大家提提意见!
代码片段 1
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <meta charset="utf-8"/>
- <style>
- .box{background-color: #A10101;width:650px ;height:220px ;margin: 80px auto;}
- div{border: 0px;}
- .style1{width: 190px;height: 200px;float: left;}
- .style1{margin-left: 20px; text-align:right;line-height:200px;color: white;font-family:monospace;font-size: 30px;}
- .style2{width: 120px;height: 200px;float: left;}
- .style2{margin-left: 20px; line-height:200px;color: white;font-family:monospace;font-size:25px}
- .tianmao{width:300px ;height:200px;float: left;/*background-color: blue; */}
- /* 以上 logo 文字和店招大小处理部分 */
- .ear{border-bottom: 30px solid #A10101; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width:40px;border-radius: 0%;margin-left: 15px;position: relative;top:40px;transform: rotate(180deg);
- -webkit-transform: rotate(180deg); /* Safari and Chrome */
- -o-transform: rotate(180deg); /* Opera */
- -moz-transform: rotate(180deg); /* Firefox */}
- .tianmao-head{width:130px;height:55px ;border-radius:18%;background-color:#221E1F;margin:15px 0px 0px 20px;}
- /* 以上耳朵部分头的部分 */
- .left-eye,.right-eye{width:45px;height:27px ;float: left;margin-top: 27px;}
- .left-eye{border-radius:0% 0% 0% 18%; }
- .right-eye{border-radius:0% 0% 18% 0%;}
- .yuan1{width:27px ;height:27px ;background-color: white;border-radius: 50%;margin-left: 10px;}
- .yuan2{width:11px ;height:27px ;background-color: #221E1F;border-radius: 50%;margin-left:8px;}
- .mouth-nose{width:40px;height:27px ;float: left;margin-top:27px;z-index: 2;position: relative;}
- /* 以上眼睛部分 */
- .nose{width: 0;
- height: 0;
- border-left: 10px solid transparent;
- border-right: 10px solid transparent;
- border-top: 10px solid white;border-radius: 40%;margin-left: 10px;margin-top: 4px; }
- .mouth{width:10px ;height:10px ;border-radius: 50%;border: 2px solid white;float: left;position: relative;left: 8px;}
- .mouth-style1{width:40px ;height:10px ;background-color:#221E1F;position: absolute;right:0px;bottom:5px; }
- /*.yuan3{width:40px ;height:38px ;border-radius: 50px;background-color:#221E1F;position: absolute;left:426px;top:150px;}*/
- /* 以上嘴鼻子颈部分 */
- .body1{width:25px;height:80px ;background-color:#221E1F;margin-left: 73px;}
- .shou1,.shou2{width: 0;
- height: 0;
- border-top: 10px solid #221E1F;
- border-right: 40px solid transparent;}
- .shou1{position: relative;left:90px;bottom:51px;transform: rotate(30deg);
- -ms-transform: rotate(30deg); /* IE 9 */
- -webkit-transform: rotate(30deg); /* Safari and Chrome */
- -o-transform: rotate(30deg); /* Opera */
- -moz-transform: rotate(30deg); /* Firefox */ }
- .shou2{transform: rotateY(180deg);
- -webkit-transform: rotateY(180deg); /* Safari 和 Chrome */
- -moz-transform: rotateY(180deg); /* Firefox */
- -webkit-transform: rotate(160deg);
- -o-transform: rotate(160deg);
- -moz-transform: rotate(160deg);
- position: relative;left:39px;bottom:65px;}
- .jiao1,.jiao2{width: 0;
- height: 0;
- border-top: 10px solid #221E1F;
- border-right: 40px solid transparent;
- transform: rotate(90deg);
- -ms-transform: rotate(90deg); /* IE 9 */
- -webkit-transform: rotate(90deg); /* Safari and Chrome */
- -o-transform: rotate(90deg); /* Opera */
- -moz-transform: rotate(90deg); /* Firefox */
- }
- .jiao1{
- position: relative;left:73px;bottom:6px;
- }
- .yuan4{-webkit-transform: rotateY(180deg);
- -o-transform: rotateY(180deg);
- -moz-transform: rotateY(180deg);
- }
- .jiao2{position: relative;left:202px;bottom:16px;
- }
- </style>
- </head>
- <body>
- <div class="box"><!-- 天猫 logo 整块 start-->
- <div class="style1"> 天猫 </div>
- <div class="style2">TMALL.COM</div>
- <div class="tianmao"><!-- 天猫卡通 LOGO start-->
- <div class="ear"></div>
- <div class="tianmao-head"><!-- 天猫头部部分 -->
- <div class="left-eye">
- <div class="yuan1">
- <div class="yuan2"></div>
- </div>
- </div><!-- 左眼部分 -->
- <!--<div class="yuan3"></div>-->
- <div class="mouth-nose">
- <div class="nose"></div>
- <div class="mouth"> </div>
- <div class="mouth"> </div>
- <span class="mouth-style1"></span>
- </div><!-- 嘴鼻子部分 -->
- <div class="right-eye">
- <div class="yuan1">
- <div class="yuan2"></div>
- </div>
- </div><!-- 右眼部分 -->
- </div>
- <div class="tianmao-body"><!-- 天猫身体部分 -->
- <div class="body1"></div>
- <div class="shou1"></div>
- <div class="shou2"></div>
- </div>
- <div class="jiao1"></div>
- <div class="yuan4">
- <div class="jiao2"></div>
- </div>
- </div><!-- 天猫卡通 LOGO end-->
- </div><!-- 天猫整块 logoend-->
- </body>
- </html>
来源: http://www.qdfuns.com/article/13579/e060fac012a9cf002737b4f3d97a97ea.html