前端开发whqet,csdn,王海庆,whqet,前端开发专家
如果您是资深前端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="" target="_blank">邓超</a><a style="font-size: 16px" href="" target="_blank">孙俪</a></div> </div> <div class="detail detail-down detail-1"><div class="detail_title"><a style="font-size: 16px" href="" target="_blank">谢霆锋</a><a style="font-size: 16px" href="" target="_blank">王菲</a></div> </div> <div class="detail detail-down detail-2"><div class="detail_title"><a style="font-size: 16px" href="" target="_blank">陈思诚</a><a style="font-size: 16px" href="" target="_blank">佟丽娅</a></div> </div> <div class="detail detail-down detail-3"><div class="detail_title"><a style="font-size: 16px" href="" target="_blank">皮特</a><a style="font-size: 16px" href="" target="_blank">朱莉</a></div> </div> <div class="detail detail-up detail-4"><div class="detail_title"><a style="font-size: 16px" href="" target="_blank">汪峰</a><a style="font-size: 16px" href="" target="_blank">章子怡</a></div> </div> <div class="detail detail-up detail-5"><div class="detail_title"><a style="font-size: 16px" href="" target="_blank">赵又廷</a><a style="font-size: 16px" href="" target="_blank">高圆圆</a></div> </div> <div class="detail detail-up detail-6"><div class="detail_title"><a style="font-size: 16px" href="" target="_blank">刘恺威</a><a style="font-size: 16px" href="" target="_blank">杨幂</a></div> </div> <div class="detail detail-up detail-7"><div class="detail_title"><a style="font-size: 16px" href="" target="_blank">黄晓明</a><a style="font-size: 16px" href="" target="_blank">Angelababy</a></div> </div> <div class="detail detail-down detail-8"><div class="detail_title"><a style="font-size: 16px" href="" target="_blank">周杰伦</a><a style="font-size: 16px" href="" target="_blank">昆凌</a></div> </div> <div class="detail detail-down detail-9"><div class="detail_title"><a style="font-size: 16px" href="" target="_blank">高圣远</a><a style="font-size: 16px" href="" target="_blank">周迅</a></div> </div> <svg width="100%" height="100%" class="svg"><path d="M6,0 L310,0,158,152" class="shape"></path><path d="M324,3 L476,155,172,155" class="shape"></path><path d="M338,0 L642,0,490,152" class="shape"></path><path d="M656,3 L808,155,504,155" class="shape"></path><path d="M670,0 L974,0,822,152" class="shape"></path><path d="M324,318 L476,165,172,165" class="shape"></path><path d="M656,318 L808,165,504,165" class="shape"></path><path d="M490,166 L649,325,490,484,331,325" class="shape"></path><path d="M324,333 L476,485,172,485" class="shape"></path><path d="M656,333 L808,485,504,485" class="shape"></path> </svg></div>当你能飞的时候就不要放弃飞
