360图标

最新推荐文章于 2021-07-20 02:18:51 发布

tangzhishi86411

最新推荐文章于 2021-07-20 02:18:51 发布

阅读量1.9k

点赞数

<!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: >http://www.0771ybyy.com/news/1817.html<0;
}
body,
html {
    overflow: hidden;
}
body {
    background-color: >http://www.0771ybyy.com/news/1816.html<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>http://www.0771ybyy.com/news/1815.html< 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: >http://www.0771ybyy.com/news/1814.html<50%;
    position: relative;
    overflow: hidden;
}
.arrow-1 >http://www.0771ybyy.com/news/1812.html<{
    position: absolute;
    border: 0 solid rgb(0, 0, 0);
    border-top: 35px solid rgba(0,255,1,1);
    border-radius: 4>http://www.0771ybyy.com/news/1813.html<9px 0 0 0;
    top: 20px;
    left: 20px;
    width: 120px;
    height: 60px>http://www.0771ybyy.com/news/1811.html<;
    transform: rotate(-15deg);
    transfo>http://www.0771ybyy.com/news/1810.html<rm-origin: right top;
}
.arrow-2 {

}
.qihu-cross {
  background: rgba(0,255,1,1);
  height: 222px;
  position: absolute;
  top: 107>http://www.0771ybyy.com/news/1808.html<px;
  left: 188px;
  width: 60px;
  border-radius: 30px 30px 30px 30px;
  z-index: 20;
}
.qihu-cross::after {
  background: rgba>http://www.0771ybyy.com/news/1809.html<(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: r>http://www.0771ybyy.com/news/1806.html<gba(0,255,1,1);
      border-radius: 2px;    
}
.qihu-circle-1 {
    position: absolute;
    background-color: transparent;
    top: 71px;
    left: -55px;
    width: 43>http://www.0771ybyy.com/news/1807.html<6px;
    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: 70p>http://www.0771ybyy.com/news/1804.html<x 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:>http://www.0771ybyy.com/news/1805.html< 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: 3>http://www.0771ybyy.com/news/1802.html<2px;
    width: 64px;
    border-radius: 32px 32px 0 0 / 42px 32px 0 0;
    background-color: rgba(0,255,1,1);
    transform: rotate(112deg);
    transform-or>http://www.0771ybyy.com/news/1803.html<igin: right bottom;
}
.transparent {
    background-co>http://www.0771ybyy.com/news/1800.html<lor: transparent;
}
.border-transparent {
    border: transparent;
}
.rotate-1 >http://www.0771ybyy.com/news/1801.html<{
    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 >http://www.0771ybyy.com/news/1799.html<solid transparent;
    border-right: 436px solid rgba(255,255,0,1);
    border-top>http://www.0771ybyy.com/news/1798.html<: 436px solid transparent; 
}
.position {
    left: 0px;
    top: -436px;
}
.z-index-100 >http://www.0771ybyy.com/news/1797.html<{
    z-index: 100;
}
.z-index-80 {
    z-index>http://www.0771ybyy.com/news/1796.html<: 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;
}

实现的思路待续

tangzhishi86411

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
360图标

lang="en"> charset="UTF-8"> 360图标css实现 rel="stylesheet" href="./ll.css"> class="wrapper"> class="qihu"> class="qihu-cross"> class="qihu-ci
复制链接

扫一扫