H5 ,Css实现了你的logo

<!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的更多相关文章

[css]我要用css画幅画(九) - Apple Logo
接着之前的[css]我要用css画幅画(八) - Hello Kitty,这次画的是苹果公司的logo 这次打算将分析和实现步骤尽量详细的说一说. 其实之前的也打算详细讲分析和设计过程,不过之前的图比 ...
H5 CSS 悬浮滚动条
H5 CSS 悬浮滚动条 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
css画小米、遨游logo
狠简单的2个Logo,用纯css写出来,觉得挺好玩的. <!DOCTYPE html> <html> <head> <meta charset="u ...
【黑马pink老师的H5/CSS课程】（一）基本介绍
视频P4~P6 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动 1.网页 1.1 什么是网页网站是网页的集合,网页是构成网站的基本元素,常用html格式文件 1. ...
H5 CSS的格式
02-CSS的格式标签名称{ 属性名称: 属性对应的值; ... } 2.注意点: 1.style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系) 2.sty ...
h5 . css入门 2.CSS基础
CSS基础学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML ...
H5 css学习
p{text-indent:2em;}段前空两格段落排版--行间距(行高) p{line-height:1.5em;} 段落排版--中文字间距.字母间距 h1{ letter-spaci ...
实训H5+CSS 太极图
大概就是上面这个样子我们准备两个半圆,两个大圆,两个小圆,然后稍微的进行覆盖就行~ <!doctype html> <html> <head> <meta ...
H5,Css小姐又作画了
用H5和CSS3做出自己名字缩写. <html> <head> <meta charset="utf-8"> <title>name ...

随机推荐

OpenCV开发笔记（七十三）：红胖子8分钟带你使用opencv+dnn+yolov3识别物体
前言级联分类器的效果并不是很好,准确度相对深度学习较低,上一章节使用了dnn中的tensorflow,本章使用yolov3模型,识别出具体的分类. Demo 320x320,置信度0 ...
常用的Css函数
1. attr() 用来选择元素的属性值,用法:attr(html元素的属性名),正常搭配css content一起使用 html: <p><a href="http:// ...
RocketMQ4.7.1双主双从集群搭建
导读上一集我们已经学会了SpringBoot整合RocketMQ点我直达,今天我们来搭建双主双从高性能MQ服务集群. 简介主从架构 Broker角色,Master提供读写,Slave只支持读,Co ...
AtCoder 1807 食塩水
题意有 \(n\) 瓶食盐水,第 \(i\) 瓶为质量 \(w_i\),浓度 \(p_i\%\) 的食盐水,需要选出 \(k\) 瓶食盐水混合在一起,问最大浓度. \(\texttt{Data Ra ...
Java学习的第五十二天
1.例9.4对象数组的使用方法 public class Cjava { public static void main(String[]args) { Box b[] = {new Box(10,1 ...
机器学习第5篇：knn回归
基于最邻近算法的分类,本质上是对离散的数据标签进行预测,实际上,最邻近算法也可以用于对连续的数据标签进行预测,这种方法叫做基于最邻近数据的回归,预测的值(即数据的标签)是连续值,通过计算数据点最临近数 ...
微信小程序开发之云开发
创建云开发小程序项目开通云开发开通后界面选择开发环境开启使用npm模块安装wx-server-sdk npm install --save wx-server-sdk@latest 创建云函 ...
php 之批量生成 mysql 语句注释
工作需要需要更新所有表的注释不影响原结构之上进行更新 <?php class Ceshi extends CI_Controller{ function __construct() { p ...
家庭版window10找不到文件'gpedit.msc'。请确定文件名是否正确后，再试一次
今天遇到电脑找不到gpedit.msc文件,所以记录一下这个问题的解决方法 1. 首先建立一个空白文档代码如下: @echo off pushd "%~dp0" dir /b ...
ERP中HR模块的操作与设计--开源软件诞生26
赤龙ERP的EHR功能讲解--第26篇用日志记录"开源软件"的诞生 [进入地址点亮星星]----祈盼着一个鼓励博主开源地址: 码云:https://gitee.com/red ...

H5 ,Css实现了你的logo

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

随机推荐

热门专题