HTML5 logo

潇潇学编程

于 2022-07-04 20:53:28 发布

阅读量179

点赞数

文章标签： html5 前端 css

本文链接：https://blog.csdn.net/knows1/article/details/125608436

版权

1.HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 logo</title>
    <link rel="stylesheet" href="css/logo.css" >
</head>
<body>
    <div class="bg">
        <!-- 每一个白色光速就是一个DIV  -->
        <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="white beam" style="transform: rotate(165deg);"></div>
        <div class="white beam" style="transform: rotate(175deg);"></div>
    <!-- 中心logo的div盒子，距离上边框120px，左边229px -->
    <div class="logo" style="top: 120px;left: 229px;">
   <!-- 盾牌左边 -->
   <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>
   <!-- 橘黄色部分 -->
   <div style="transform: scale(0.82);left: 31px;top: 25px;">
    <div class="l_shield1"></div>
    <div class="l_shield2"></div>
    <div class="l_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>
   <!-- 最后的修补 -->
   <div class="d_shield7"></div>
   <div class="l_shield4"></div>
   <img src="images/HTML.png" alt="">
    </div>
    </div>
</body>
</html>

2.css部分

/* 初始化 */
body{
    margin: 0;
    padding: 0;
}
/* 给所有div添加绝对定位 */
div{
    position: absolute;
}
/* 背景 */
.bg{
    width: 800px;
    height: 600px;
    background: #f2f2f2;
    overflow: hidden;
}
/* 光速 */
.beam{
    width: 1600px;
    height: 20px;
    background: #fff;
    top: 290px;
    left: -400px;
}
/* 盾牌 */
.d_shield1,.d_shield2,
.d_shield3,.d_shield4,
.d_shield5,.d_shield6,.d_shield7{
    background: #e15016;

}
.d_shield1{
    left: 32px;
    width: 140px;
    height: 346px;
}
.d_shield2{
    /* 水平方向斜切5度 */
    transform: skewX(5deg);
    left: 16px;
    width: 100px;
    height: 346px;
}
.d_shield3{
    /* 垂直方向斜切15度 */
    transform: skewY(15deg);
    top: 265px;
    left: 32px;
    width: 140px;
    height: 100px;
}

.d_shield4{
    left: 32px;
    width: 14px;
    height: 346px;
}
.d_shield5{
    transform: skewX(-5deg);
    left: 227px;
    width: 100px;
    height: 346px;
}
.d_shield6{
    transform: skewY(-15deg);
    top: 265px;
    left: 172px;
    width: 140px;
    height: 100px;
}
.d_shield7{
    top: 199px;
    left: 60px;
    width: 80px;
    height: 20px;
}
.l_shield1,.l_shield2,.l_shield3,.l_shield4{
    background: #ee6812;

}
.l_shield1{
    left: 172px;
    width: 140px;
    height: 346px;
}
.l_shield2{
    transform: skewX(-5deg);
    left: 227px;
    width: 100px;
    height: 363px;
}
.l_shield3{
    transform: skewY(-15deg);
    top: 282px;
    left: 172px;
    width: 138px;
    height: 100px;
}
.l_shield4{
    height: 43px;
    top: 113px;
    width: 100px;
    left: 180px;
}
/* 左边数字5 */
.gray1,.gray2,.gray3,.gray4{
    background: #ebebeb;
}
.gray1{
    height: 43px;
    width: 102px;
    left: 70px;
    top: 70px;
}
.gray2{
    
    height: 216px;
    width: 56px;
    transform: skewX(5deg);
    left: 75px;
    top: 70px;
}
.gray3{
    height: 43px;
    width: 95px;
    left: 77px;
    top: 156px;
}
.gray4{
    height: 47px;
    width: 87px;
    left: 85px;
    top: 251px;
    transform: skewY(15deg);
}
/* 右边5 */
.white1,.white2,.white3,.white4{
    background: #fff;
}
.white1{
    width: 102px;
    height: 43px;
    left: 172px;
    top: 70px;
}
.white2{
    width: 46px;
    height: 216px;
    transform: skewX(-5deg);
    left: 223px;
    top: 70px;
}
.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: 110px;
}