div+css3做的小图标

最新推荐文章于 2021-12-15 22:44:22 发布

numlockabc272

最新推荐文章于 2021-12-15 22:44:22 发布

阅读量955

点赞数

CC 4.0 BY-SA版权

分类专栏： html+css3 文章标签： css3 html5 小图标

本文链接：https://blog.youkuaiyun.com/numlockabc272/article/details/47659361

html+css3 专栏收录该内容

2 篇文章

订阅专栏

本文分享了使用纯CSS3技术实现的五个小图标案例，包括菜单按钮、电视形状等，通过灵活运用伪元素及CSS属性，实现了简洁美观的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天做了几个小图标

公司以前的小图标都是用图片，闲着没事，用div+css3动手做了几个上代码

第一个：

css部分：

.menuBur{
width:50px;
height:34px;
background:#fff;
margin:10px auto;
border:1px solid red;
}
.menuBur:before{
z-index:2;
position:absolute;
content:"";
width:40px;
height:6px;
border-radius:3px;
margin:4px 5px;
background:#FF6633;

}
.menuBur:after{
z-index:2;
position:absolute;
content:"";
width:40px;
height:6px;
border-radius:3px;
margin:14px 5px;
background:#FF6633;

}
.menuBurBoot{
z-index:2;
position:absolute;
content:"";
width:40px;
height:6px;
border-radius:3px;
margin:24px 5px;
background: #FF6633;
}

第二个：

css部分：

.TVBar{
width:36px;
height:36px;
background: #FF6633;
margin:10px auto;
border:1px solid red;
}
.TVBar:before{ z-index:1;
position:absolute;
content:"";
width:34px;
height:22px;
background:#FF6633;
margin:1px 1px;
}
.TVBarTop{ width:100%; height:26px; background:white}
.TVBarCenter{ width:10px; height:4px; background:white; margin:0 auto}
.TVBarBoot{ width:20px; height:1px;
background:white;
border-radius:2px;
margin:0 auto
}

第三个：

css部分：

.menuMain{
position: relative;
width:18px;
height:12px;
text-align: center;
background:#FF6633;
margin:50px auto;
}
.menuMain:after {
content: '';
position: absolute;
background:#FF6633;
width:3px;
height:13px;
margin-left:5px;
bottom: 100%;
}

.menuMain:before {
content: '';
position: absolute;
border: 14px solid;
border-bottom-color: #FF6633;
margin-left:-14px;
bottom: 100%;
color: white;

}
.menuMainContair{
width:3px;
height:7px;
margin:0 auto;
background:#FFFFFF;
}

第四个：

css部分：

.noticeImg{
position: relative;
width:30px; height:30px;
background:#FFF;
margin:12px auto;

}
.noticeImg:before{
position:absolute;
content:"";
width:5px;
height:8px;
top:11px;
background:#FF6633;
z-index:102;
border-radius:1px 0 0 1px;
}
.imgleft{
width: 0;
height: 0;
border-top: 15px solid transparent;
border-right: 17px solid #FF6633;
border-bottom: 15px solid transparent;
z-index:100;
position:relative;
float:left;
border-radius:3px;
}
.imgright{
position: relative;
z-index:90;
width:13px; height:30px;
background: #FFF;
float:right;

}
.imgrightbig{ width:10px;; height:18px;
background:#FF6633;
margin:5px auto;
border-radius:1px 12px 12px 1px;
}
.imgrightbig:before{
width:8px;height:14px;
margin:2px 0;
background:#FFF;
border-radius:1px 12px 12px 1px;
z-index: 91;
position: absolute;
content: "";
}
.imgrightbig:after{
width:5px;height:10px;
margin:4px 0;
background:#FF6633;
border-radius:1px 18px 18px 1px;
z-index: 92;
position: absolute;
content: "";
}
.imgrightsmall{ width:4.5px; height:7px;
background:#FFFFFF;
border-radius:1px 2px 2px 1px;
position:relative;
margin-top:-17px;
z-index:93
}
.circle {
width: 0px;
height: 0px;
border-right: 15px solid transparent;
border-top: 14px solid #FFF;
border-left: 14px solid #FFF;
border-bottom: 14px solid #FFF;
border-top-left-radius: 14px;
border-top-right-radius: 14px;
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
z-index:99;
position: relative;
}

最后一个：

css部分：

.install {
width: 26px;
height: 26px;
position: relative;
margin:20px auto;
position: relative;
background:#FF6633
}

.install-squareness{
width:4px;
height:26px;
background:#FFF;
z-index:1;
position: absolute;
margin:0 11px;
transform:rotate(90deg);
border-radius:1px;
}
.install-squareness:before,.install-squareness2:before{
z-index:10;
position:absolute;
content:"";
width:4px;
height:26px;
background:#FFF;
border-radius:1px;
}
.install-squareness:before{
transform:rotate(45deg);

}
.install-squareness2:before{
transform:rotate(45deg);
}
.install-squareness2{
width:4px;
height:26px;
background:#FFF;
z-index:2;
position:relative;
margin:0 auto;
border-radius:1px;
}
.install-circle{
position: relative;
content:"";
background:#FFF;
width:20px;
height:20px;
margin:3px;
border-radius:10px;
margin-top:-23px;
margin-left:3px;
}
.install-circle:before{
z-index:20;
position:absolute;
content:"";
width:12px;
height:12px;
border-radius:12px;
background:#FF6633;
margin:4px;
}
.install-circle:after{
z-index:21;
position:absolute;
content:"";
width:6px;
height:6px;
border-radius:6px;
background:#FFF;
margin:7px;
}