如果您是资深前端er，经验丰富、富有创意，也有可能面对新项目一时踌躇；如果您是前端初学者，可能胸中沟壑，无从下手。多多赏析优秀网站，开阔视野、寻求灵感、解析技术，很有必要。我们从国内外网页欣赏站(Awwwards\CSS Winner\Best CSS等)的收录作品中，选择一些有代表性的作品进行解析，欣赏、研读、提高，开始一个全新的系列博客《跟名站学前端》，希望对大家有所帮助。

今天来看某百科网站的年度总结，交互体验超赞！

------------------------------------------------------------

--我参加了博客之星评选，如果你喜欢我的博客，求投票，您的支持是我的动力之源，走起！

-----------------------------------------------------------------------------------------------------------------

欣赏

某百科网站的年度总结，交互体验超赞！网站界面如下。

请大家移步欣赏之后，5分钟之后回来继续。系列文章的目的有两个，一是开拓视野、激发灵感、积蓄创意，其次才是获取技术的提高，所以大家不可偷懒。

解析

沿袭某度简洁、大方的一贯风格，使用一些圆形、三角形元素装点页面，整个页面显得非常亲民。同时交互体验良好。

我们来重点三角形图像菜单的实现。

三角形图像菜单实现

源码我放在了codepen，请大家移步。

----------------

----------------------------------------

全屏预览点击这里，在线研究点击这里，下载收藏点击这里。

----------------------------------------

---------------

在该效果中，用一个图片来表示做背景显示图像，然后用空的div作透明按钮（类似于flash里面的透明按钮）。hove之后的显示的灰色用svg画出来。

html部分如下。

<div class="subRanking">
  <div class="detail detail-up detail-0">
    <div class="detail_title">
      <a style="font-size: 16px" href=http://www.mamicode.com/"http://baike.baidu.com/subview/38681/5279942.htm" target="_blank">邓超 >
css主要实现布局，同时考虑hover之后的元素表现。
.subRanking{
  width:980px;
  height: 485px;
  margin:30px auto;
 background:url(http://baike.bdimg.com/cms/static/moments-2014/subRankings/result/entertain-2.png) no-repeat 100% 100%;
}
.detail {
	position: absolute;
	z-index: 1;
	width: 90px;
	height: 90px;
	text-align: center;
	color: #fff;
	cursor: default;
	transition:all .2s linear;
  cursor:pointer;
}
.detail-0 {
	left: 113px;
	top: 7px
}
.detail-2 {
	left: 445px;
	top: 7px
}
.detail-4 {
	left: 777px;
	top: 7px
}
.detail-1 {
	left: 279px;
	top: 60px
}
.detail-3 {
	left: 611px;
	top: 60px
}
.detail-5 {
	left: 279px;
	top: 171px
}
.detail-6 {
	left: 611px;
	top: 171px
}
.detail-7 {
	left:445px;
	top:285px
}
.detail-8 {
	left: 279px;
	top: 390px
}
.detail-9 {
	left: 611px;
	top: 390px
}
.detail .detail_title {
	position: relative;
	margin: 3px 0 5px;
	height: 24px;
	line-height: 24px;
	font-size: 18px;
	opacity: 0;
   transition:all .1s linear;
}
.detail .detail_title a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid #fff
}
.detail-up .detail_title {
	left: -35px;
   top:50px;
	width: 200px
}
.detail-down .detail_title {
	left: -35px;
   bottom:-50px;
   width: 200px;
}
.svg {
	position: relative;
	z-index: 0
}
.svg .shape {
  opacity:0.1;
	transition:opacity .1s ease-in;
}
.show {
	opacity: 1;
}
.show .detail_title {
	opacity: 1;
}
js主要实现hover响应，hover之后显示detail_title元素，显示对应的svg元素，我们使用jquery类库简化书写。
$(‘.detail‘).hover(
  function(){
    $(this).addClass(‘show‘);
    $(‘.shape‘).eq($(this).index()).css(‘opacity‘,‘.6‘);
  },
  function(){
     $(this).removeClass(‘show‘);
    $(‘.shape‘).eq($(this).index()).css(‘opacity‘,‘.1‘);
  }
);
完工!
感谢您耐心读完，如果对您有帮助，请支持我
----------------------------------------------------------
前端开发whqet，关注web前端开发，分享相关资源，欢迎点赞，欢迎拍砖。
---------------------------------------------------------------------------------------------------------
跟名站学前端之某百科网站