H5logo图标

最新推荐文章于 2022-01-22 19:46:59 发布

爱～做梦的～猪

最新推荐文章于 2022-01-22 19:46:59 发布

阅读量680

点赞数

分类专栏： H5实验

本文链接：https://blog.csdn.net/weixin_44753550/article/details/104664826

版权

H5实验专栏收录该内容

5 篇文章 0 订阅

订阅专栏

实验代码：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 logo</title>
    <link href="logo.css" type="text/css" rel="stylesheet">
</head>
<body class = "b" >
    <!--这是一个HTML5 logo最外层盒子div，类名为bg-->
    <div class="bg">
        <!--每一束白色光束的div盒子，行内式style="transform:rotate(5deg)"用于设置div变样的样式，即旋转5度，这是css3新增的属性-->
        <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盒子类名为logo，设置行内式为绝对定位，距离上边120px，距离左边229ps-->
        <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盒子进行某种变形（css3新增属性），缩放为原来的0.82倍，并给这个div绝对定位-->
            <div style="transform: scale(0.82);left:3px;top:25px;">
                <div class="l_shield1"></div>
                <div class="l_shield2"></div>
                <div class="l_shield3"></div>
            </div>
            <!--以下4个div组成的logo里面数字5的左半边灰色部分-->
                <div class="gray1"></div>
                <div class="gray2"></div>
                <div class="gray3"></div>
                <div class="gray4"></div>
            <!--以下4个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>
        </div>
    </div>

</body>
</html>

CSS：

/*第一单元 项目1-1 使用HTML5+css3绘制HTML5的logo*/
body{
    margin: 0;
    padding: 0;
}
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: #ec770c;
}
.d_shield1{
    left: 32px;
    width: 140px;
    height: 346px;
}
.d_shield2{
    transform: skewx(5deg);
    left: 16px;
    width: 100px;
    height: 346px;
}
.d_shield3{
    transform: skewy(15deg);
    top: 265px;
    left: 32px;
    width: 140px;
    height: 100px;
}
.d_shield4{
    left: 172px;
    width: 140px;
    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{
    height: 20px;
    top: 199px;
    width: 80px;
    left: 60px;
}
.l_shield1,.l_shield2,.l_shield3,.l_shield4{
    background:#ec770c;
}
.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;
}
.gray1,.gray2,.gray3,.gray4{
    background: #ebebeb;
}
.gray1{
    height: 43px;
    width: 102px;
    left: 70px;
    top: 70px;
}
.gray2{
    height: 216px;
    width: 46px;
    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);
}
.white1,.white2,.white3,.white4{
    background: #fff;
}
.white1{
    width: 102px;
    height: 43px;
    left: 172px;
    top: 70px;
}
.white2{
    width: 46px;
    height: 216px;
    transform: skewX(-5deg);
    top: 70px;
    left: 223px;
}
.white3{
    height: 43px;
    width: 95px;
    left: 172px;
    top: 156px;
}
.white4{
    height: 47px;
    width: 87px;
    left: 172px;
    top: 251px;
    transform: skewY(-15deg);
}
.b{
    width: 1000px;
    margin: auto;

}
img{
    position: fixed;
    top: 8px;
    left: 225px;
    width: 350px;
    height: 110px;
}

实验结果：

2020/03/04

爱～做梦的～猪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
H5logo图标

实验代码：HTML：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5 logo</title> <link href="logo.css" type="text/css" rel="s...
复制链接

扫一扫