搜索
系统检测到您的用户名不符合规范:

用css3实现thinkPHP的logo

浏览:1678 发布日期:2013年05月29日 分类:功能实现 关键字: CSS3 logo 兼容 主流 浏览器
用css3绘制thinkPHP的logo
兼容chrome,firefox,safari等主流浏览器
<!DOCTYPE html>
<!-- 此版本为镜花水月根据网络资源所修改,兼容chrome,firefox,safari等主流浏览器 -->
<!-- 原版代码在这里 http://www.thinkphp.cn/code/48.html -->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>tp_logo</title>
<meta name="description" content="此版本为镜花水月根据网络资源所修改,兼容chrome,firefox,safari等主流浏览器">
<meta name="keywords" content="CSS3绘制ThinkPHP的logo图标">
<style type="text/css">
.border{border: 1px solid #000;width:200px;margin: 0 auto}
#logo,#left,#right,#bottom{width: 200px;height: 200px;}
#logo{
background-color: #84C255;
border-top-left-radius:30px;
border-bottom-right-radius:30px;
overflow: hidden;
position: relative;
}
#left{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
left: -140px;
background-color: #6FB737;
position: absolute;
}
#right{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
right: -140px;
background-color: #6FB737;
position: absolute;
}
#bottom{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
top: 140px;
background-color: #5E9C2F;
position: absolute;
}
.line{
position: relative;
border-left: 38px solid white;
width: 40px;
height: 70px;
border-bottom-left-radius: 78px 60px;
}
.right{
-webkit-transform: rotate(-120deg);
-moz-transform: rotate(-120deg);
-o-transform: rotate(-120deg);
}
.left{
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
#line1_right{
top:20px;
left: -28px;
}
#line1_left{
top:19px;
left: -68px;
}
#line2_right{
top:-70px;
left: 10px;
}
#line2_left{
top:-71px;
left: -30px;
}
#line3_right{
top:-160px;
left: 48px;
}
#line3_left{
top:-161px;
left: 10px;
}
</style>
</head>
<body>
<center class="border">
<div id="logo">
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div>
<div class="line right" id="line1_right"></div>
<div class="line left" id="line1_left"></div>
<div class="line right" id="line2_right"></div>
<div class="line left" id="line2_left"></div>
<div class="line right" id="line3_right"></div>
<div class="line left" id="line3_left"></div>
</div>
</center>
</body>
</html>
评论() 相关
后面还有条评论,
评论支持使用[code][/code]标签添加代码
您需要登录后才可以评论 登录 | 立即注册
收藏
镜花水月
积分:630 等级:LV2
热点推荐
(追記) (追記ここまで)
最新更新

我们

合作

网站

信息

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。

AltStyle によって変換されたページ (->オリジナル) /