CSS3绘制Google Drive的LOGO

 


HTML:

 

<div id="drive">

  <span>Google Drive</span>

  <div id="sq1"></div>

  <div id="sq2"></div>

  <div id="sq3"></div>  

</div>

 

CSS3:

 

body {

  background: #f5f5eb;

}

#drive {

  top: 20px;

  left: 50%;

  margin-left: -152px;

  position: absolute;

  width: 304px;

  height: 262px;

  -o-transition: transform 1s;

  -moz-transition: transform 1s;

  -webkit-transition: transform 1s;

  transition: transform 1s;

}

#drive:hover {

  -o-transform: rotate(360deg);

  -moz-transform: rotate(360deg);

  -webkit-transform: rotate(360deg);

  transform: rotate(360deg);

}

#sq1 {

  content: '';

  position: relative;

  background: #fcd049;

  background-image: linear-gradient(bottom, #E3AE27 7%, #FCCF49 35%);

background-image: -o-linear-gradient(bottom, #E3AE27 7%, #FCCF49 35%);

background-image: -moz-linear-gradient(bottom, #E3AE27 7%, #FCCF49 35%);

background-image: -webkit-linear-gradient(bottom, #E3AE27 7%, #FCCF49 35%);

background-image: -ms-linear-gradient(bottom, #E3AE27 7%, #FCCF49 35%);

  width: 100px;

  height: 177px;

  -o-transform: translate(153px) skewx(30deg);

  -moz-transform: translate(153px) skewx(30deg);

  -webkit-transform: translate(153px) skewx(30deg);

  transform: translate(153px) skewx(30deg);

}

#sq2 {

  position: relative;

  top: 0px;

  right: -72px;

  background: #3f82f7;

  background-image: linear-gradient(left , #0048E4 7%, #3F82F7 35%);

background-image: -o-linear-gradient(left , #0048E4 7%, #3F82F7 35%);

background-image: -moz-linear-gradient(left , #0048E4 7%, #3F82F7 35%);

background-image: -webkit-linear-gradient(left , #0048E4 7%, #3F82F7 35%);

background-image: -ms-linear-gradient(left , #0048E4 7%, #3F82F7 35%);

  width: 207px;

  height: 85px;

  -o-transform: skewx(-30deg);

  -moz-transform: skewx(-30deg);

  -webkit-transform: skewx(-30deg);

  transform: skewx(-30deg);

}

#sq3 {

  position: absolute;

  top: 28px;

  left: 33px;

  background: #2eb572;

  background-image: linear-gradient(top, #018D47 7%, #2EB572 35%);

background-image: -o-linear-gradient(top, #018D47 7%, #2EB572 35%);

background-image: -moz-linear-gradient(top, #018D47 7%, #2EB572 35%);

background-image: -webkit-linear-gradient(top, #018D47 7%, #2EB572 35%);

background-image: -ms-linear-gradient(top, #018D47 7%, #2EB572 35%);

  width: 84px;

  height: 207px;

  -o-transform: rotate(30deg) skewy(30deg);

  -moz-transform: rotate(30deg) skewy(30deg);

  -webkit-transform: rotate(30deg) skewy(30deg);

  transform: rotate(30deg) skewy(30deg);

}

#drive span {

  display: block;

  text-align: center;

  width: 100%;

  font-family: verdana;

  text-shadow: 0 1px #FFF;

  letter-spacing: -.08em;

  font-size: 24px;

  color: #a7a8a3;

  position: absolute;

  bottom: -50px;

}

 

效果:

 

CSS3绘制GOOGLE DRIVE LOGO.jpg

 

标签: google, LOGO, CSS3

此文章共有条评论, 人参与