利用HTML5+CSS3绘制HTML5的LOGO

最新推荐文章于 2022-01-22 19:46:59 发布
最新推荐文章于 2022-01-22 19:46:59 发布
阅读量366 收藏
点赞数
文章标签： css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/abcyh999/article/details/104651654
版权

示例代码：

本项目是由div块级元素拼接而成，用CSS样式控制每一块的样式和位置。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5的logo设计</title>
    <style>
        body{
            margin:0;
            padding:0;
        }
        div{
            position:absolute;
        }
        .bg{
            width: 8000px;
            height:6000px;
            background:#f2f2f2;
            overflow: hidden;
        }
        .beam{
            width:1600px;
            height:20px;
            background:#fff;
            top:290px;
            left:-400px:
        }
        .d_shield1,.d_shield2 ,.d_shield3,.d_shield3 ,.d_shield4 ,.d_shield5 ,.d_shield6 ,.d_shield7  {
            background:#e15016;
        }
        .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:#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;
        }
        .gray1,.gray2,.gray3,.gray4{
            background:#ebebeb;
        }
        .gray1 {
            height:43px;
            width:102px;
            left:70px;
            top:70px;
        }
        .gray2 {
            width:46px;
            height:210px;
            transform:skewX(5deg) ;
            top:70px;
            left:75px;
        }
        .gray3 {
            width:95px;
            height:43px;
            left:77px;
            top:156px;
        }
        .gray4 {
            width:87px;
            height:47px;
            left:85px;
            top:251px;
        }
        .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 {
            height:43px;
            width:95px;
            left:172px;
            top:156px;
        }
        .white4 {
            width:87px;
            height:47px;
            left:172px;
            top:251px;
            tansform:skewy(-15deg);
        }
        img{
            position:fixed;
            top:-190px;
            left:-120px;
            width:225px
            height:165px;
        }
    </style>
</head>
<body>
<div class="bg">
    <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="beam" style="transform:rotate(165deg) "></div>
    <div class="beam" style="transform:rotate(175deg) "></div>
<div class="logo" style="top:120px;left:630px">
    <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 class="gray1"></div>
        <div class="gray2"></div>
        <div class="gray3"></div>
        <div class="gray4"></div>
        <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 class="img" >
            <img src="HTML.png"/>
        </div>
    </div>
</div>
</div>
</body>
</html>
abcyh999
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5+CSS3 精美登陆界面源码
01-19
3个很精美的登陆界面，全都是用HTML5+CSS3开发的，所以可能不适合低版本IE浏览器。大家可以下来看看，做的超级漂亮的。
项目1-1使用html5+css3绘制html5的logo
weixin_43909464的博客
03-07 311
项目分析 ①定义出整个页面的背景区域“bg”，并且实现背景光束 ②定义logo的样式，并画出盾牌的左半边 ③画出盾牌的右半边 ④画出浅橘色区域 ⑤画出5的左半边 ⑥画出5的右半边 ⑦用色块遮盖多余的部分 ⑧在盾牌上方，添加HTML图片 第一步 ...
使用HTML5+CSS3绘制HTML5的logo
Crazy_78的博客
04-17 820
使用HTML5+CSS3绘制HTML5的logo 在制作之前，先介绍transform标签的属性: 1.旋转 rotate 用法：transform：rotate(45deg); 共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。 旋转前 旋转后 2.缩放 scale 用法：transform: scale(0.5) 或者 tra......
HTML5网页设计基础——LOGO的制作
shengming_tutou的博客
01-22 4152
案例效果图： 代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>Google的LOGO设计</title> <style> strong{ font-size: 100px;/*设置所有strong标签的文字大小为：100px*/ } .blue{ color:#3174f0; /*给类名为。blue的标
用纯css实现的html5 logo标志
前端岚枫
10-18 8243
一个用css实现的html5  Logo，主要用html和css技术实现，例子如下： 源代码下载地址： css部分代码如下： html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cit
HTML5+CSS3期末大作业——城市简介源码
05-05
HTML5+CSS3期末大作业——城市简介源码
HTML5+CSS3绘制锯齿状的矩形
09-28
主要教大家如何利用HTML5 CSS3绘制出锯齿状的矩形，绘制图形时可以用canvas标签，感兴趣的小伙伴们可以参考一下
html5+css3+JS代码
05-22
《精通html5+css3+JavaScript页面设计》代码
html5+css3笔记资料
02-14
html5+css3笔记资料
用CSS3打造HTML5的Logo(实现代码)
09-24
下面小编就为大家带来一篇用CSS3打造HTML5的Logo(实现代码)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
纯css实现的html5 logo 标志
10-18
用纯css实现的html5 logo 标志，主要用css3和html技术
如何使用HTML5+CSS3绘制一个QQ 企鹅Logo
luojiandecsdn的博客
03-01 3154
看了腾讯全端团队AlloyTeam发布的这篇《使用CSS3绘制腾讯QQ的企鹅Logo》文章，自己仿照了一下，做了个是山寨版的QQ企鹅。 之所以称之为山寨版，是因为原版绘出来的是这样： 而我绘出来的是这样： 好吧，由于不知道原始的数据，绘出来真的有点胖，有点别扭所以我叫他胖企鹅大笑大笑大笑。 当然，尽管没绘好，不过也因此掌握了绘制方法，也算是不枉我辛辛苦苦了几小时。不多说，直接得上代码：
用CSS3打造HTML5的Logo
yeana1的博客
07-27 1341
用CSS3打造HTML5的Logo 本文将向大家介绍如何利用CSS3的新样式属性制作一个HTML5的Logo。我们先来看看最终的效果： 不要怀疑，上面的logo完全由HTML+CSS实现。我们将logo划分为盾形、数字5和辐射背景三大部分，下面将分别实现每个部分。 >>>>盾形 盾形在外形上是左右对称的，因此我们可先完成左半边，右半边可复
【项目1-1】使用HTML5+CSS3绘制HTML5的logo
weixin_30802171的博客
06-30 572
作为一个WEB小萌新，自学了有一段时间，总是感觉停滞不前。最近反思中，想到前贤一句话：书读百遍其义自见。说到底，还是项目做的少，如果做多了，想必自然会得心应手。 利用HTML5+CSS3绘制HTML5的Logo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...
用HTML5+CSS3绘制HTML5的图标
Mr_jianghanlin的博客
03-05 374
用HTML5+CSS3绘制HTML5的图标 首先看一下最终的效果图： 然后对上述图片进行拆分分析： HTML5的实现步骤： 图1：定位出整个页面的背景区域“bg”,并实现背景光束。 图2：定义logo样式，并画出盾牌的左半边。 图3：画出盾牌的右半边。 图4：画出浅橘色区域。 图5：画出“5”的左半边。 图6：画出“5”的右半边。 图7：用色块遮盖多余的部分。 图8：在盾牌上方添加“HTML”图片...
h5标志绘制
qq_45581246的博客
09-13 309
** 代码： ** <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!--网页标题为HTML5 logo--> <title>HTML5 logo</title> <!--链入式样式表，浏览器运行时会加载解析css/0101/目录下的logo.css文件--> <link href="css/logo.css" type="text/css"
HTML5作业2绘画h5标志
Sad_dog的博客
03-07 389
分析 1定位出整个页面背景区域，并实现背景光束 2使用画布定义logo样式，并画出盾牌的背景 3画出盾牌的右半边 4画出浅橘色区域 5画出“5”的左半边 6画出“5”的右半边 7在盾牌上方添加“HTML”字样 源代码如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con...
如何用html做logo,html如何设置页面图标（logo）
weixin_34089871的博客
07-02 7310
在html中，可以利用link标签来设置页面图标；只要在页面的head标签中添加“”代码即可。本教程操作环境：windows7系统、HTML5版、Dell G3电脑。准备材料1、准备一张32px*32px大小的ico图标。2、准备好开发环境。开始制作设置网页的ico图标其实比较简单，只要在页面的head标签中添加一行代码即可。，这行代码看着是不是很简单？使用示例如下：系统首页Hello World...
关于元旦节日的HTML5+css3
最新发布
12-12
很抱歉，根据您提供的引用内容，似乎没有关于元旦节日的HTML5+CSS3的内容。但是，我可以为您提供一些关于春节的HTML5+CSS3的内容。 以下是HTML5+CSS3实现春节主题的一些方法和步骤： 1.使用CSS3实现动画效果 ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值