如何实现我的 CSS 过渡到我的网站
how to implement my CSS transition to my website
我必须创建如下所示的按钮动画:
https://media.giphy.com/media/YLgJHbH1u916XSo3JD/giphy.gif
我用“过渡”做到了,但现在无法在我的网站上实施该解决方案。
我的按钮动画解决方案:http://jsfiddle.net/guhqcxzt/
我想在 'li' 标签上实现它的网站部分。 (html 和 scss)
<nav class="left-side">
<ul class="navigations">
<li><a href="#">ABOUT US</a></li>
<li><a href="#">HOTEL</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
<div class="rights">© 2021 All rights reserved.</div>
</nav>
nav,
.left-side {
@include flex(space-between, center, column);
min-height: 90vh;
background: $color-grey-dark-1;
padding: 5rem 0 3rem 0;
width: 18%;
color: $color-grey-light-1;
}
.navigations {
width: 100%;
li {
list-style: none;
a {
text-decoration: none;
color: $color-grey-light-1;
display: block;
padding: 2rem 0;
margin: 0.5rem 0;
padding-left: 30%;
font-size: 2.5rem;
}
}
}
a:hover {
background: $color-primary-light;
}
试试这个:
在 <a>
标签中添加转换
navigations {
width: 100%;
li {
list-style: none;
a {
text-decoration: none;
color: $color-grey-light-1;
display: block;
padding: 2rem 0;
margin: 0.5rem 0;
padding-left: 30%;
font-size: 2.5rem;
transition:0.5s;
}
}
}
a:hover {
background: $color-primary-light;
}
你要这个吗?
试试这个代码:
nav,.left-side
{
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
min-height: 90vh;
background: black;
padding: 4rem 0 3rem 0;
width:300px;
color: grey;
}
.navigations
{
width: 100%;
}
li
{
position:relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
width: 100%;
height: 100px;
}
li::before
{
content:'';
position:absolute;
width:0%;
height:70px;
background:red;
left:-20px;
transition:0.5s;
}
li:hover::before
{
width:100%;
}
a
{
position:relative;
color: grey;
margin: 0.5rem 0;
width:92.4%;
text-decoration:none;
}
.rights {
font-size: 1.5rem;
}
<nav class="left-side">
<ul class="navigations">
<li ><a href="#">ABOUT US</a></li>
<li><a href="#"> HOTE </a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
<div class="rights">© 2021 All rights reserved.</div>
</nav>
我必须创建如下所示的按钮动画: https://media.giphy.com/media/YLgJHbH1u916XSo3JD/giphy.gif
我用“过渡”做到了,但现在无法在我的网站上实施该解决方案。 我的按钮动画解决方案:http://jsfiddle.net/guhqcxzt/
我想在 'li' 标签上实现它的网站部分。 (html 和 scss)
<nav class="left-side">
<ul class="navigations">
<li><a href="#">ABOUT US</a></li>
<li><a href="#">HOTEL</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
<div class="rights">© 2021 All rights reserved.</div>
</nav>
nav,
.left-side {
@include flex(space-between, center, column);
min-height: 90vh;
background: $color-grey-dark-1;
padding: 5rem 0 3rem 0;
width: 18%;
color: $color-grey-light-1;
}
.navigations {
width: 100%;
li {
list-style: none;
a {
text-decoration: none;
color: $color-grey-light-1;
display: block;
padding: 2rem 0;
margin: 0.5rem 0;
padding-left: 30%;
font-size: 2.5rem;
}
}
}
a:hover {
background: $color-primary-light;
}
试试这个:
在 <a>
标签中添加转换
navigations {
width: 100%;
li {
list-style: none;
a {
text-decoration: none;
color: $color-grey-light-1;
display: block;
padding: 2rem 0;
margin: 0.5rem 0;
padding-left: 30%;
font-size: 2.5rem;
transition:0.5s;
}
}
}
a:hover {
background: $color-primary-light;
}
你要这个吗?
试试这个代码:
nav,.left-side
{
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
min-height: 90vh;
background: black;
padding: 4rem 0 3rem 0;
width:300px;
color: grey;
}
.navigations
{
width: 100%;
}
li
{
position:relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
width: 100%;
height: 100px;
}
li::before
{
content:'';
position:absolute;
width:0%;
height:70px;
background:red;
left:-20px;
transition:0.5s;
}
li:hover::before
{
width:100%;
}
a
{
position:relative;
color: grey;
margin: 0.5rem 0;
width:92.4%;
text-decoration:none;
}
.rights {
font-size: 1.5rem;
}
<nav class="left-side">
<ul class="navigations">
<li ><a href="#">ABOUT US</a></li>
<li><a href="#"> HOTE </a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
<div class="rights">© 2021 All rights reserved.</div>
</nav>