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

随机推荐

mybatis的一些小总结
好长时间没用mybatis了,现在项目忽然用mybatis,用的过程中出现了些问题,虽然解决了,不过这花的时间有些长了.总结用的过程中出现的一些问题 1.mapper.xml 之前一直用的自动生成,现 ...
selenium结合最新版的sikuli使用
sikuli安装,下载sikulixsetup-1.1.0.jar,地址:https://launchpad.net/sikuli/sikulix/1.1.0 在装有Java环境的机器上直接双击jar ...
python中协程
在引出协成概念之前先说说python的进程和线程. 进程: 进程是正在执行程序实例.执行程序的过程中,内核会讲程序代码载入虚拟内存,为程序变量分配空间,建立 bookkeeping 数据结构,来记录与 ...
SSISDB2：使用TSQL执行Package
在SSISDB中,能够使用TSQL脚本执行Package:每执行一次Package,SSIS都会创建一个Operation 和一个执行实例(Execution Instance),每个Executio ...
这台计算机上缺少此项目引用的 NuGet 程序包-缺少的文件是 ..\packages\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.1.0.0\build\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.props
异常处理汇总-开发工具 http://www.cnblogs.com/dunitian/p/4522988.html 协助开发里面总有几个是极简爱好者,但是呢删了不该删的就会影响项目开发,下面看下完 ...
EasyUI刚加载时候Window窗体自动弹出的解决办法
Nokia 920板砖自救（理论上通用，升级Win10成板砖也可以用这个恢复）
异常处理汇总 ~ 修正果带着你的Net飞奔吧! http://www.cnblogs.com/dunitian/p/4599258.html 个人博客:http://dnt.dkill.net 下载下 ...
Android仿微信二维码扫描
转载:http://blog.csdn.net/xiaanming/article/details/10163203 了解二维码这个东西还是从微信中,当时微信推出二维码扫描功能,自己感觉挺新颖的,从一 ...
【开源】OSharp框架解说系列（2.2）：EasyUI复杂布局及数据操作
OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...
【技巧篇】解决悬浮的<header>、<footer>遮挡内容的处理技巧
引言在现在的前端页面中,尤其是移动端,经常会需要将<header>或者是<footer>模块悬浮出来,跟随页面的滑动保持定位在页面的最上方或者是最下方,如下图所示. “回 ...

强大css3制作新浪LOGO 胜过PS

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

随机推荐

热门专题