css class 悬停效果,Css菜单悬停效果

插件描述：一些菜单链接悬停效果为您的灵感， 使用CSS和Javript创建单个字母动画。

今天，我们想与你分享一些菜单悬停效果。 我们希望这一套启发你，并为你的下一个项目提供一些想法。 这些效果是由CSS或仅在anime.js的帮助下提供动力。 有些还使用Charming，用于个别字母效果。

第一种风格是轻微的适应性，在The Feebles上看到的链接悬停效果的再现。“Dustu”的效果受到Flambette上链接悬停效果的启发。

注意：我们正在使用一些现代的CSS技术和属性的演示(网格，flexbox)，所以请使用最新的浏览器查看他们。

这个演示由FullStory赞助。

示例菜单悬停效果

菜单的结构取决于效果，但让我们来看看由美丽的The Feebles网站所启发的结构。 我们称之为“Adsila”：

Artists

Explore all artists' portfolios

Exhibitions

Discover their stories

Schedule

View our event calendar

Mission

Read our mission statement

The Gardens

Get to know our eco village

Buy Tickets

Purchase event tickets online

Contact

Get in touch and find us

有以下所有菜单的常见样式：.menu {

position: relative;

z-index: 10;

}

.menu__item {

position: relative;

display: block;

outline: none;

margin: 0 0 1.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: 0 0 0 0.5em;

}“Adsila” has these specific styles:.menu--adsila {

font-size: 1.15em;

font-family: 'Nunito', sans-serif;

}

.menu--adsila a {

color: #272727;

}

.menu--adsila .menu__item {

margin: 0 0 1em;

}

.menu--adsila .menu__item-name {

padding: 0 0.35em;

font-weight: bold;

line-height: 1.4;

transition: color 0.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: transform 0.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: transform 0.5s, color 0.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: transform 0.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;

}

/* Hover */

.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%;

}

我们通过移动标签并在标签上留下了一条线来添加了一些变化。 正如你所看到的，我们不会为每个项目使用不同的颜色，而是我们区分偶数和奇数。

我们希望你喜欢这些风格，并启发您的灵感。