藤藤每日一练——Metro Icon

Metro UI自己提供了一套font-face制作icon的字体库，而且这个字库可以制作三百多个icon，今天藤藤根据别的Metro UI设计图，制作了一个icon方面的案例，在这个案例中，使用到的知识很简单，主要是两个方面，第一是字体@font-face的属性使用，第二个就是属性选择器的灵活运用。而且这个案例中的icon我们是分两部分的，第一部分是纯CSS绘制的icon，第二部分是@font-face实现的icon。详细的请看案例代码。

demodownload

HTML CODE

使用@font-face制作icon的结构很简单，就是一个简单的标签，但其类名最好命名为“icon icon-*”或者“icon *-icon”，这样命名有利于CSS3的属性选择器取到对应的元素。

<i class="icon-checked"></i>

CSS CODE

案例中将每个icon放在一个li列表项中，先来看看简单的布局样式：

body {
  background-color: #dbdbdb;
  -webkit-text-size-adjust:none;
}  
.demo {
  margin: 40px auto 0;
  width: 360px;
  color: #fff;
} 
.icon-items-1 li {
  float: left;
  width: 37px;
  height: 37px;
  margin: 10px 10px 50px 0;
  background-color: #00aec7;
  animation: moveF_Right 500ms ease;/*调用动画moveF_Right*/
  transition: all 200ms linear;/*让元素加无时具有一个过渡的动画效果*/
}
/*定义了一个从右向左移动的动画*/
@keyframes moveF_Right {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}

接下来是列表一的icon制作,不过注意了。第一部分这些icon都是CSS纯绘制的icon。无使用任何特殊字体。

/*使用属性选择器*/
.icon-items-1 i[class^="icon-"] {/*选择列表一中类名以'icon-'开头的所有i标签元素*/
  position: relative;
  top: 14px;
  left: 19px;
  display: inline-block;
  width: 20px;
  height: 20px;
}
/*CSS3的伪元素*/
.icon-items-1 i[class^="icon-"]:before,
.icon-items-1 i[class^="icon-"]:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
}
/*制作V号icon*/
.icon-items-1 i.icon-checked:after {
  top: 2px;
  left: -5px;
  width: 0;
  height: 6px;
  box-shadow: 0 0 0 2px #fff;   
  transform: rotate(-45deg);/**/
}
.icon-items-1 i.icon-checked:before {
  top: -4px;
  left: 3px;
  width: 0;
  height: 14px;
  box-shadow: 0 0 0 2px #fff; 
  transform: rotate(45deg);
}
/*制作关闭icon*/
.icon-items-1 i.icon-close:before {
  top: 4px;
  left: -8px;
  width: 14px;
  box-shadow: 0 0 0 2px #fff; 
  transform: rotate(-45deg);
}
.icon-items-1 i.icon-close:after {
  top: 4px;
  left: -8px;
  width: 14px;
  box-shadow: 0 0 0 2px #fff;   
  transform: rotate(45deg);
}
/*制作复选框icon*/
.icon-items-1 i.icon-square:after {
  top: 0;
  left: -3px;
  width: 5px;
  height: 5px;
  box-shadow: 0 0 0 3px #fff;
}
/*制作加减icon*/
.icon-items-1 i.icon-plus:before {
  top: 4px;
  left: -8px;
  width: 14px;
  box-shadow: 0 0 0 2px #fff; 
  transform: rotate(90deg);
}
.icon-items-1 i.icon-plus:after,
.icon-items-1 i.icon-minus:after {
  top: 4px;
  left: -8px;
  width: 14px;
  box-shadow: 0 0 0 2px #fff; 
}
/*制作单选按钮icon*/
.icon-items-1 i.icon-round:after {
  top: 4px;
  left: 0;
  box-shadow: 0 0 0 6px #000,0 0 0 8px #fff;
  border-radius: 50%;
}
.icon-items-1 i.icon-disc:after {
  top: 4px;
  left: 0;
  box-shadow: 0 0 0 3px #fff,0 0 0 6px #00aec7,0 0 0 8px #fff;
  border-radius: 50%;
}
.icon-items-1 li:hover {
  transform: scale(2,2);
  background-color: #005d6a;
  z-index: 5;
}

接下来是@font-face制作的icon

.icon-items-2 li {
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  text-align: center;
  margin: 10px 10px 0 0;
  background-color: #00aec7;
  animation: moveF_Right 500ms ease;
  overflow: hidden;
}
.icon-items-2 li:before,
  .icon-items-2 li:after {
  position: absolute;
}
.icon-items-2 li:hover:before {
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,.2);
  z-index: 1;
}
.icon-items-2 li:hover:after {
  top: 20px;
  left: 0;
  font-weight: bold;
  content: attr(data);
  width: 100%;
  line-height: 30px;
  z-index: 2;
  background-color: #005d6a;
  animation: moveF_Right 500ms ease;
}

.icon-items-2 i[class^="icon-"]:before { 
  font-family: 'icomoon';
  speak: none;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 36px;
  line-height: 100px;
  font-style: normal;
}
.icon-chrome:before {
  content: "\e0c6";
}
.icon-firefox:before {
  content: "\e0c9";
}
.icon-IE:before {
  content: "\e0ca";
}
.icon-apple:before {
  content: "\e0cc";
}
.icon-opera:before {
  content: "\e0cf";
}
.icon-android:before {
  content: "\e0d1";
}
.icon-twitter:before {
  content: "\e0a2";
}
.icon-dribbble:before {
  content: "\e03d";
}
.icon-facebook:before {
  content: "\e049";
}
@font-face {
  font-family: 'icomoon';
  src:url('fonts/icomoon.eot');
  src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
    url('fonts/icomoon.svg#icomoon') format('svg'),
    url('fonts/icomoon.woff') format('woff'),
    url('fonts/icomoon.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}  

注意一下，@font-face中的font文件调用路径需要正确，常常有同学搞错路径，另外文件编码需要是UTF8，不然你的icon不会正常显示。还有一点需要提醒大家，伪类上的transform和animation两属性在webkit下还不算完美，但在firefox得到友好支持。

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/demo/metro-icon.html