狠简单的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. ROHS無鉛問題解答！ROHS IPC SGS

    無鉛smt(smd)問題1. 問Maxim關于無鉛的定義是什么?答無鉛表示在封裝或產品制造中不含鉛(化學符號為Pb).IC封裝中,Pb在外部引腳拋光或電鍍中很常見.對于晶片級封裝(UCSP和倒裝芯片) ...

  2. 对LockWindowUpdate与GetDCEx的理解（以前不知道还可以锁住刷新）

    MSDN如是说:The LockWindowUpdate function disables or enables drawing in the specified window. Only one  ...

  3. linux crontab 计划任务 atd和windows下的计划任务

    crontab 命令 如果发现您的系统里没有这个命令,请安装下面两个软件包. vixie-cron crontabs crontab 是用来让使用者在固定时间或固定间隔执行程序之用,换句话说,也就是类 ...

  4. logstash 处理tomcat catalina.out

    input { file { type => "zj_api" path => ["/data01/applog_backup/zjzc_log/zj-api ...

  5. BZOJ1627: [Usaco2007 Dec]穿越泥地

    1627: [Usaco2007 Dec]穿越泥地 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 478  Solved: 303[Submit][Sta ...

  6. C++ STL之pair常用指令

    只记载本人在ACM中常用的函数. pair<first, second>,将两个数据组合成一个数据.在其他stl(如map),函数需要传回两个值时可能会用到. 1.初始化 #include ...

  7. java中的泛型类及其使用

    泛型的使用 集合的使用 一般集合的使用方式是: 比如有一个Person类 package com.atguigu.java; public class Person { // @Override // ...

  8. CloudFoundry云环境中应用的特殊设计

    常规的应用,大多数可以不经过任何修改即可部署于CloudFoundry云平台之上,但是在一些特殊情况下,总是不可避免地会出现一些细小的问题,如果在应用设计之初,就考虑到针对云平台的一些特殊情况,遵守云 ...

  9. tomcat7源代码Bootstrap

    tomcat的启动从bootstrap的main方法開始,在main方法中主要是做了三件事,调用init方法初始化自己.调用catalinaDaemon对象 的setAwait方法设置它的await属 ...

  10. 快速优化yum (for centos5.5)

    定义yum超时时间:vi /etc/yum.conftimeout=120 修改源:(全部复制粘贴即可)cd /etc/yum.repos.d/mv rhel-debuginfo.repo rhel- ...