强大css3制作新浪LOGO 胜过PS

请使用支持CSS3的浏览器查看效果：
http://keleyi.com/a/bjad/6lu3dgj8.htm

效果图：

完整代码如下：

 <html>

 <head>

 <title>CSS3新浪LOGO-柯乐义</title>

 <style>

 .sina{ margin:60px 0 0 22px;}

 .head{ position:relative; width:195px; height:220px;}

 .head_bg{ position:absolute; width:200px; height:175px; background:#ab2b41; left:6px; z-index:6;

 -moz-border-radius-topleft:200px 180px;

 -moz-border-radius-topright: 200px 180px;

 -moz-border-radius-bottomleft: 200px 180px;

 -moz-border-radius-bottomright: 200px 180px;

 -webkit-border-radius:200px 180px;

 -moz-transform: rotate(-6deg);

 -webkit-transform:rotate(-6deg);

 -moz-box-shadow:1px 4px 3px #333;

 -webkit-box-shadow:1px 4px 3px #333;

 border:1px solid #c03461;

 }

 .head_top{  position:absolute; top:-3px; left:5px; width:197px; height:167px;z-index:7;

 -moz-border-radius-topleft:200px 180px;

 -moz-border-radius-topright:200px 180px;

 -moz-border-radius-bottomleft:200px 180px;

 -moz-border-radius-bottomright:200px 180px;

 -webkit-border-radius:200px 180px;

 -moz-transform:rotate(-6deg);

 -webkit-transform:rotate(-6deg);

 background: -moz-linear-gradient(left top, #e16591, #ce3551 50%);

 background: -webkit-gradient(linear, 0 0, 0 50%, from(#e16591), to(#ce3551));

 }

 .head_shadow{ position:absolute; width:190px; height:162px;  top:2px; left:10px; z-index:8;

 -moz-border-radius-topleft:200px 180px;

 -moz-border-radius-topright:200px 180px;

 -moz-border-radius-bottomleft:200px 180px;

 -moz-border-radius-bottomright:200px 180px;

 -webkit-border-radius:200px 180px;

 background: -moz-linear-gradient(left top, white, #ce3552 50%);

 background: -webkit-gradient(linear, left top, 10% 50%, from(#fff), to(#ce3552));

 }

 .head_a1{ width:54px; height:45px; position:absolute; top:-24px; right:32px;background:#d53960; z-index:5;

 border:1px solid #c03461;

 -moz-border-radius:180px 0;

 -webkit-border-radius:180px 0 180px 0;

 -moz-transform: rotate(-6deg);

 -webkit-transform:rotate(-6deg);

 -moz-box-shadow:4px 4px 0px #c03461;

 -webkit-box-shadow:4px 4px 0px #c03461;

 }

 .head_a1 .top{width:100px; height:100px; position:absolute; top:-80px; right:-11px; background:#fff; z-index:1;

 -moz-border-radius:135px;

 -webkit-border-radius:135px;

 }

 .head_a1 .body{width:23px; height:23px; position:absolute; top:-10px; right:-3px; background:#d53960; z-index:2;

 -moz-border-radius:135px 135px 135px 0;

 -webkit-border-top-left-radius:135px;

 -webkit-border-top-right-radius:135px;

 -webkit-border-bottom-right-radius:135px;

 -webkit-border-bottom-left-radius:0;

 -moz-transform: rotate(-60deg);

 -webkit-transform: rotate(-60deg);

 -moz-box-shadow:3px 4px 0px #c03461;

 -webkit-box-shadow:3px 4px 0px #c03461;

 }

 .head_a1 .shadow{width:19px; height:19px; position:absolute; top:-8px; right:-2px; z-index:3;

 -moz-border-radius:135px 135px 135px 0;

 -webkit-border-radius:135px 135px 135px 0;

 -moz-transform: rotate(-60deg);

 -webkit-transform: rotate(-60deg);

 background: -moz-linear-gradient(top, white, #ce3552 50%);

 background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552));

 }

 .head_a2{ width:60px; height:45px; position:absolute; top:-22px; right:-13px;background:#d53960; z-index:4;

 border:1px solid #c03461;

 -moz-border-radius:180px 0;

 -webkit-border-radius:180px 0 180px 0;

 -moz-transform: rotate(-10deg);

 -webkit-transform: rotate(-10deg);

 -moz-box-shadow:4px 4px 0px #c03461;

 -webkit-box-shadow:4px 4px 0px #c03461;

 }

 .head_a2 .top{width:40px; height:38px; position:absolute; top:-12px; right:7px; background:#fff; z-index:1;

 -moz-border-radius:180px 0 180px 0;

 -webkit-border-radius:180px 0 180px 0;

 -moz-transform: rotate(20deg);

 -webkit-transform: rotate(20deg);

 }

 .head_a2 .body{width:23px; height:23px; position:absolute; top:-10px; right:-3px; background:#d53960; z-index:2;

 -moz-border-radius:135px 135px 135px 0;

 -webkit-border-radius:135px 135px 135px 0;

 -moz-transform: rotate(-60deg);

 -webkit-transform: rotate(-60deg);

 -moz-box-shadow:3px 4px 0px #c03461;

 -webkit-box-shadow:3px 4px 0px #c03461;

 }

 .head_a2 .shadow{width:19px; height:19px; position:absolute; top:-8px; right:-1px; z-index:3;

 -moz-border-radius:135px 135px 135px 0;

 -webkit-border-radius:135px 135px 135px 0;

 -moz-transform: rotate(-60deg);

 -webkit-transform: rotate(-60deg);

 background: -moz-linear-gradient(top, white, #ce3552 50%);

 background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552));

 }

 .head_a3{ width:80px; height:47px; position:absolute; top:6px; right:-46px;background:#d53960; z-index:3;

 border:1px solid #c03461;

 -moz-border-radius:100px 0 110px 0;

 -webkit-border-radius:100px 0 110px 0;

 -moz-transform: rotate(-10deg);

 -webkit-transform: rotate(-10deg);

 -moz-box-shadow:4px 4px 0px #c03461;

 -webkit-box-shadow:4px 4px 0px #c03461;

 }

 .head_a3 .top{width:67px; height:38px; position:absolute; top:-18px; right:15px; background:#fff; z-index:1;

 -moz-border-radius:180px 0 180px 0;

 -webkit-border-radius:180px 0 180px 0;

 -moz-transform: rotate(40deg);

 -webkit-transform: rotate(40deg);

 }

 .head_a3 .body{width:23px; height:23px; position:absolute; top:-8px; right:-1px; background:#d53960; z-index:2;

 -moz-border-radius:135px 135px 135px 0;

 -webkit-border-radius:135px 135px 135px 0;

 -moz-transform: rotate(-72deg);

 -webkit-transform: rotate(-72deg);

 -moz-box-shadow:3px 4px 0px #c03461;

 -webkit-box-shadow:3px 4px 0px #c03461;

 }

 .head_a3 .shadow{width:19px; height:19px; position:absolute; top:-6px; right:0px; z-index:3;

 -moz-border-radius:135px 135px 135px 0;

 -webkit-border-radius:135px 135px 135px 0;

 -moz-transform: rotate(-60deg);

 -webkit-transform: rotate(-60deg);

 background: -moz-linear-gradient(top, white, #ce3552 50%);

 background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552));

 }

 .head_a4{ width:80px; height:47px; position:absolute; top:44px; right:-55px; background:#d53960; z-index:2;

 border:1px solid #c03461;

 -moz-border-radius:80px 0 110px 0;

 -webkit-border-radius:80px 0 110px 0;

 -moz-transform: rotate(8deg);

 -webkit-transform: rotate(8deg);

 -moz-box-shadow:4px 4px 0px #c03461;

 -webkit-box-shadow:4px 4px 0px #c03461;

 }

 .head_a4 .top{width:67px; height:38px;position:absolute; top:-18px; right:13px; background:#fff; z-index:1;

 -moz-border-radius:180px 0 180px 0;

 -webkit-border-radius:180px 0 180px 0;

 -moz-transform: rotate(40deg);

 -webkit-transform: rotate(40deg);

 }

 .head_a4 .body{width:23px; height:23px; position:absolute; top:-9px; right:-2px; background:#d53960; z-index:2;

 -moz-border-radius:135px 135px 135px 0;

 -webkit-border-radius:135px 135px 135px 0;

 -moz-transform: rotate(-70deg);

 -webkit-transform: rotate(-70deg);

 -moz-box-shadow:3px 4px 0px #c03461;

 -webkit-box-shadow:3px 4px 0px #c03461;

 }

 .head_a4 .shadow{width:19px; height:19px; position:absolute; top:-7px; right:-1px; z-index:3;

 -moz-border-radius:135px 135px 135px 0;

 -webkit-border-radius:135px 135px 135px 0;

 -moz-transform: rotate(-70deg);

 -webkit-transform: rotate(-70deg);

 background: -moz-linear-gradient(top, white, #ce3552 50%);

 background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552));

 }

 .head_a5{ width:54px; height:45px; position:absolute; top:87px; right:-45px; background:#d53960; z-index:1;

 border:1px solid #c03461;

 -moz-border-radius:135px 0 180px 0;

 -webkit-border-radius:135px 0 180px 0;

 -moz-transform: rotate(35deg);

 -webkit-transform: rotate(35deg);

 -moz-box-shadow:4px 4px 0px #c03461;

 -webkit-box-shadow:4px 4px 0px #c03461;

 }

 .head_a5 .top{width:100px; height:100px; position:absolute; top:-78px; right:-7px; background:#fff; z-index:1;

 -moz-border-radius:135px;

 -webkit-border-radius:135px;

 }

 .head_a5 .body{width:23px; height:23px; position:absolute; top:-6px; right:0px; background:#d53960; z-index:2;

 -moz-border-radius:135px 135px 135px 0;

 -webkit-border-radius:135px;

 -moz-transform: rotate(-70deg);

 -webkit-transform: rotate(-70deg);

 -moz-box-shadow:3px 4px 0px #c03461;

 -webkit-box-shadow:3px 4px 0px #c03461;

 }

 .head_a5 .shadow{width:19px; height:19px; position:absolute; top:-4px; right:2px; z-index:3;

 -moz-border-radius:135px 135px 135px 0;

 -webkit-border-radius:135px 135px 135px 0;

 -moz-transform: rotate(-70deg);

 -webkit-transform: rotate(-70deg);

 background: -moz-linear-gradient(top, white, #ce3552 50%);

 background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552));

 }

 .eye{ position:absolute; top:47px; left:27px; width:161px; height:88px; z-index:10;

 -moz-transform: rotate(-2deg);

 -webkit-transform: rotate(-2deg);

 }

 .eye1{ position:absolute; top:57px; left:59px; width:8px; height:8px; background:#fff; z-index:5;

 -moz-border-radius:180px;

 -webkit-border-radius:180px;

 }

 .eye2{ position:absolute; top:29px; left:81px; width:22px; height:22px; background:#fff; z-index:4;

 -moz-border-radius:180px;

 -webkit-border-radius:180px;

 }

 .eye3{ position:absolute; top:25px; left:56px; width:47px; height:47px; background:#000; z-index:3;

 -moz-border-radius:180px;

 -webkit-border-radius:180px;

 }

 .eye4{ position:absolute; top:14px; left:46px; width:67px; height:67px; border:1px solid #312613; background:#66383d; z-index:2;

 -moz-border-radius:180px;

 -webkit-border-radius:180px;

 -moz-box-shadow:0px 0px 5px #000;

 -webkit-box-shadow:0px 0px 5px #000;

 }

 .eye5{ position:absolute; top:1px; left:8px; width:137px; height:86px; background:#fff; z-index:1;

 border-top:5px solid #999;border-left:5px solid #999;

 -moz-border-radius:300px 30px 300px 30px;

 -webkit-border-radius:300px 30px 300px 30px;

 -moz-transform: rotate(20deg);

 -webkit-transform: rotate(20deg);

 -moz-box-shadow:0px -7px 0 #ec9dc2;

 -webkit-box-shadow:0px -7px 0 #ec9dc2;}

 </style>

 </head>

 <body>

 <a href="http://keleyi.com/a/bjad/6lu3dgj8.htm">查看效果</a>

 <div class="sina">

   <div class="head">

     <div class="head_bg"></div>

     <div class="head_top"></div>

     <div class="head_shadow"></div>

     <div class="head_a1">

       <div class="top"></div>

       <div class="body"></div>

       <div class="shadow"></div>

     </div>

     <div class="head_a2">

       <div class="top"></div>

       <div class="body"></div>

       <div class="shadow"></div>

     </div>

     <div class="head_a3">

       <div class="top"></div>

       <div class="body"></div>

       <div class="shadow"></div>

     </div>

     <div class="head_a4">

       <div class="top"></div>

       <div class="body"></div>

       <div class="shadow"></div>

     </div>

     <div class="head_a5">

       <div class="top"></div>

       <div class="body"></div>

       <div class="shadow"></div>

    </div>

     <div class="eye">

       <div class="eye1"></div>

       <div class="eye2"></div>

       <div class="eye3"></div>

       <div class="eye4"></div>

       <div class="eye5"></div>

     </div>

   </div>

 </div>

 </body>

 </html>

web前端：http://www.cnblogs.com/jihua/p/webfront.html

强大css3制作新浪LOGO 胜过PS的更多相关文章

新浪微博logo已经去掉了“新浪”二字
如果有一天我能做出一个产品,它的命名就以我所在的行业命名该多好啊,可惜那只是一个梦.但这样的梦新浪微博却实现了,今天我登陆新浪微博的时候发现logo已经去掉了“新浪”二字,我开始还以为我自己的电脑网 ...
[threeJs][新浪股票api][css3]3D新浪财经数据-最近A股涨的也太疯了......
使用threeJS搭配新浪股票财经API 在线: http://wangxinsheng.herokuapp.com/stock 截图: A股涨幅榜[一片红10%] 检索[单击添加到自选内,自选使用l ...
豪情-CSS解构系列之-新浪页面解构-01
目录: 一. 新浪的布局特点二. 内容细节的特点三. 其中相关的一些基础技术点 1. 常见布局方法 2. 布局要点 3. Debugger误区 4.列表 5.字体颜色 6.CSS选择符 7.CSS ...
css3制作动画性能问题
这篇文章主要讲的是怎样制作流畅动画,特别是针对移动端.在这里我首先介绍制作动画的几种方法的优缺点:接着会着重介绍用css3制作动画的注意事项. 1.用canvas.css3.jquery制作动画 Ca ...
css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片思路:1.制作之前呢,我们先来 ...
ip地址库新浪，淘宝
原文连接地址:http://www.9958.pw/post/city_ip function getAddressFromIp($ip){ $urlTaobao = 'http://ip.taoba ...
新浪计数业务之Redis
今天听一个同事说新浪使用的是Redis,于是自己将研究的过程整理出来以备后用. 我们都知道微博这玩意儿现在很火,新浪作为国内最早使用redis,并且是国内最大的redis使用者,当然备受人们关注.新浪 ...
MWeb 1.3.7 发布！增加发布到 Wordpress 等支持 MetaWeblog API 的服务，如：Wordpress 博客、新浪博客、cnblogs、oschina。
MWeb 1.3.7 版的新功能增加发布到 Wordpress 等支持 Metaweblog API 的服务,目前经测试过的有: Wordpress 博客.新浪博客.cnblogs.oschina. ...
使用 CSS3 制作一组超时尚的动画按钮效果
通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一些 CSS3 动画按钮效果.我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活 ...

随机推荐

JMeter--二、在Windows环境上搭建wordpress
为了学习使用JMeter,在Windows环境上搭建了wordpress. 使用JMeter录制或是编写登录worepress.编辑文章.删除文章的脚本. 首先了解一下wordpress是什么? Wo ...
Java中Eclipse的使用
Eclipse是跨平台的自由集成开发环境(IDE),初衷主要为Java语言的定制.第一次使用就喜欢上了它.它可以帮我们导入包,而不需要我们导入,有很多快捷键提供我们使用,方便节省时间:最值得我喜欢的是 ...
AngularJs入门之表单开发
本文和大家分享的主要是前端开发中必备的AngularJs框架表单开发相关基础知识,希望对大家使用和学习AngularJs有所帮助. 1.简单的表单提交: 2.更多的表单元素: 3.初始化表单: 代码 ...
LINQ系列：Linq to Object限制操作符
1. Where 限制操作符Where用于过滤序列,按照提供的逻辑对序列中的数据进行过滤.Where可以出现多次. 1.1 原型定义 public static IEnumerable<TSou ...
Android 文件读写
一.分类文件读写作为Android四大数据存储方式之一,又分为内部存储和外部存储两种: (1)内部存储(Internal storage): 总是可用. 文件默认情况存储在/data/data/包名 ...
重磅开源:TN文本分析语言
tn是desert(沙漠之鹰)和tan共同开发的一种用于匹配,转写和抽取文本的语言(DSL).并为其开发和优化了专用的编译器.基于递归下降方法和正则表达式,能解析自然文本并转换为树和字典,识别时间,地 ...
塞翁失马，焉知非福：由 Styles.Render 所引发 runAllManagedModulesForAllRequests="true" 的思考
最近在使用 MVC 开发的时候,遇到一个对我来说"奇怪的问题",就是使用 BundleTable 进行 CSS.JS 文件绑定,然后使用 Styles.Render.Scripts ...
EntityFramework 7 Left Join Where is error(Test record)
First of all, my English is very poor, so I may not be a very good expression, very sorry! In this b ...
如何为RD网关创建自建签名的证书
创建安全的RD网关是一件非常好的事情,这样可以在公网环境下直接远程接入内部的已开启远程访问的主机服务器. 建立这个安全的RD网关需要的材料有RD网关本身,以及一个证书.由于一般情况下这些在RD网关后面 ...
hibernate笔记--实体类映射文件"*.hbm.xml"详解
实体类就是指普通的POJO,Hibernate并不知道那个实体类对应数据库的哪一张表,所以还需要配置一下,常用的方式就是*.hbm.xml文件[配置与@注解配置,这里介绍前者的详细属性: <?x ...

强大css3制作新浪LOGO 胜过PS

强大css3制作新浪LOGO 胜过PS的更多相关文章

随机推荐

热门专题