p{text-indent:2em;}前端开发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前端开发，分享相关资源，欢迎点赞，欢迎拍砖。
---------------------------------------------------------------------------------------------------------
时间： 2024-11-06 07:12:28