CSS3设计出花朵图案的网站Logo标志

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

jerry

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>CSS3实现花朵图案的网站标志</title>
<style>
#adidas .canvas{background: #017ac3;}
#adidas .icon{left: 230px;position: absolute;top: 10px;}
#adidas .leaf-t1,
#adidas .leaf-t2{background: #fff;border-radius: 204px/280px;clip: rect(18px 43px 255px 0px);height: 280px;position: absolute;top: -36px;width: 194px;}
#adidas .leaf-t2{left: -109px;position: absolute;-o-transform: rotate(180deg);-moz-transform: rotate(180deg);-ms-transform: rotate(180deg);-webkit-transform: rotate(180deg);transform: rotate(180deg);}
#adidas .leaf1 .leaf-t1,
#adidas .leaf1 .leaf-t2{height: 250px;}
#adidas .leaf2 .leaf-t1,
#adidas .leaf2 .leaf-t2,
#adidas .leaf3 .leaf-t1,
#adidas .leaf3 .leaf-t2{clip: rect(20px 38px 220px 0px );height: 240px;}
#adidas .leaf1{position: absolute;top: 50px;}
#adidas .leaf2{left: -130px;position: absolute;top: 131px;-o-transform: rotate(-40deg);-moz-transform: rotate(-40deg);-ms-transform: rotate(-40deg);-webkit-transform: rotate(-40deg);transform: rotate(-40deg);}
#adidas .leaf2 .leaf-t1,
#adidas .leaf2 .leaf-t2{border-radius: 200px/287px;width: 200px;}
#adidas .leaf2 .leaf-t1{left: 5px;}
#adidas .leaf2 .leaf-t2{left: -120px;}
#adidas .leaf3{left: 151px;position: absolute;top: 77px;-o-transform: rotate(40deg);-moz-transform: rotate(40deg);-ms-transform: rotate(40deg);-webkit-transform: rotate(40deg);transform: rotate(40deg);}
#adidas .leaf3 .leaf-t1,
#adidas .leaf3 .leaf-t2{border-radius: 200px/287px;width: 200px;}
#adidas .leaf3 .leaf-t1{left: 4px;}
#adidas .leaf3 .leaf-t2{left: -121px;}
#adidas .stripes{height: 50px;left: -19px;position: absolute;top: 160px;width: 110px;z-index: 10;}
#adidas .stripe{background: #017ac3;height: 12px;left: -98px;margin-bottom: 12px;position: relative;top: 0px;width: 320px;}
#adidas .header h2{text-indent: -57px;}
.canvas{display: block;overflow: hidden;position: relative;top: 0px;text-indent: -9999px;z-index: 10;}
.icon, .icon *{display: block;position: absolute;}
.monitor,
.monitor .canvas{height: 304px;width: 540px;}
.monitor{background: #000;border: 30px solid #000;border-radius: 20px;float: left;position: relative;}
.monitor: before{box-shadow: 0 360px 10px rgba(0,0,0,0.2);border-radius: 50%;content: "#";display: block;height: 20px;left: 30px;position: absolute;text-indent: -9999px;width: 540px;}
.monitor: after{background: -webkit-linear-gradient(top left, rgba(255,255,255,0) 60%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0) 100%);border-radius: 20px 20px 0 0;height: 364px;content: "#";display: block;position: absolute;right: -30px;text-indent: -9999px;top: -30px;width: 600px;z-index: 10;}
footer{font: 14px/1.3 'Microsoft YaHei';margin-top: 150px;color: #000;font-size: 15px;line-height: 1.6;padding: 60px 20px 0;text-align: center;display: block;}
footer a{color: #000;text-decoration: none;}
footer a: hover{text-decoration: underline;}
</style>
</head>
<body>
  <div id="adidas">
    <div class="monitor">
      <div class="canvas">
          <div class="icon">
              <div class="leaf1">
                  <div class="leaf-t1"></div>
                  <div class="leaf-t2"></div>
              </div>
              <div class="leaf2">
                  <div class="leaf-t1"></div>
                  <div class="leaf-t2"></div>
              </div>
              <div class="leaf3">
                  <div class="leaf-t1"></div>
                  <div class="leaf-t2"></div>
              </div>
              <div class="stripes">
                  <div class="stripe"></div>
                  <div class="stripe"></div>
                  <div class="stripe"></div>
              </div>
          </div>
      </div>
    </div>
  </div>
<footer>Tutorial by &nbsp;&nbsp;<a href="http://www.shouce.ren/texiao/" target="_blank">Articles</a>&nbsp;&nbsp;&copy;2013&nbsp;&nbsp;</footer> 
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

CSS3设计出花朵图案的网站Logo标志

分类

CSS3

描述

HTML5+css3实现网站标志，也就是大家熟悉的Logo，以花朵为基础扩展的LOGO标志，基于CSS3的Canvas技术绘制，无需使用图片，完全CSS3代码编写出来的，对于想学习HTML5和CSS3的朋友来说，非常实用哦，相信在以后，CSS3技术会成为前端设计的...