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

2024-09-05 12:18:55

字体：大中小

来源：转载

供稿：网友

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

<!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   Articles  ©2013  </footer> </body></html>

上一篇：CSS3逼真水珠特效

下一篇：CSS3 html5+jQuery图片放大镜效果