狠简单的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>
忘了传效果图(谷歌浏览器下):