css3實現的谷歌瀏覽器圖示程式碼例項

admin發表於2017-02-24
CSSS3谷歌瀏覽器
谷歌瀏覽器是前端人員最為喜歡的瀏覽器之一。

下面就是一段使用css3實現的谷歌瀏覽器圖示效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body {
  position: relative;
}
.chrome {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background: linear-gradient(180deg, #ee6150 0%, #ee6150 40px, transparent 40px, transparent 100%), 
              linear-gradient(295deg, #fdd800 0%, #fdd800 55px, transparent 55px, transparent 100%), 
              linear-gradient(50deg, #58be5b 0%, #58be5b 70px, transparent 70px, transparent 100%);
  transform: translate(50%, 50%);
  overflow: hidden;
}
.chrome:before, .chrome:after {
  content: '';
  position: absolute;
}
.chrome:before {
  width: 0;
  height: 0;
  border-bottom: 70px solid #58be5b;
  border-bottom-width: 80px;
  border-bottom-style: solid;
  border-bottom-color: #58BE5B;
  border-right: 13px solid transparent;
  border-right-width: 35px;
  border-right-style: solid;
  border-right-color: transparent;
  border-left: 22px solid transparent;
  border-left-width: 18px;
  border-left-style: solid;
  border-left-color: transparent;
  left: -4px;
  top: 12px;
  -webkit-transform: rotate(113deg);
  transform: rotate(113deg);
}
.chrome:after {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #3c8fc8;
  border: 5px solid #dbdbdb;
}
</style>
</head>
<body>
  <div class="chrome"></div>
</body>
</html>

相關文章