One of the most famous station learning front-end of a Wikipedia site

Front-end development whqet,csdn, Wang Haiqing, Whqet, front-end development experts

If you are a senior front-end er, experienced, creative, but also likely to face new projects for a moment, if you are front-end beginners, may be in the chest gully, do not know. It is necessary to appreciate the excellent website, broaden your horizons, seek inspiration, and analyze technology. We from the domestic and foreign web site Appreciation Station (AWWWARDS\CSS winner\best CSS, etc.) of the collection works, select some representative works to analyze, appreciate, study, improve, began a brand-new series of blog "with the name of the station learning front end", I hope to help you.

Today to see a encyclopedia of the annual summary of the site, the interactive experience is awesome!

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

--I participated in the blog star selection, if you like my blog, to vote, your support is my source of power, go!

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

Appreciate

A Encyclopedia of the annual summary of the site, the interactive experience is awesome! The Web interface is as follows.

Please come back after 5 minutes to continue. The purpose of the series is two, one is to open up the field of vision, inspire inspiration, save ideas, the next is to improve the technology, so we must not be lazy.

Analytical

Follow a simple, generous consistent style, using some round, triangular elements decorate the page, the entire page appears very close to the people. At the same time the interactive experience is good.

Let's focus on the implementation of the Triangle Image menu.

Triangle Image MenuRealize

source I put in the Codepen, please everyone .

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

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

Full Screen Preview Click here, online research click here, download Favorites Click here.

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

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

In this effect, a picture is used to represent the background display image, and then the empty div is used as a transparent button (similar to the transparent button inside the flash). The gray of the display after Hove is drawn with SVG.

The HTML section is as follows.

<div class= "subranking" > <div class= "detail detail-up detail-0" > <div class= "detail_title" > &lt ; a style= "font-size:16px" href= "http://baike.baidu.com/subview/38681/5279942.htm" target= "_blank" > Deng Chao </a>      <a style= "font-size:16px" href= "http://baike.baidu.com/view/16973.htm" target= "_blank" > Sun Li </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" > Nicholas Tse </a>  <a St Yle= "font-size:16px" href= "http://baike.baidu.com/subview/3208/5954154.htm" target= "_blank" > Faye Wong </a> </ div> </div> <div class= "detail Detail-down detail-2" > <div class= "detail_title" > <a styl E= "font-size:16px" href= "http://baike.baidu.com/view/8234763.htm" target= "_blank" > Chen Sixing </a>  <a Style= "font-size:16px" href= "http://baike.Baidu.com/view/1614105.htm "target=" _blank "> Ceria </a> </div> </div> <div class=" Detail detail- Down detail-3 "> <div class=" detail_title "> <a style=" font-size:16px "href=" http://baike.baidu.com/sub View/48513/11093165.htm "target=" _blank "> Pitt </a>  <a style=" font-size:16px "href="/HTTP/ Baike.baidu.com/view/68401.htm "target=" _blank "> Julie </a> </div> </div> <div class=" detail Deta Il-up detail-4 "> <div class=" detail_title "> <a style=" font-size:16px "href=" Http://baike.baidu.com/vi Ew/15398.htm "target=" _blank "> Wang Feng </a>  <a style=" font-size:16px "href=" Http://baike.baidu.com/view    /2793.htm "target=" _blank "> Zhang Ziyi </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" Targe      t= "_blank" > Zhao and Ting </a> <a style= "font-size:16px" href= "http://baike.baidu.com/view/10531.htm" target= "_blank" > High round </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 "> Jacky Lau wei </a> <a style=" Font-size:16px "href=" http://baike.baidu.com/view/3871.htm "target=" _blank "> Yang mi </a> </div> </div&  Gt <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" > Huang Xiaoming </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:16p X "href=" http://baike.baidu.com/view/2632.htm "target= "_blank" > Jay </a>  <a style= "font-size:16px" href= "http://baike.baidu.com/view/2200222.htm" target= "_blank" > Kun ling </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 "> Kao San Yuan </a>  <a style=" font-size:16px "href=" http://baike.baidu.com/subview/6095/5885891.htm " target= "_blank" > Zhou Xun </a> </div> </div> <svg width= "100%" height= "100%" class= "svg" > <p Ath 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" CLA ss= "Shape" ></path> <path d= "m670,0 l974,0,822,152" class= "shape" ></path> <path d= "m324,318 L 476,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> &l T;path d= "m656,333 l808,485,504,485" class= "shape" ></path> </svg></div>

The

CSS primarily implements the layout, taking into account the element performance after 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 {le ft: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 mainly implement hover response, hover display detail_title elements, display the corresponding SVG elements, we use the JQuery class library to simplify writing.

$ ('. Detail '). Hover (  function () {    $ (this). addclass (' show ');    $ ('. Shape '). EQ ($ (this). Index ()). CSS (' opacity ', '. 6 ');  },  function () {     $ (this). Removeclass (' show ');    $ ('. Shape '). EQ ($ (this). Index ()). CSS (' opacity ', '. 1 ');  });

Completed!

Thank you for your patience, if you have any help, please support me

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

Front-end development Whqet, focus on web front-end development, share related resources, welcome to praise, welcome to shoot bricks.

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

One of the most famous station learning front-end of a Wikipedia site