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

随机推荐

Android开发-之第一个程序：HelloWorld！
小编觉得不管学习什么编程的时候,第一个程序都是要求打印输出一个"HelloWorld!",那就从最简单的HelloWorld开始吧!哈哈~~~~ 一.创建一个Android工程 1 ...
【Win 10应用开发】Adaptive磁贴模板的XML文档结构
在若干天之前,老周给大家讲了Adaptive Toast通知的XML模板,所以相应地,今天老周给大家介绍一下Adaptive磁贴的新XML模板. 同样道理,你依旧可以使用8.1时候的磁贴模板,在win ...
数据结构与算法JavaScript (二) 队列
队列是只允许在一端进行插入操作,另一个进行删除操作的线性表,队列是一种先进先出(First-In-First-Out,FIFO)的数据结构队列在程序程序设计中用的非常的频繁,因为javascript ...
Javascript算法系列之快速排序（Quicksort）
原文出自: http://www.nczonline.net/blog/2012/11/27/computer-science-in-javascript-quicksort/ https://gis ...
ASP.NET Core的配置（1）：读取配置信息
提到"配置"二字,我想绝大部分.NET开发人员脑海中会立马浮现出两个特殊文件的身影,那就是我们再熟悉不过的app.config和web.config,多年以来我们已经习惯了将结构化 ...
scikit-learn 线性回归算法库小结
scikit-learn对于线性回归提供了比较多的类库,这些类库都可以用来做线性回归分析,本文就对这些类库的使用做一个总结,重点讲述这些线性回归算法库的不同和各自的使用场景. 线性回归的目的是要得到输 ...
窥探Swift之新添数据类型元组与可选值
今天的博客中就总结一下关于Swift中相对Objc新添加的两个数据类型:元组(Tuple)和可选值类型(Optional).上面这两个类型是Swift独有的类型,使用起来也是非常方便的,今天就通过一些 ...
Nodejs之MEAN栈开发（四）---- form验证及图片上传
这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能.开始之前需要源码同学可以先在git上fork:https://github.com/stoneniqiu/R ...
HTML5+CSS3实现图片可倾斜摆放的动画相册效果
先看看效果:其中鼠标悬浮在图片上会有动态效果图直接上代码: css文件 @CHARSET "UTF-8"; *{ padding:0px; margin:0px; } div{ ...
sessionid如何产生？由谁产生？保存在哪里？
面试问道这个我居然不知道怎么回答,当然也是因为我确实没有研究过.下面就是百度了一篇文章后简单回答这个问题. 参考:http://www.cnblogs.com/sharpxiajun/p/339560 ...

强大css3制作新浪LOGO 胜过PS

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

随机推荐

热门专题