zoukankan      html  css  js  c++  java
  • css画小米、遨游logo

    狠简单的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{
      	 240px; 
      	height: 240px;
      	border-radius: 120px;
      	background:#b1e4ff;
      	border:2px solid #789cb6;
      	box-shadow: 5px 5px 7px #999;
      	-moz-border-radius: 120px;
      }
      .aoyou1{
      	 230px;
      	height: 230px;
      	border-radius: 115px;
      	position: relative;
      	top:5px;
      	left:5px;
      	background:#3b99e3;
      	-moz-border-radius: 115px;
      }
      .aoyou2{
      	 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{
      	 35px; 
      	height: 45px;
      	background:#ffffff;
      	position: relative;
      	top:30px;
      	left:33px;
      	border:25px solid #3b99e3;
      }
    /**=================下面是小米的logo=====================**/ 
    .xiaomi_bg{ 
    	position:relative;
    	 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;
    	 130px;
    }
    .xiaomi_nei2{
    	position: absolute;
    	right: 60px;
    	top: 95px;
    	 30px;
    	height: 115px;
    	background: #fff;
    }
    .xiaomi_nei3{
    	position: absolute;
    	background: #fff;
    	border: 20px #FF6F3D solid;
    	left: 30px;
    	top: 25px;
    	 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>
    

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

  • 相关阅读:
    关于binary log一点总结[转]
    使用mysql索引技巧及注意事项
    优化php性能的一点总结
    html静态页面实现微信分享思路
    MySql字符串函数使用技巧
    Oracle计算时间差函数
    oracle10g获取Date类型字段无时分秒解决办法!
    Oracle常用函数
    COALESCE操作符
    关于null的操作
  • 原文地址:https://www.cnblogs.com/csdttnk/p/3318234.html
Copyright © 2011-2022 走看看