w3ctech

360图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>360图标css实现</title>
    <link rel="stylesheet" href="./ll.css">
</head>
    <body>
    <div class="wrapper">
        <div class="qihu">

            <div class="qihu-cross"></div>
            <div class="qihu-circle-1"></div>
            <div class="qihu-right-bottom-triangle"></div>
            <div class="qihu-semi-circle-1"></div>
            <div class="qihu-half-half-circle"  style="z-index : 10;"></div>
            <div class="qihu-semi-circle-1 rotate-2"   style="z-index : 10;"></div>
        </div>
        <div class="qihu transparent rotate-1 position">
            <div class="qihu-circle-1"  style="z-index : 0;"></div>
        </div>

    </div>
    </body>
</html>

@charset "UTF-8";
* {
    margin: 0;
    padding: 0;
}
body,
html {
    overflow: hidden;
}
body {
    background-color: rgba(226,226,226,1);
}
.wrapper {
    width: 436px;
    height: 436px;
    background-color: rgba(255,255,255,1);
    margin: 105px auto;
    -moz-box-shadow: 0 0 10px 2px rgba(211,211,211,1);
    box-shadow: 0 0 10px 2px rgba(211,211,211,1);
    border-radius: 0; 
}
.qihu {
    background-color: rgba(255,255,0,1);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}
.arrow-1 {
    position: absolute;
    border: 0 solid rgb(0, 0, 0);
    border-top: 35px solid rgba(0,255,1,1);
    border-radius: 49px 0 0 0;
    top: 20px;
    left: 20px;
    width: 120px;
    height: 60px;
    transform: rotate(-15deg);
    transform-origin: right top;
}
.arrow-2 {

}
.qihu-cross {
  background: rgba(0,255,1,1);
  height: 222px;
  position: absolute;
  top: 107px;
  left: 188px;
  width: 60px;
  border-radius: 30px 30px 30px 30px;
  z-index: 20;
}
.qihu-cross::after {
  background: rgba(0,255,1,1);
  content: "";
  height: 60px;
  left: -81px;
  position: absolute;
  top: 81px;
  width: 222px;
  border-radius: 30px 30px 30px 30px;
}
.qihu-rect {
    width: 436px;
    height: 55px;
    position: absolute;
      background: rgba(0,255,1,1);
      border-radius: 2px;    
}
.qihu-circle-1 {
    position: absolute;
    background-color: transparent;
    top: 71px;
    left: -55px;
    width: 436px;
    height: 436px;
    border-radius: 100%;
    box-shadow: 0px 0px 0px 64px rgba(0,255,1,1);
    transform: rotate(-6deg);
    transform-origin: left top;
}
.qihu-arc-1 {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    border-top: 100px solid red;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.qihu-right-bottom-triangle {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    border: 0px solid transparent;
    border-left: 436px solid transparent;
    border-bottom: 436px solid rgba(255,255,0,1); 
}
.qihu-semi-circle-1 {
    position: absolute;
    top: 72px;
    left: 269px;
    height: 32px;
    width: 64px;
    border-radius: 32px 32px 0 0 / 42px 32px 0 0;
    background-color: rgba(0,255,1,1);
    transform: rotate(112deg);
    transform-origin: right bottom;
}
.transparent {
    background-color: transparent;
}
.border-transparent {
    border: transparent;
}
.rotate-1 {
    transform: rotate(179deg);
}
.qihu-left-top-triangle {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    border: 0px solid transparent;
    border-right: 436px solid rgba(255,255,0,1);
    border-top: 436px solid transparent; 
}
.position {
    left: 0px;
    top: -436px;
}
.z-index-100 {
    z-index: 100;
}
.z-index-80 {
    z-index: 80;
}
.qihu-half-half-circle {
    position: absolute;
    width: 232px;
    height: 232px;
    top: 146px;
    left: -72px;
    border-bottom-left-radius: 100%;
    transform: rotate(45deg);
    background-color: rgba(255,255,0,1);
}
.rotate-2 {
    transform: rotate(-45deg);
    transform-origin: 253px 407px;
    background-color: rgba(0,255,1,1);
     border-radius: 32px 32px 0 0 / 42px 32px 0 0;
}

实现的思路待续

w3ctech微信

扫码关注w3ctech微信公众号

共收到4条回复

  • xxdd 2015-09-28 09:24

    666

    回复此楼

  • 雨雪天气 2015-09-30 18:00

    看你在群里说到画这个。。。正好有闲也去玩了会儿，觉得，画图这种事情还是交给canvas啊svg啊webgl这种好了。。。

    http://halfdogstudio.github.io/css-for-fun/

    ps：为啥你写东西喜欢待续。。。

    回复此楼

  • 流浪大法师 2015-09-30 19:03

    @雨雪天气 我应该知道你是谁啦，我记得css魔法哥说过，用css画图就是好玩，剩下的就没什么了，因为有些东西还需要完善，所以等自己真正写好的话再来修改，于是附加了待续

    回复此楼

  • 流浪大法师 2015-09-30 19:32

    @xxdd 没有你想得那么高大上，你也可以试一试的呀

    回复此楼