纯css小图标

1.小太阳

HTML部分

<div class="Box" id="Box">
    <!--阳光线条-->
    <div class="box" id="box">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <!--中心太阳-->
    <div class="box1"></div>
</div>

CSS部分

*{
    margin: 0;
    padding: 0;
}
.Box{
    width: 100px;
    height: 100px;
    position: relative;
    margin: 50px auto 0;
}
.box{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    color: #008000;
    font-size: 20px;
    font-weight: bold;
    position: relative;
}
.box span{
    display: inline-block;
    height: 0;
    width: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: 0px;
}
.box span:before{
    display: block;
    content: "";
    width: 15px;
    height: 0;
    border-bottom: 1px solid #000000;
    position: absolute;
    left: 0;
    top: 0;
}
.box span:after{
    display: block;
    content: "";
    width: 15px;
    height: 0;
    border-bottom: 1px solid #000000;
    position: absolute;
    right: 0;
    top: 0;
}
.box span:nth-of-type(1){
    transform: rotate(0deg);
}
.box span:nth-of-type(2){
    transform: rotate(45deg);
}
.box span:nth-of-type(3){
    transform: rotate(90deg);
}
.box span:nth-of-type(4){
    transform: rotate(135deg);
}
.box1{
    display: block;
    content: "";
    width: 50px;
    height: 50px;
    border: 2px solid #000000;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -25px;
    margin-top: -25px;
    border-radius: 50%;
}

JS部分

var oBox=document.getElementById("Box");
var obox=document.getElementById("box");
var timer=null;
var num=0;
oBox.onmouseover=function(){
    clearInterval(timer);
    timer=setInterval(function(){
        num+=1;
        if(num==720){
            clearInterval(timer);
            num=0;
        }
        obox.style.transform="rotate("+num+"deg)"；

　　　　　　obox.style.webkitTransform="rotate("+num+"deg)";
　　　　　　obox.style.MozTransform="rotate("+num+"deg)";
　　　　　　obox.style.msTransform="rotate("+num+"deg)";
　　　　　　obox.style.oTransform="rotate("+num+"deg)";

    },30)
}

 2.五角星

CSS部分

*{
    margin: 0;
    padding: 0;
}
.box{
    width: 300px;
    height: 300px;
    margin: 100px auto 0;
    position: relative;
}
.box span{
    display: block;
    width: 0;
    height: 0;
    border-right:100px solid transparent ;
    border-bottom:70px solid #414141 ;
    border-left:100px solid transparent;
    transform: rotate(35deg);
}
.box:after{
    display: block;
    width: 0;
    height: 0;
    content: "";
    border-right:100px solid transparent ;
    border-bottom:70px solid #414141 ;
    border-left:100px solid transparent;
    position: absolute;
    transform: rotate(-35deg);
    position: absolute;
    left: 0;
    top: 0;
}
.box:before{
    display: block;
    width: 0;
    height: 0;
    content: "";
    border-bottom: 80px solid #414141;
       border-left: 30px solid transparent;
       border-right: 30px solid transparent;
       position: absolute;
       left: 70px;
       top: -60px;
}

HTML部分

<div class="box">
    <span></span>
</div>

 3.邮箱小图标

 

HTML部分

<div class="box">
    <div class="gai"></div>
    <div class="cont"></div>
</div>

CSS部分

*{
    margin: 0;
    padding: 0;
}
.box{
    width: 50px;
    height: 46px;
    position: relative;
    margin: 50px auto 0;
    background: red;
    position: relative;
}
.gai{
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 26px solid transparent;
    border-top: 18px solid #0066CC;
}
.cont{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 25px solid #0066CC;
    border-right: 26px solid #0066CC;
    border-bottom: 24px solid #0066CC;
    border-top: 16px solid transparent;
}

 4.小皇冠

HTML部分

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <div class="mind"></div>
</div>

CSS部分

*{
    margin: 0;
    padding: 0;
}
.box{
    width:100px;
    height:100px;
    margin: 50px auto;
    position: relative;
}
.left,.right{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 40px solid red;
    position: absolute;
        bottom: -5px;
}
.left{
    transform: rotate(-142deg);
    left: -23px;
}
.right{
    transform: rotate(142deg);
    right: -23px;
}
.mind{
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 70px solid red;
    position: absolute;
        bottom: 0px;
        left: 50%;
        margin-left: -30px;
}

 5.实验瓶

HTML部分

<div class="box">
    <span>
        <i></i>
        </span>
</div>

CSS部分

*{
    margin: 0;
    padding: 0;
}
.box{
    width:100px;
    height:100px;
    margin: 50px auto;
    position: relative;
}
span{
    display: block;
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 80px solid red;
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -40px;
}
span:after{
    display: block;
    content: "";
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 30px solid #fff;
    position: absolute;
    left: 50%;
    margin-left: -10px;
    bottom: -75px;
}
span i{
    display: block;
    width: 10px;
    height: 20px;
    background: red;
    position: absolute;
    left: 50%;
    margin-left: -5px;
    top: 0;
}
span i:before{
    display: block;
    content: "";
    width: 30px;
    height: 0;
    border-bottom: 5px solid red;
    position: absolute;
    left: 50%;
    margin-left: -15px;
    top: -5px;
}

 6.小企鹅

HTML部分

        <div class="box">
            <!--企鹅头部-->    
            <span class="header"></span>
            <!--企鹅身子-->
            <span class="body"></span>
            <!--企鹅脚-->
            <span class="footer"></span>
        </div>

CSS部分

*{
    margin: 0;
    padding: 0;
}
.box{
    width: 100px;
    height: 100px;
    position: relative;
    margin: 50px auto 0;
    text-align: center;
}
/*企鹅头*/
.header{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #0088BB;
    display: inline-block;
}
.body{
    width: 32px;
    height: 35px;
    border-radius: 50%;
    background: #0088BB;
    position: absolute;
    left: 50%;
    margin-left: -16px;
    top: 14px;
}
.body:before,
.body:after{
    content: "";
    width: 0;
    height: 0;
    border-top: 20px solid #0088BB;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    position: absolute;
    top: 3px;
}
.body:before{
    left: -5px;
    transform: rotate(44deg);
}
.body:after{
    right: -5px;
    transform: rotate(-44deg);
}
.footer{
    position: absolute;
    width: 30px;
    height: 0;
    border-bottom: 1px solid #0088BB;
    border-top: 1px solid #0088BB;
    border-radius: 100%;
    left: 50%;
    margin-left: -15px;
    top: 47px;
}

7.勋章

HTML部分

        <div class="box">
            <span class="xun_top"></span>
            <div class="xun_cont">
                <div class="star">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>

CSS部分

*{
    margin: 0;
    padding: 0;
}
.box{
    width: 100px;
    height: 100px;
    position: relative;
    margin: 50px auto 0;
    text-align: center;
    position: relative;
}
.xun_top{
    display: inline-block;
    /*position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 0;*/
    height: 0;
    width: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 30px solid #08B;
}
.xun_cont{
    display: inline-block;
    margin-top: -8px;
    width: 95px;
    height: 95px;
    background: #08B;
    border-radius: 50%;
    position: relative;
}
.star{
    width: 50px;
    height: 50px;
    position: absolute;
    left: 25px;
    top: 25px;
}
.star span{
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #fff;
    position: absolute;
}
.star span:nth-of-type(1){
    left: 50%;
    margin-left: -10px;
    top: 0;
    transform: rotate(0deg);
}
.star span:nth-of-type(2){
    transform: rotate(-64deg);
    top: 12px;
    left: -1px;
}
.star span:nth-of-type(3){
    transform: rotate(64deg);
    top: 12px;
    right: 0px;
}
.star span:nth-of-type(4){
    transform: rotate(-145deg);
    bottom: 0;
    left: 4px;
}
.star span:nth-of-type(5){
    transform: rotate(145deg);
    bottom: 0;
    right: 4px;
}
.star:before{
    display: block;
    content: "";
    width: 17px;
    height: 18px;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -8px;
    margin-top: -7px;
}

 8.换皮肤图标

HTML部分

        <div class="box">
            <div class="cont"></div>
        </div>

CSS部分

*{
    margin: 0;
    padding: 0;
}
.box{
    width: 100px;
    height: 100px;
    position: relative;
    margin: 50px auto 0;
    text-align: center;
    position: relative;
}
.cont{
    display: inline-block;
    width: 50px;
    height: 55px;
    background: #08B;
    position: relative;
}
.cont:before,
.cont:after{
    position: absolute;
    content: "";
    width: 45px;
    height: 20px;
    background: #08B;
    top: -8px;
}
.cont:before{
    border-radius: 0 10px 10px 0;
    left: -25px;
    transform: rotate(-40deg);
}
.cont:after{
    border-radius: 10px 0 0 10px;
    right: -25px;
    transform: rotate(40deg);
}

 9.小人图标

HTML

        <div class="box">
            <div class="box1">
                <span class="sp1">
                    <i></i>
                </span>
            </div>
            <div class="box2">
                <span class="sp1">
                    <i></i>
                </span>
            </div>
        </div>

CSS

*{
    margin: 0;
    padding: 0;
}
.box{
    width: 100px;
    height: 100px;
    position: relative;
    margin: 50px auto 0;
    text-align: center;
}
.box1,
.box2{
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.box1 span,
.box2 span{
    position: absolute;
}
.sp1{
    width: 26px;
    height: 34px;
    background: #005599;
    border-radius:45% 45% 50% 50%;
    left: 50%;
    margin-left: -15px;
    top: 10px;
}

.box2 .sp1{
    width: 22px;
    height: 30px;
    background: #fff;
    margin-left: -13px;
    top: 12px;
}
.sp1:before{
    position: absolute;
    content: "";
    width: 10px;
    height: 8px;
    background: #005599;
    left: 50%;
    margin-left: -5px;
    top: 30px;
}
.box2 .sp1:before{
    width: 6px;
    height: 8px;
    background: #fff;
    margin-left: -3px;
    top: 29px;
}
.sp1:after{
    position: absolute;
    content: "";
    width: 42px;
    height: 20px;
    background: #005599;
    position: absolute;
    left: 50%;
    margin-left: -21px;
    bottom: -22px;
    border-radius: 50%;
}
.sp1 i{
    position: absolute;
    width: 42px;
    height: 10px;
    background: #fff;
    bottom: -22px;
    left: 50%;
    margin-left: -21px;
    z-index: 9999;
}
.box2 .sp1 i{
    bottom: -24px;
    border-top: 2px solid #059;
}
.box2 .sp1:after{
    width: 38px;
    height: 16px;
    background: #fff;
    margin-left: -19px;
    bottom: -22px;
}
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/yangxue72/p/7543419.html