一些菜单链接悬停成果。由CSS和JavaScript来成功，用于独自的字母动画。检查展示下载源代码

当天厦门网站建想象和你分享一些菜单悬停成果。咱们宿愿这套装置能处罚您，并为您的下一个名目提供一些想法。成果要么仅由CSS提供，要么在anime.js的协助下提供。有些人也会经常使用Charming，用于一般字母成果。

第一种格调是对弱点中的链接悬停成果的再现，略有顺应。成果Dustu的灵感来自于Flambette上的链接悬停成果。

留意： 咱们正在为展示（网格，flexbox）经常使用一些现代的CSS技术和属性，所以请在现代阅读器中检查它们。

示例菜单悬停成果

菜单的结构取决于成果，但让咱们来看看受漂亮的网站启示的那个。咱们称之为Adsila：

咱们为一切菜单提供以下罕用样式：

.menu{position:relative;z-index:10;}

.menu__item{position:relative;display:block;outline:none;margin:001.5em;line-height:1;}

.menu__item-name,.menu__item-label{position:relative;display:inline-block;}

.menu__item-name{font-size:1.25em;}

.menu__item-label{margin:0000.5em;}

Adsila具备以下特定格调：

.menu–adsila{font-size:1.15em;font-family:\'Nunito\',sans-serif;}

.menu–adsilaa{color:#272727;}

.menu–adsila.menu__item{margin:001em;}

.menu–adsila.menu__item-name{padding:00.35em;font-weight:bold;line-height:1.4;transition:color0.5s;transition-timing-function:cubic-bezier(0.2,1,0.3,1);}

.menu–adsila.menu__item-name::before{content:\'\';position:absolute;z-index:-1;width:100%;height:50%;left:0;bottom:0;opacity:0.3;transform:scale3d(0,1,1);transform-origin:0%50%;transition:transform0.5s;transition-timing-function:cubic-bezier(0.2,1,0.3,1);}

.menu–adsila.menu__item-label{font-size:1em;letter-spacing:0.05em;transform:translate3d(-0.5em,0,0);transition:transform0.5s,color0.5s;transition-timing-function:cubic-bezier(0.2,1,0.3,1);}

.menu–adsila.menu__item-label::before{content:\'\';position:absolute;z-index:-1;width:25%;height:1px;left:0.05em;top:1.25em;opacity:0.3;transform:scale3d(0,1,1);transform-origin:100%50%;transition:transform0.5s;transition-timing-function:cubic-bezier(0.2,1,0.3,1);}

.menu–adsila.menu__item:nth-child(odd).menu__item-name::before,.menu–adsila.menu__item:nth-child(odd).menu__item-label::before{background:#fe628e;}

.menu–adsila.menu__item:nth-child(even).menu__item-name::before,.menu–adsila.menu__item:nth-child(even).menu__item-label::before{background:#6265fe;}

.menu–adsila.menu__item:nth-child(odd):hover,.menu–adsila.menu__item:nth-child(odd):focus{color:#fe628e;}

.menu–adsila.menu__item:nth-child(even):hover,.menu–adsila.menu__item:nth-child(even):focus{color:#6265fe;}

.menu–adsila.menu__item:hover.menu__item-name::before,.menu–adsila.menu__item:focus.menu__item-name::before,.menu–adsila.menu__item:hover.menu__item-label::before,.menu–adsila.menu__item:focus.menu__item-label::before{transform:scale3d(1,1,1);}

.menu–adsila.menu__item:hover.menu__item-label,.menu–adsila.menu__item:focus.menu__item-label{transform:translate3d(0,0,0);}

.menu–adsila.menu__item:hover.menu__item-label::before,.menu–adsila.menu__item:focus.menu__item-label::before{transition-timing-function:ease;transform-origin:0%50%;}

咱们经过稍微移动标签并在标签上显示一条线，为成果减少了一些纤细的变动。如您所见，咱们不会为每个名目经常使用不同的色彩，而是区分偶数和奇数。

咱们宿愿您青睐这些格调，并把他经常使用在你的网站树立名目上。

标签： 网站制造、 厦门网站树立公司、 网站制造、 网站设计、 HTML5、 十分有创意的菜单悬停成果、 网站开发、 厦门网站树立、 网站树立、 CSS3、 网站树立、

本文地址： https://yihaiquanyi.com/article/2a4386fef543e7bf77ca.html

上一篇：树立网站整体形象的关键是网站树立网站树立...
下一篇：顺应的概念和举例照应和自顺应网页设计之间...