跟名站学前端之某百科网站

前端开发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="http://baike.baidu.com/subview/38681/5279942.htm" target="_blank">邓超</a> <a style="font-size: 16px" href="http://baike.baidu.com/view/16973.htm" target="_blank">孙俪</a></div></div><div class="detail detail-down detail-1"><div class="detail_title"><a style="font-size: 16px" href="http://baike.baidu.com/view/3286.htm" target="_blank">谢霆锋</a> <a style="font-size: 16px" href="http://baike.baidu.com/subview/3208/5954154.htm" target="_blank">王菲</a></div></div><div class="detail detail-down detail-2"><div class="detail_title"><a style="font-size: 16px" href="http://baike.baidu.com/view/8234763.htm" target="_blank">陈思诚</a> <a style="font-size: 16px" href="http://baike.baidu.com/view/1614105.htm" target="_blank">佟丽娅</a></div></div><div class="detail detail-down detail-3"><div class="detail_title"><a style="font-size: 16px" href="http://baike.baidu.com/subview/48513/11093165.htm" target="_blank">皮特</a> <a style="font-size: 16px" href="http://baike.baidu.com/view/68401.htm" target="_blank">朱莉</a></div></div><div class="detail detail-up detail-4"><div class="detail_title"><a style="font-size: 16px" href="http://baike.baidu.com/view/15398.htm" target="_blank">汪峰</a> <a style="font-size: 16px" href="http://baike.baidu.com/view/2793.htm" target="_blank">章子怡</a></div></div><div class="detail detail-up detail-5"><div class="detail_title"><a style="font-size: 16px" href="http://baike.baidu.com/view/2149822.htm" target="_blank">赵又廷</a> <a style="font-size: 16px" href="http://baike.baidu.com/view/10531.htm" target="_blank">高圆圆</a></div></div><div class="detail detail-up detail-6"><div class="detail_title"><a style="font-size: 16px" href="http://baike.baidu.com/view/172294.htm" target="_blank">刘恺威</a> <a style="font-size: 16px" href="http://baike.baidu.com/view/3871.htm" target="_blank">杨幂</a></div></div><div class="detail detail-up detail-7"><div class="detail_title"><a style="font-size: 16px" href="http://baike.baidu.com/subview/13909/5530564.htm" target="_blank">黄晓明</a> <a style="font-size: 16px" href="http://baike.baidu.com/view/1513794.htm" target="_blank">Angelababy</a></div></div><div class="detail detail-down detail-8"><div class="detail_title"><a style="font-size: 16px" href="http://baike.baidu.com/view/2632.htm" target="_blank">周杰伦</a> <a style="font-size: 16px" href="http://baike.baidu.com/view/2200222.htm" target="_blank">昆凌</a></div></div><div class="detail detail-down detail-9"><div class="detail_title"><a style="font-size: 16px" href="http://baike.baidu.com/view/6231131.htm" target="_blank">高圣远</a> <a style="font-size: 16px" href="http://baike.baidu.com/subview/6095/5885891.htm" 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>

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前端开发，分享相关资源，欢迎点赞，欢迎拍砖。

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

跟名站学前端之某百科网站相关推荐

跟名站学前端之Brian Hoff Design
前端开发whqet,csdn,王海庆,whqet,前端开发专家如果您是资深前端er,经验丰富.富有创意,也有可能面对新项目一时踌躇:如果您是前端初学者,可能胸中沟壑,无从下手.因此,多多赏析优秀网站 ...
零基础学前端系列教程 | 和前端谈恋爱的第003天——电影海报
温馨提示:被[]包裹的是专有名词,详细介绍见下文的恋爱宝典,你可以在目录中快速找到它们,有任何问题/建议,欢迎随时微信我,我是朝阳 13908056224! 约会邀请函已经做好了,但迟迟没有发出去零 ...
跟我一起学前端之 HTML
前言: 此篇文章原是本人重学前端记录在印象笔记中的笔记,里面都是通过实践证明的观点,这有助于我们构建前端知识体系,里面有些知识笔者认为勾勒的非常精彩,也是其他培训机构不会讲到的内容.跟我一起学前端是一 ...
现在学前端还来得及吗？总听人说饱和了
"前端已经饱和了,现在学前端没有前途了" 每次听到这种论调我都气不打一处来.自己技艺不精,然后就说市场饱和了. 是,现在的确不是那个会切个图,懂点html+CSS就能找到工作的年代 ...
从零开始学前端：CSS引入 --- 今天你学习了吗？（CSS：Day07）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:列表标签 - 今天你学习了吗?(CSS:Day06) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
web前端是什么？如何能成为一名合格的前端开发工程师？
对于刚刚接触前端,并且以后想从事前端开发行业的小伙伴们,肯定都有过这样的疑问,如何才能成为一名合格的前端开发工程师呢? 相信这个问题是所有刚刚准备入行的小伙伴们都比较关心的. 如果大家在一些搜索引擎上 ...
如何能成为一名合格的前端开发工程师？
对于刚刚接触前端,并且以后想从事前端开发行业的小伙伴们,肯定都有过这样的疑问,如何才能成为一名合格的前端开发工程师呢? 相信这个问题是所有刚刚准备入行的小伙伴们都比较关心的. 如果大家在一些搜索引擎上 ...
学前端的你，还在迷茫吗？快看看这些前端学习网站吧
1.博客园(http://www.cnblogs.com/) 博客园创立于2004年1月,是一个面向开发者的知识分享社区.自创建以来,博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,推动并帮 ...
如果想成为一名顶尖的前端，这份书单你一定要收藏！
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯IVWEB团队发表于云+社区专栏作者:link 2014年一月以来,自己接触web前端开发已经两年多了,记录一下自己前端学习路 ...

跟名站学前端之某百科网站

欣赏

解析

三角形图像菜单实现

跟名站学前端之某百科网站相关推荐

最新文章

热门文章