<!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微信公众号
666
看你在群里说到画这个。。。正好有闲也去玩了会儿,觉得,画图这种事情还是交给canvas啊svg啊webgl这种好了。。。
http://halfdogstudio.github.io/css-for-fun/
ps:为啥你写东西喜欢待续。。。
@雨雪天气 我应该知道你是谁啦,我记得css魔法哥说过,用css画图就是好玩,剩下的就没什么了,因为有些东西还需要完善,所以等自己真正写好的话再来修改,于是附加了待续
@xxdd 没有你想得那么高大上,你也可以试一试的呀
共收到4条回复