div+css3做的小图标
来源:互联网 发布:淘宝客推广位是什么 编辑:程序博客网 时间:2024/04/28 12:56
今天做了几个小图标
公司以前的小图标都是用图片,闲着没事,用div+css3动手做了几个上代码
第一个:
<div class="menuBur">
<div class="menuBurBoot"></div>
</div>
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;
}
第二个:
<div class="TVBar">
<div class="TVBarTop"></div>
<div class="TVBarCenter"></div>
<div class="TVBarBoot"></div>
</div>
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
}
第三个:
<div class="menuMain">
<div style="width:100%; height:5px; background:#FF6633;"></div>
<div class="menuMainContair"></div>
</div>
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;
}
第四个:
<div class="noticeImg">
<div class="imgleft"></div>
<div class="imgright">
<div class="imgrightbig"></div>
<div class="imgrightsmall"></div>
</div>
<div class="circle"></div>
</div>
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;
}
最后一个:
<div style="width:100%; height:100px; background:#FF6633; position:absolute">
<div class="install">
<div class="install-squareness"></div>
<div class="install-squareness2"></div>
<div class="install-circle"></div>
</div>
</div>
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;
}
- div+css3做的小图标
- CSS3实现的单div图标
- CSS3实现的单div图标
- CSS3实现三角小图标
- 一个DIV做的LODING动画CSS3动画
- 一个div用CSS3做的loading动画
- css3当中的图标
- 令人难以置信的纯 CSS3 图标
- css3做的迷宫
- 纯CSS3+DIV实现小三角形边框
- DIV + CSS3 和 html5 + CSS3的区别
- 用CSS3实现带小三角形的div框(不用图片)
- 用CSS3实现带小三角形的div框(不用图片)
- 用CSS3实现带小三角形的div框(不用图片)
- 常用的小图标
- 左上角的小图标
- HTML5/CSS3悬浮菜单 可自定义小图标
- CSS3中用自定义字体实现小图标icon
- cocos2d-x-3.4 无法打开包含文件extensions/ExtensionExport.h
- ZigBee帧结构汇总(应用层(APS)、网络层(NWK),MAC层,物理层(PHY))
- hdu 1403 Longest Common Substring(求公共子串长度)
- iOS应用如何跳转到设置界面
- 常见第三方库及其功能简介
- div+css3做的小图标
- Android BaseAdapter 更新数据 notifyDataSetInvalidated() notifyDataSetChanged()
- hive的数据类型和数据模型
- Android中SMS的接收处理
- 决策树,随机森林,boost小结
- java动态缓存成长小纪(三)——缓存大小估算
- 【初级】VS2015/MFC设置工具栏按钮提示
- CentOS / Redhat 上的 Iptables 防火墙配置简介
- android抽屉实现