试图让下划线相对于 SCSS 中的导航菜单项开始
Trying to get underline to start relative to the nav menu item in SCSS
我正在尝试实现一个菜单导航栏,它在悬停时使用从左到右的下划线动画突出显示菜单项。
目前我的下划线动画是从菜单项的中心到外面。
我已经尝试搜索此问题的解决方案,但无法弄清楚我做错了什么。
这是 codepen http://codepen.io/anon/pen/JowgqP
上项目的 link
HTML
<menu>
<p><a href="http://factmag.com/tag/kanye-west" target="_blank"><strong>Home</strong></a>
<a href="http://factmag.com/tag/jay-z" target="_blank"><strong>About</strong></a>
<a href="http://factmag.com/tag/g-o-o-d-music" target="_blank"><strong>Portfolio</strong></a>
<a href="http://www.factmag.com/2015/02/12/kanye-west-premieres-wolves-featuring-sia-vic-mensa-produced-cashmere-cat-sinjin-hawke/" target="_blank"><strong>Contact</strong></a> <strong>
<p class="note">This is a recreation of the link hover effect from <a href="http://www.factmag.com/2015/02/13/kanye-west-pusha-t-2-chainz-perform-first-annual-roc-city-classic-watch-full-show/">factmag.com</a></small>
</menu>
CSS (SCSS)
@import url(http://fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic);
$link-color: #E71818;
$text-color: black;
$article-font: Noto serif, serif;
menu {
color: $text-color;
font-family: $article-font;
max-width: 30em;
}
p {
font-size: 18px;
line-height: 1.5;
}
menu a {
@extend %fancy-link;
}
.note {
display: inline-block;
border-top: 1px solid $link-color;
color: #777;
font-size: .8em;
font-style: italic;
margin-top: 2em;
padding-top: 1em;
}
%fancy-link {
color: $link-color;
position: relative;
text-decoration: none;
transition: all 0.15s ease-out;
&:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0px;
left: 0;
background: #f00;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
&:hover {
transition: all 0.15s ease-out;
&:before {
visibility: visible;
transform: scaleX(1);
}
}
}
默认转换点是center center
...或者更确切地说是50% 50%
以便于参考。 (对于 2 维......我们现在将省略 z 偏移量。)
您必须对此进行修改,使原点现在为 center left
&:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0px;
left: 0;
background: #f00;
visibility: hidden;
transform: scaleX(0);
transform-origin: center left; /* here */
transition: all 0.3s ease-in-out 0s;
}
我正在尝试实现一个菜单导航栏,它在悬停时使用从左到右的下划线动画突出显示菜单项。
目前我的下划线动画是从菜单项的中心到外面。
我已经尝试搜索此问题的解决方案,但无法弄清楚我做错了什么。
这是 codepen http://codepen.io/anon/pen/JowgqP
上项目的 linkHTML
<menu>
<p><a href="http://factmag.com/tag/kanye-west" target="_blank"><strong>Home</strong></a>
<a href="http://factmag.com/tag/jay-z" target="_blank"><strong>About</strong></a>
<a href="http://factmag.com/tag/g-o-o-d-music" target="_blank"><strong>Portfolio</strong></a>
<a href="http://www.factmag.com/2015/02/12/kanye-west-premieres-wolves-featuring-sia-vic-mensa-produced-cashmere-cat-sinjin-hawke/" target="_blank"><strong>Contact</strong></a> <strong>
<p class="note">This is a recreation of the link hover effect from <a href="http://www.factmag.com/2015/02/13/kanye-west-pusha-t-2-chainz-perform-first-annual-roc-city-classic-watch-full-show/">factmag.com</a></small>
</menu>
CSS (SCSS)
@import url(http://fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic);
$link-color: #E71818;
$text-color: black;
$article-font: Noto serif, serif;
menu {
color: $text-color;
font-family: $article-font;
max-width: 30em;
}
p {
font-size: 18px;
line-height: 1.5;
}
menu a {
@extend %fancy-link;
}
.note {
display: inline-block;
border-top: 1px solid $link-color;
color: #777;
font-size: .8em;
font-style: italic;
margin-top: 2em;
padding-top: 1em;
}
%fancy-link {
color: $link-color;
position: relative;
text-decoration: none;
transition: all 0.15s ease-out;
&:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0px;
left: 0;
background: #f00;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
&:hover {
transition: all 0.15s ease-out;
&:before {
visibility: visible;
transform: scaleX(1);
}
}
}
默认转换点是center center
...或者更确切地说是50% 50%
以便于参考。 (对于 2 维......我们现在将省略 z 偏移量。)
您必须对此进行修改,使原点现在为 center left
&:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0px;
left: 0;
background: #f00;
visibility: hidden;
transform: scaleX(0);
transform-origin: center left; /* here */
transition: all 0.3s ease-in-out 0s;
}