强大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 动画按钮效果.我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活 ...

随机推荐

python中协程
在引出协成概念之前先说说python的进程和线程. 进程: 进程是正在执行程序实例.执行程序的过程中,内核会讲程序代码载入虚拟内存,为程序变量分配空间,建立 bookkeeping 数据结构,来记录与 ...
MongoDB 搭建副本集
副本集(Replica Set)是一组MongoDB实例组成的集群,由一个主(Primary)服务器和多个备份(Secondary)服务器构成.通过Replication,将数据的更新由Primary ...
【WP开发】不同客户端之间传输加密数据
在上一篇文章中,曾说好本次将提供一个客户端之间传输加密数据的例子.前些天就打算写了,只是因一些人类科技无法预知的事情发生,故拖到今天. 本示例没什么技术含量,也没什么亮点,Bug林立,只不过提供给有需 ...
JAVA基础代码分享--求圆面积
问题描述用户输入圆的半径,计算并显示圆的面积代码分享 /** * @author hpu-gs * 2015/11/25 */ public class Circle { public stati ...
DOM-Node类型
DOM(文档队形模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次化的节点树,允许开发人员添加,移除和修改页面的一部分.DOM可以讲任何HTML和XML文档描绘成一 ...
position:fixed和scroll实现div浮动【示例】
前言在自己建站的过程中,要实现一个div随滚动条浮动的效果,网上找了些示例不太好用,还是自己动手,丰衣足食,写的不好请大家谅解,毕竟我不是搞前端的,因为自己建站毕竟每一步都必须自己来,这边只是做个记 ...
centos7 mysql数据库安装和配置
一.系统环境 yum update升级以后的系统版本为 [root@yl-web yl]# cat /etc/redhat-release CentOS Linux release 7.1.1503 ...
Fragment基础----信息传递
如何通过activity来访问fragment的信息呢,我们可以通过一个实例来了解. 使用两个Fragment和一个activity管理效果图: 第一个fragment来表示输入框第二个fragm ...
YAML 语法
YAML 语法来源:yaml 这个页面提供一个正确的 YAML 语法的基本概述, 它被用来描述一个 playbooks(我们的配置管理语言). 我们使用 YAML 是因为它像 XML 或 JSON ...
AD域登录验证
AD域登录验证作者:Grey 原文地址:http://www.cnblogs.com/greyzeng/p/5799699.html 需求系统在登录的时候,需要根据用户名和密码验证连接域服务器进行 ...

强大css3制作新浪LOGO 胜过PS

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

随机推荐

热门专题