<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>HTML5 LOGO</title>

        <style>

            .bg{

                width: 500px;

                height: 500px;

                background: mediumpurple;

                margin: auto;/*网页居中*/

                position: relative;

                overflow: hidden;/*隐藏内容溢出*/

            }

            .light{

                background: paleturquoise;

                width: 800px;

                height: 20px;

                position: absolute;

                left:  -150px;

                top: 240px;

            }

            #dunpai{

                position: relative;

                width: 100px;

            }

            .l1{position:absolute; background: #8A2BE2; width: 100px; height: 300px; left: 150px; top: 100px; }

            .l2{position:absolute; background: #8A2BE2; width: 100px; height: 300px; left: 118px; top: 100px; transform: skewX(12deg);    }

            .l3{position:absolute; background: #8A2BE2; width: 100px; height: 100px; left: 150px; top: 310px; transform: skewY(12deg);    }

            .r1{position:absolute; background: #8A2BE2; width: 100px; height: 300px; left: 250px; top: 100px; }

            .r2{position:absolute; background: #8A2BE2; width: 100px; height: 300px; left: 282px; top: 100px; transform: skewX(-12deg);    }

            .r3{position:absolute; background: #8A2BE2; width: 100px; height: 100px; left: 250px; top: 310px; transform: skewY(-12deg);    }

            #shield{position: absolute; transform: scale(0.9); left: 25px; top: 25px;}

            .rg1{position:absolute; background: deepskyblue; width: 100px; height: 300px; left: 250px; top: 100px;     }

            .rg2{position:absolute; background: deepskyblue; width: 100px; height: 300px; left: 282px; top: 100px; transform: skewX(-12deg);}

            .rg3{position:absolute; background: deepskyblue; width: 100px; height: 100px; left: 250px; top: 310px; transform: skewY(-12deg);}

            .wu1,.wu2,.wu3,.wu4{background: #eee; position: absolute;}

            .wu1{height: 20px; width: 80px; left: 170px; top: 153px;    }

            .wu2{height: 20px; width: 60px; left: 190px; top: 237px;    }

            .wu3{height: 18px; width: 43px; left: 209px; top: 339px; transform: skewY(12deg);    }

            .wu4{height: 200px; width: 20px; left: 188px; top: 153px; transform: skewX(12deg);    }

            .wu5,.wu6,.wu7,.wu8{background: #fff; position: absolute;}

            .wu5{height: 20px; width: 80px; left: 250px; top: 153px;    }

            .wu6{height: 20px; width: 60px; left: 250px; top: 237px;    }

            .wu7{height: 18px; width: 43px; left: 250px; top: 339px; transform: skewY(-12deg);    }

            .wu8{height: 200px; width: 20px; left: 296px; top: 153px; transform: skewX(-12deg);    }

            .wu9{position:absolute; height:31px; width: 30px; left: 189px; top: 257px; background: #8A2BE2;  transform: skewX(12deg);}

            .wu10{position:absolute; height:64px; width: 29px; left: 305px; top: 173px; background: deepskyblue;; transform: skewX(-12deg);    }

            #txt{position: absolute; width:180px ; height: 80px; left: 152px; top: 10px; font-size: 75px;}

        </style>

    </head>

    <body>

        <div class="bg">

            <div class="light" style="transform:rotate(60deg) ;"></div>

            <div class="light" style="transform:rotate(90deg) ;"></div>

            <div class="light" style="transform:rotate(120deg) ;"></div>

            <div class="light" style="transform:rotate(150deg) ;"></div>

            <div class="light" style="transform:rotate(180deg) ;"></div>

            <div class="light" style="transform:rotate(210deg) ;"></div>

            <div id="dunpai">

                <div class="l1"></div>

                <div class="l2"></div>

                <div class="l3"></div>

                <div class="r1"></div>

                <div class="r2"></div>

                <div class="r3"></div>

                <div id="shield">

                    <div class="rg1"></div>

                    <div class="rg2"></div>

                    <div class="rg3"></div>

                </div>

                <div class="wu1"></div>

                <div class="wu2"></div>

                <div class="wu3"></div>

                <div class="wu4"></div>

                <div class="wu5"></div>

                <div class="wu6"></div>

                <div class="wu7"></div>

                <div class="wu8"></div>

                <div class="wu9"></div>

                <div class="wu10"></div>

                <div id="txt">HTML</div>

            </div>

        </div>

    </body>

</html>

H5 ,Css实现了你的logo的更多相关文章

  1. [css]我要用css画幅画(九) - Apple Logo

    接着之前的[css]我要用css画幅画(八) - Hello Kitty,这次画的是苹果公司的logo 这次打算将分析和实现步骤尽量详细的说一说. 其实之前的也打算详细讲分析和设计过程,不过之前的图比 ...

  2. H5 CSS 悬浮滚动条

    H5 CSS 悬浮滚动条 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!

  3. css画小米、遨游logo

    狠简单的2个Logo,用纯css写出来,觉得挺好玩的. <!DOCTYPE html> <html> <head> <meta charset="u ...

  4. 【黑马pink老师的H5/CSS课程】（一）基本介绍

    视频P4~P6 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动 1.网页 1.1 什么是网页 网站是网页的集合,网页是构成网站的基本元素,常用html格式文件 1. ...

  5. H5 CSS的格式

    02-CSS的格式 标签名称{ 属性名称: 属性对应的值; ... } 2.注意点: 1.style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系) 2.sty ...

  6. h5 . css入门 2.CSS基础

    CSS基础 学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML ...

  7. H5 css学习

    p{text-indent:2em;}段前空两格   段落排版--行间距(行高) p{line-height:1.5em;} 段落排版--中文字间距.字母间距  h1{    letter-spaci ...

  8. 实训H5+CSS 太极图

    大概就是上面这个样子 我们准备 两个半圆,两个大圆,两个小圆,然后稍微的进行覆盖就行~ <!doctype html> <html> <head> <meta ...

  9. H5,Css小姐又作画了

    用H5和CSS3做出自己名字缩写. <html> <head> <meta charset="utf-8"> <title>name ...

随机推荐

  1. array_walk_recursive 地址引用报错的问题

    今天看十八哥的视频,学习array_walk_recursive的用法,发现一直报错: PHP版本:5.6.19 代码界面: 报错界面: 查了很长时间,不知道什么问题,后来在网上终于找到原因所在: + ...

  2. 定位流之z-index属性

    1.固定定位是脱离标准流的,不会占用标准流的空间 2.和绝对定位有点像,也不区分行内块级元素 3.类似于前面学的背景关联方式(让某个背景图片不随滚动而滚动)让某个元素不随着滚动条的滚动而滚动 ie6不 ...

  3. TCP的粘包和拆包问题及解决办法（C#）

    本文参考:https://blog.csdn.net/wxy941011/article/details/80428470 原因 如果客户端连续不断的向服务端发送数据包时,服务端接收的数据会出现两个数 ...

  4. sync_with_stdio(false)的副作用

    sync_with_stdio()的一个特性 水一篇随笔 其实对于用快读的大佬来说没什么用,但还是提一下 ios::sync_with_stdio(false)用处是"关闭同步", ...

  5. JS--遍历对象属性的五种方式

    ES6 一共有 5 种方法可以遍历对象的属性. (1)for...in for...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性). (2)Object.keys(obj) Ob ...

  6. 利用 Docker 构建一个简单的 java 开发编译环境

    目前 Java 语言的版本很多,除了常用的 Java 8,有一些遗留项目可能使用了 Java 7,也可能有一些比较新的的项目使用了 Java 10 以上的版本.如果想切换自己本地的 Java 开发环境 ...

  7. 记一次使用idea插件CamelCase技巧

    1.在idea中下载插件CamelCase插件  2.使用Shift+Alt+U快捷键进行转换 3.由于转换格式比较导致多次使用快捷键才能达到自己想要的效果,此插件提供了允许禁用某些转换或更改它们在首 ...

  8. MySql索引使用策略

    MySql索引 索引优点 1.可以通过建立唯一索引或者主键索引,保证数据的唯一性.2.提高检索的数据性能3.在表连接的连接条件 可以加速表与表直接的相连 4.建立索引,在查询中使用索引 可以提高性能 ...

  9. 二级Parser应用教程

    01 应用背景 Ubidots是一个物联网云平台,通过设备友好的API(可通过HTTP / MQTT / TCP / UDP协议访问)简单安全地将硬件和数字输入连接到Ubidots Cloud. 它可 ...

  10. 前端动画框架GSAP框架随笔

    gsap是目前非常流行的前端动画框架,可以非常轻松构造出复杂的动画效果,这里仅对我实际使用中的一些例子进行总结 官网 示例 文章种所使用代码的在线示例 基础用法 // 声明一个滚动控制器 let ct ...