狠简单的2个Logo,用纯css写出来,觉得挺好玩的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>遨游、小米logo</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
.fl{ float: left; margin-left: 20px;}
.aoyou{
width: 240px;
height: 240px;
border-radius: 120px;
background:#b1e4ff;
border:2px solid #789cb6;
box-shadow: 5px 5px 7px #999;
-moz-border-radius: 120px;
}
.aoyou1{
width: 230px;
height: 230px;
border-radius: 115px;
position: relative;
top:5px;
left:5px;
background:#3b99e3;
-moz-border-radius: 115px;
}
.aoyou2{
width: 150px;
height: 100px;
background:#ffffff;
position: relative;
top:70px;
left:42px;
border-radius: 3px 20px 3px 3px;
-moz-border-radius: 3px 20px 3px 3px;
}
.aoyou3{
width: 35px;
height: 45px;
background:#ffffff;
position: relative;
top:30px;
left:33px;
border:25px solid #3b99e3;
}
/**=================下面是小米的logo=====================**/
.xiaomi_bg{
position:relative;
width: 305px;
height: 305px;
background: #FF6F3D;
border-radius: 20px;
}
.xiaomi_nei1{
position:absolute;
left: 60px;
top: 95px;
border-radius:0px 20px 0px 0px;
background: #fff;
height:115px;
width: 130px;
}
.xiaomi_nei2{
position: absolute;
right: 60px;
top: 95px;
width: 30px;
height: 115px;
background: #fff;
}
.xiaomi_nei3{
position: absolute;
background: #fff;
border: 20px #FF6F3D solid;
left: 30px;
top: 25px;
width: 30px;
height: 70px;
border-top-right-radius: 20px;
}
</style>
</head>
<body>
<!--遨游logo-->
<div class="aoyou fl">
<div class="aoyou1">
<div class="aoyou2">
<div class="aoyou3"></div>
</div>
</div>
</div>
<!--end 遨游--> <!--小米logo-->
<div class="xiaomi_bg fl">
<div class="xiaomi_nei1">
<div class="xiaomi_nei3"></div>
</div>
<div class="xiaomi_nei2"></div>
</div>
<!--end 小米logo-->
</body>
</html>

忘了传效果图(谷歌浏览器下):  

css画小米、遨游logo的更多相关文章

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

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

  2. 纯CSS实现一个微信logo,需要几个标签?

    博客已迁移至http://lwzhang.github.io. 纯CSS实现一个微信logo并不难,难的是怎样用最少的html标签实现.我一直在想怎样用一个标签就能实现,最后还是没想出来,就只好用两个 ...

  3. 一步一步教你用CSS画爱心

    今天小颖给大家分享一个用CSS画的爱心,底下有代码和制作过程,希望对大家有所帮助. 第一步: 先画一个正方形.如图: <!DOCTYPE html> <html> <he ...

  4. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  5. Effective前端3:用CSS画一个三角形

    p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...

  6. 用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  7. 用纯css画个三角形

    用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  8. 用css画图标

    css3的属性 transform(转换) 用途很广泛,功能也很强大,为了熟悉它的各种转换方式(平移 translate,旋转 rotate,扭曲 skew,放缩 scale),我做了一些平常常用的一 ...

  9. 如何用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

随机推荐

  1. hdu 4550 卡片游戏

    http://acm.hdu.edu.cn/showproblem.php?pid=4550 贪心 #include <cstdio> #include <cstring> # ...

  2. 【转】Ubuntu Server 12.04 静态IP简洁配置

    原文网址:http://blog.csdn.net/njchenyi/article/details/8715417 1.配置静态IP地址: # vim /etc/network/interfaces ...

  3. 关于JavaScriptSerializer使用的问题

    初学C#的同学们,你们有没有这样的问题:遇到不懂的问题,就到处搜索,好不容易搜索出来答案吧,却发现缺少引用,缺少引用就添加引用吧,结果在添加中找不到!是不是很恼火? 解决办法:查看项目的目标框架,如果 ...

  4. HDOJ 2114 Calculate S(n)(找周期)

    Problem Description Calculate S(n). S(n)=1^3+2^3 +3^3 +--+n^3 . Input Each line will contain one int ...

  5. RMQ算法讲解

    RMQ算法 引入: 例1.题目描述 输入N个数和M次询问,每次询问一个区间[L,R],求第L个数到R个数之间的最大值.   第一种方法:大暴力之术. 但是……时间复杂度最坏会达到 $O(NM)$,一半 ...

  6. Alert Views

    Alert views display a concise and informative alert message to the user. Alert views convey importan ...

  7. tomcat : Error configuring application listener of class org.springframework.web.context.ContextLoaderListener java.lang.ClassNotFoundException:

    错误 严重: Error configuring application listener of class org.springframework.web.context.ContextLoader ...

  8. springMVC之本地化和国际化

    spring框架的大部分都支持国际化,就像springMVC一样.DispatcherServlet使你能够动态的通过客户端的本地语言进行配置.这是通过LocaleResolver完成的.   当一个 ...

  9. cache 的设计与实现--转载

    本文整理自一下两篇博客:http://my.oschina.net/ScottYang/blog/298727http://my.oschina.net/u/866190/blog/188712 Ca ...

  10. Visual Studio 2012 Ultimate 上安装 Python 开发插件 PTVS

    1.我的环境 操作系统:32位 Win7 旗舰版 Service Pack 1 VS版本:Microsoft Visual Studio Ultimate 2012 版本 11.0.50727.1 R ...