您现在的位置是：网站首页> 编程资料编程资料

用CSS3打造HTML5的Logo(实现代码)HTML5和CSS3实例教程总结(推荐)html5+css3实现的点击眼睛玩游戏特效源码(护眼游戏)html5+css3绘制的滚动齿轮动画特效源码HTML5+CSS3从入门到精通 中文pdf完整版[229MB]html5+css3实现的手机测眼力小游戏源码浅谈HTML5 & CSS3的新交互特性

2023-10-22 295人已围观

简介 下面小编就为大家带来一篇用CSS3打造HTML5的Logo(实现代码)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

本文将向大家介绍如何利用CSS3的新样式属性制作一个HTML5的Logo。我们先来看看最终的效果：

www.jb51.net

不要怀疑，上面的logo完全由HTML+CSS实现。我们将logo划分为盾形、数字5和辐射背景三大部分，下面将分别实现每个部分。

盾形

盾形在外形上是左右对称的，因此我们可先完成左半边，右半边可复制过来再修改一些参数。左半边准备用三个div实现，其中有两个div需要倾斜一定的角度来实现盾形的左边和底边，这里使用transform的skew来完成。代码如下（注意，这里只使用了webkit前缀的样式，仅在Chrome、Safari等Webkit内核浏览器支持）：

XML/HTML Code复制内容到剪贴板
  1.   
  2. <div class="dark_orange" style="left:32px;width:140px;height:346px;">div>  
  3. <div class="dark_orange" style="-webkit-transform:skewx(5deg);left:16px;width:100px;height:346px;">div>  
  4. <div class="dark_orange" style="-webkit-transform:skewy(15deg);top:265px;left:32px;width:140px;height:100px;">div>  

其中，CSS样式定义所有div都是绝对定位，dark_orange类指定了一个橘色背景：

 

div{position:absolute}
.dark_orange{background:#e15016}

 

我们看一下效果：

www.jb51.net

下面我们再复制一遍HTML，修改一些参数作为盾形的右侧：

 

XML/HTML Code复制内容到剪贴板
  1.   
  2. <div class="dark_orange" style="left:172px;width:140px;height:346px;">div>  
  3. <div class="dark_orange" style="-webkit-transform:skewx(-5deg);left:227px;width:100px;height:346px;">div>  
  4. <div class="dark_orange" style="-webkit-transform:skewy(-15deg);top:265px;left:172px;width:140px;height:100px;">div>  

效果如下：

www.jb51.net

盾形的右侧里面有浅色的区域，我们将盾的右侧复制一份通过scale缩小一点，此外还需要调整一些样式属性：

XML/HTML Code复制内容到剪贴板
  1.   
  2. <div style="-webkit-transform:scale(0.82);left:31px;top:25px">  
  3. <div class="light_orange" style="left:172px;width:140px;height:346px;">div>  
  4. <div class="light_orange" style="-webkit-transform:skewx(-5deg);left:227px;width:100px;height:363px;">div>  
  5. <div class="light_orange" style="-webkit-transform:skewy(-15deg);top:282px;left:172px;width:138px;height:100px;">div>  
  6. div>  

light_orange对应浅一点儿的背景色：

 

.light_orange{background:#ee6812}

 

盾形已经完成了：

www.jb51.net

数字5

数字5由若干div组成，倾斜的效果依旧通过skew来控制：

XML/HTML Code复制内容到剪贴板
  1.   
  2. <div class="light_gray" style="height:43px;width:102px;left:70px;top:70px">div>  
  3. <div class="light_gray" style="width:46px;height:216px;-webkit-transform:skewx(5deg);top:70px;left:75px;">div>  
  4. <div class="light_gray" style="height:43px;width:95px;left:77px;top:156px">div>  
  5. <div class="light_gray" style="height:47px;width:87px;left:85px;top:251px;-webkit-transform:skewy(15deg)">div>  
  6.   
  7. <div class="white" style="height:43px;width:102px;left:172px;top:70px"提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：浅谈firefox 的event事件处理浅谈原生页面兼容IE9问题的解决方案新版chrome浏览器设置允许跨域的实现css hack之\9和\0就可能对hack IE11\IE9\IE8无效css区分ie8/ie9/ie10/ie11 chrome firefox的代码解决CSS浏览器兼容性问题的4种方案常见的浏览器兼容性问题(小结)border-radius IE8兼容处理的方法浅谈遇到的几个浏览器兼容性问题base64图片在各种浏览器的兼容性处理 对常见的css属性进行浏览器兼容性总结(推荐)

    下一篇：浏览器hack总结 详细的浏览器兼容性的快速解决方法详解IE浏览器的haslayout属性及相关兼容性问题解决HTML5的video标签的浏览器兼容性增强方案分享浅谈各种浏览器下的CSS Hack兼容性写法CSS3中的Opacity多浏览器透明度兼容性问题火狐浏览器怎么切换到IE兼容模式?浅谈浏览器的兼容性(必看篇)

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网