强大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 动画按钮效果.我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活 ...
随机推荐
- iOS-开发者相关的几种证书
目录 引言 写在前面 一App IDbundle identifier 二设备Device 三开发证书Certificates 证书的概念 数字证书的概念 iOS开发证书 iOS开发证书的根证书 申请 ...
- Exception：HTTP Status 500 - org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)
主要错误信息如下: HTTP Status 500 - org.apache.ibatis.binding.BindingException: Invalid bound statement (not ...
- IOS系列swift语言之课时二
今天我们要讲的就是函数[对于函数,在最后面还有几道题,喜欢的博友可以看了自己做一下,和我交流一下] 当然这与我们的c语言还是有一定的共同之处的,对于有一些c语言或者是java基础的童鞋,我觉得是很容易 ...
- CSS3盒模型display:box;box-flex:3;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- SQL中Group By的使用
1.概述 2.原始表 3.简单Group By 4.Group By 和 Order By 5.Group By中Select指定的字段限制 6.Group By All 7.Group By与聚合函 ...
- SSIS Data Flow 的 Execution Tree 和 Data Pipeline
一,Execution Tree 执行树是数据流组件(转换和适配器)基于同步关系所建立的逻辑分组,每一个分组都是一个执行树的开始和结束,也可以将执行树理解为一个缓冲区的开始和结束,即缓冲区的整个生命周 ...
- jQuery 2.0.3 源码分析 事件绑定 - bind/live/delegate/on
事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应 事件的基础就不重复讲解了,本来是定位源码分析 ...
- Minor【 PHP框架】2.第一个应用与请求的生命周期
框架Github地址:github.com/Orlion/Minor (如果觉得还不错给个star哦(^-^)V) 框架作者: Orlion 知乎:https://www.zhihu.com/peop ...
- Android随笔之——跨进程通信(一) Activity篇
在Android应用开发中,我们会碰到跨进程通信的情况,例如:你用QQ通讯录打电话的时候会调用系统的拨号应用.某些新闻客户端可以将新闻分享到QQ.微信等应用,这些都是跨进程通信的情况.简而言之,就是一 ...
- ASP.NET MVC中使用Unity Ioc Container
写在前面 安装Unity 添加服务层 IArticleRepository类型映射 服务注入到控制器 Global.asax初始化 后记 关于Unity的使用可以参照<Unity依赖注入使用详解 ...