CSS3+font字体样式文档完成圆形半全透明菜单实际

2021-01-20 11:22 jianzhan

在平时新项目中,有时候也会涉及到1些前端开发的设计方案,但终究并不是技术专业的,因此1直要想系统软件的学习培训1下。近期离职了,等候入职新企业的期内,有时间折腾学习培训1些CSS3的专业知识。
今日就从1个简易的圆形菜单的完成,来总结1些近期学习培训的获得。实际效果图以下:


下面,就看来看这个圆形半全透明的菜单怎样完成:
1. 大家应用1个 ul 来制做菜单,编码以下:

拷贝编码
编码以下:

<ul>
<li>
<a href="#">
<span>主页</span>
</a>
</li>
<li>
<a href="#">
<span>客户</span>
</a>
</li>
<li>
<a href="#">
<span>主题活动</span>
</a>
</li>
</ul>

实际效果以下:


2. 为ul加上款式(ulMenu)和其下的li,a,span,清理1下菜单:

拷贝编码
编码以下:

.ulMenu {
list-style: none;
}
.ulMenu li {
float: left;
height: 80px;
width: 80px;
padding: 0;
margin: 0;
text-align: center;
list-style: none;
margin: 10px 10px 0 0;
}
.ulMenu li a {
display: block;
height: 100%;
padding: 0 15px;
font-size: 12px;
font-weight: bold;
color: #ccc;
text-decoration: none;
}
.ulMenu li a span {
display: block;
}

实际效果以下:

3. 怎样让菜单变为圆的,实际上要是先将元素设定为长宽相同的正方形,再设定圆角为其长度的1半便可,比如,此事例中,li 的长宽是80px,则大家设定其圆角为40px,大家将 li 的款式改成以下,提升圆角和情况色:

拷贝编码
编码以下:

.ulMenu li
{
float: left;
height: 80px;
width: 80px;
padding: 0;
margin: 0;
text-align: center;
list-style: none;
background: rgba(0,0,0,0.3);
border-radius: 40px;
-moz-border-radius:40px;
-webkit-border-radius: 40px;
margin:10px 10px 0 0;
}

实际效果以下:


4. 这样离大家要的实际效果也有些差别,大家要加1些标志上去。CSS3的能够引进font字体样式可让大家省去找标志的不便,大家能够立即引进font字体样式文档,这个下1步再详尽说,这里,大家先修改1下菜单的 html 编码,用 个器皿来显示信息标志,这里大家用 i 元素,修改子孙后代码以下:

拷贝编码
编码以下:

<ul class="ulMenu">
<li>
<a href="#">
<i></i>
<span>
主页
</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>
客户
</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>
主题活动
</span>
</a>
</li>
<div style="clear:both;">
</div>
</ul>

给 i 加上款式:

拷贝编码
编码以下:

.ulMenu li a i
{
display: inline-block;
width: 24px;
height: 24px;
margin-top: 17px;
margin-bottom: .25em;
font-size: 28px;
}

实际效果以下:


5. 在网上订制的font字体样式如今附带许多普遍标志(可参考 http://astronautweb.co/snippet/font-awesome/ ,字体样式可到此处免费下载):


免费下载font字体样式,在款式文档中引入:

拷贝编码
编码以下:

@font-face {
font-family: 'FontAwesome';
src: url('font/fontawesome-webfont.eot');
src: url('font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('font/fontawesome-webfont.woff') format('woff'),
url('font/fontawesome-webfont.ttf') format('truetype'),
url('font/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'),
url('font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
font-weight: normal;
font-style: normal;
}

6. 接着,大家能够用下面形似的款式来制订标志:

拷贝编码
编码以下:

.css:before {
content: "\f001";
}

可是标志许多,大家能够立即引进免费下载的font文档下面css文档夹下的 font-awesome.css款式文档,也便是说,上面的1大堆字体样式文档引入都可以以省略为(自然,真正开发设计中考虑到到控制模块化引进css载入特性略危害,本人感觉应少用,期待有工作经验的老前辈赐教):

拷贝编码
编码以下:

@import url('font-awesome.css');

为 i 加上对应 css:

拷贝编码
编码以下:

<ul class="ulMenu">
<li>
<a href="#">
<i class="icon-home">
</i>
<span>
主页
</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-user">
</i>
<span>
客户
</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-th-large">
</i>
<span>
主题活动
</span>
</a>
</li>
<div style="clear:both;">
</div>
</ul>

实际效果以下:


7. 最终1步,加上电脑鼠标挪动上去时更改色调,加上以下款式:

拷贝编码
编码以下:

.ulMenu li a:hover {
color: #F90;
}

实际效果以下:


猛戳【demo】免费下载事例。