使用html5和CSS3繪制html5的logo

image.png

html代碼部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="logo.css"/>
        <title>HTML5 logo</title>
    </head>
    <body>
        <!-- 這是HTML5 logo的最外層盒子div,類名為background -->
        <div class="background">
            <!-- 制作旋轉(zhuǎn)的光束探孝，類目為beam,運(yùn)用內(nèi)聯(lián)樣式style,旋轉(zhuǎn)5度 -->
            <div class="beam" style="transform: rotate(5deg);"></div>
            <!-- 復(fù)制17束光束，每束光相差10度-->
            <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>
            <!-- 中心是個(gè)盾牌的盒子再姑，類名logo -->
            <div class="logo" style="top: 120px; left: 229px;">
                <!-- shield為盾牌類名部分 -->
                <!-- 盾牌左邊 -->
                <div class="shield1">
                    
                </div>
                <div class="shield2">
                    
                </div>
                <div class="shield3">
                    
                </div>
                <!-- 這是盾牌的右邊 -->
                <div class="shield4">
                    
                </div>
                <div class="shield5">
                    
                </div>
                <div class="shield6">
                    
                </div>
                <!-- 盾牌右邊里面的橙色部分 -->
                <!-- 行內(nèi)樣式：scale定義縮放為原來的0.82倍萌抵，縮小 -->
                <div style="transform: scale(0.82);left: 31px;top: 25px;">
                    
                
                <div class="color_sheild1">
                    
                </div>
                <div class="color_sheild2">
                    
                </div>
                <div class="color_sheild3">
                    
                </div>
                </div>
                
            <!-- 定義組成logo 5字體的左半邊灰色部分 -->
            <div class="grey1"></div>
            <div class="grey2"></div>   
            <div class="grey3"></div>
            <div class="grey4"></div>
            
            <!-- 定義數(shù)字5的右半邊白色部分 -->
            <div class="white1"></div>
            <div class="white2"></div>
            <div class="white3"></div>
            <div class="white4"></div>
                
            <!-- 修補(bǔ)部分 -->
            <div class="shield7">
                
            </div>
            <div class="color_sheild4">
                
            </div>
            <img src="logo.png" >
            
            
            
            </div>
            </div>
    </body>
</html>

css3代碼部分

body {
    margin: 0;
    /* 設(shè)置body的外邊距為0 */
    padding: 0;
}
div {
    position: absolute;/* 給所有div設(shè)置絕對定位 */
}
.background {
    width: 800px;
    height: 600px;
    background: #f2f2f2;
    overflow: hidden;/* 隱藏溢出內(nèi)容*/
} 
.beam {
    width: 1600px;
    height: 20px;
    background: #fff;
    top: 290px;
    left: -400px;
}
/* 設(shè)置盾牌三部分的共同顏色 */
.shield1,.shield2,.shield3,.shield4,.shield5,.shield6,.shield7 {
    background: #e15016;
    }
.shield1 {
    left: 32px;
    width: 140px;
    height: 346px;
}
.shield2 {
    left: 16px;
    width: 100px;
    height: 346px;
    transform: skewX(5deg);/* 變形:水平方向斜切5度 */
}
.shield3 {
    top: 265px;
    left: 32px;
    width: 140px;
    height: 100px;
    transform: skewY(15deg);
}
.shield4 {
    left: 172px;
    width: 140px;
    height: 346px;
    }
.shield5 {
    left: 227px;
    transform: skewX(-5deg);
    width: 100px;
    height: 346px;
    }
.shield6 {
    transform: skewY(-15deg);
    top: 265px;
    left: 172px;
    width: 140px;
    height: 100px;
    }
.shield7 {
    height: 20px;
    top: 199px;
    width: 80px;
    left: 60px;
}
    .color_sheild1,.color_sheild2,.color_sheild3,.color_sheild4 {
        background: #ee6812;
    }
    .color_sheild1 {
        left: 172px;
        width: 140px;
        height: 346px;
    }
.color_sheild2 {
    transform: skewX(-5deg);
    left: 227px;
    width: 100px;
    height: 363px;
}
.color_sheild3 {
    transform: skewY(-15deg);
    top: 282px;
    left: 172px;
    width: 138px;
    height: 100px;
}
.color_sheild4 {
    height: 43px;
    top: 113px;
    width: 100px;
    left: 180px;
}
.grey1,.grey2,.grey3,.grey4 {
    background: #ebebeb;
}
.grey1 {
    height: 43px;
    width: 102px;
    left: 70px;
    top: 70px;
}
.grey2 {
    width: 46px;
    height: 216px;
    transform: skewX(5deg);
    top: 70px;
    left: 75px;
}
.grey3 {
    width: 95px;
    height: 43px;
    left: 77px;
    top: 156px;
}
.grey4 {
    width: 87px;
    height: 47px;
    left: 85px;
    top: 251px;
    transform: skewY(15deg);
}

.white1,.white2,.white3,.white4 {
    background: #fff;
}
.white1 {
    width: 102px;
    height: 43px;
    left: 172px;
    top: 70px;
}
.white2 {
    width: 46px;
    height: 216px;
    left: 223px;
    top: 70px;
    transform: skewX(-5deg);
}
.white3 {
    width: 95px;
    height: 43px;
    left: 172px;
    top: 156px;
}
.white4 {
    width: 87px;
    height: 47px;
    left: 172px;
    top: 251px;
    transform: skewY(-15deg);
}
img {
    position: fixed;/* 固定定位 */
    top: 8px;
    left: 225px;
    width: 350px;
    height: 100px;
    
}

效果圖

image.png

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者