绘制HTML5的Logo
一、HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 logo</title> <!--链入式样式表--> <link rel="stylesheet" href="logo.css" type="text/css"> </head> <body> <div class="bg"> <!--每一束的白色光束div盒子，transform:rotate(5deg)代表围绕中心点旋转5度--> <div class="beam" style="transform: rotate(5deg)"></div> <div class="beam" style="transform: rotate(15deg)"></div> <div class="beam" style="transform: rotate(25deg)"></div> <div class="beam" style="transform: rotate(35deg)"></div> <div class="beam" style="transform: rotate(45deg)"></div> <div class="beam" style="transform: rotate(55deg)"></div> <div class="beam" style="transform: rotate(65deg)"></div> <div class="beam" style="transform: rotate(75deg)"></div> <div class="beam" style="transform: rotate(85deg)"></div> <div class="beam" style="transform: rotate(95deg)"></div> <div class="beam" style="transform: rotate(105deg)"></div> <div class="beam" style="transform: rotate(115deg)"></div> <div class="beam" style="transform: rotate(125deg)"></div> <div class="beam" style="transform: rotate(135deg)"></div> <div class="beam" style="transform: rotate(145deg)"></div> <div class="beam" style="transform: rotate(155deg)"></div> <div class="beam" style="transform: rotate(165deg)"></div> <div class="beam" style="transform: rotate(175deg)"></div> <!--以上为白色光束--> <!--中心盒子--> <div style="top: 120px;left: 229px;position: absolute"> <!--左盾牌--> <div class="d_shield1"></div> <div class="d_shield2"></div> <div class="d_shield3"></div> <!--右盾牌--> <div class="d_shield4"></div> <div class="d_shield5"></div> <div class="d_shield6"></div> <!--浅橘色部分,transform:scale()为缩放--> <!--该盒子内的元素都会进行自动缩放--> <div style="transform: scale(0.82);left: 31px;top: 25px;position: absolute"> <div class="r_shield1"></div> <div class="r_shield2"></div> <div class="r_shield3"></div> </div> <!--logo中数字5的左边部分--> <div class="gray1"></div> <div class="gray2"></div> <div class="gray3"></div> <div class="gray4"></div> <!--logo中数字5的右边部分--> <div class="white1"></div> <div class="white2"></div> <div class="white3"></div> <div class="white4"></div> <!--数字5最后的修改--> <div class="d_shield7"></div> <div class="r_shield4"></div> </div> <!--HTML图片--> <!--<img class="img" src="HTML.png">--> <!--上面的语句在CSS中用.img--> <img src="HTML.png"> </div> </body> </html>
二、CSS代码
body{ margin: 0px;/*外边距*/ padding: 0px;/*内边距*/ } .bg{ position: relative;/*相对定位*/ } .bg{ width: 800px; height: 600px; background-color: #f2f2f2; overflow: hidden; } .beam{ width: 1600px; height: 20px; top: 290px;/*绝对定位，距父元素上边线290px*/ left: -400px;/*绝对定位，距父元素左边线290px*/ background-color: white; position: absolute;/*绝对定位*/ } .d_shield1,.d_shield2,.d_shield3,.d_shield4,.d_shield5,.d_shield6,.d_shield7{ background: #e15016; position: absolute; } .d_shield1{ left: 32px; width: 140px; height: 346px; } .d_shield2{ transform: skewX(5deg); /*水平斜切5度*/ left: 16px; width: 100px; height: 346px; } .d_shield3{ transform: skewY(15deg);/*垂直斜切15度*/ top: 265px; left: 32px; width: 140px; height: 100px; } .d_shield4{ left: 172px; width: 140px; height: 346px; } .d_shield5{ transform: skewX(-5deg); left: 227px;/*没算出来227，浏览器调试出来的数字*/ width: 100px; height: 346px; } .d_shield6{ transform: skewY(-15deg); top: 265px; left: 172px; width: 140px; height: 100px; } .r_shield1,.r_shield2,.r_shield3,.r_shield4{ background-color: #ee6812; position: absolute; } .r_shield1{ left: 172px; width: 140px; height: 346px; } .r_shield2{ transform: skewX(-5deg); left: 227px; width: 100px; height: 363px; } .r_shield3{ transform: skewY(-15deg); top: 282px; left: 172px; width: 140px; height: 100px; } .gray1,.gray2,.gray3,.gray4{ background-color: #ebebeb; position: absolute; } .gray1{ height: 43px; width: 102px; left: 70px; top: 70px; } .gray2{ transform: skewX(5deg); width: 46px; height: 216px; top: 70px; left: 75px; } .gray3{ width: 95px; height: 43px; left: 77px; top: 156px; } .gray4{ transform: skewY(15deg); width: 87px; height: 47px; left: 85px; top: 251px; } .white1,.white2,.white3,.white4{ background-color: #fff; position: absolute; } .white1{ width: 102px; height: 43px; top: 70px; left: 172px; } .white2{ transform: skewX(-5deg); width: 46px; height: 216px; top: 70px; left: 223px; } .white3{ height: 43px; width: 95px; left: 172px; top: 156px; } .white4{ transform: skewY(-15deg); height: 47px; width: 87px; left: 172px; top: 251px; } .d_shield7{ height: 20px; top: 199px; width: 80px; left: 60px; } .r_shield4{ height: 43px; top: 113px; left: 172px; width: 103px; } img{ position: absolute; left: 234px; top: 14px; }
