• 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>
    

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

  • 相关阅读:
    HDU 2955 Robberies(01背包)
    HDU 2602 Bone Collector(01背包)
    HUST 1352 Repetitions of Substrings(字符串)
    HUST 1358 Uiwurerirexb jeqvad(模拟解密)
    HUST 1404 Hamming Distance(字符串)
    HDU 4520 小Q系列故事――最佳裁判(STL)
    HDU 2058 The sum problem(枚举)
    【破解】修改程序版权、添加弹窗
    HDU 1407 测试你是否和LTC水平一样高(枚举)
    HDU 1050 Moving Tables(贪心)
  • 原文地址:https://www.cnblogs.com/csdttnk/p/3318234.html
Copyright © 2020-2023  润新知