CSS按钮动画将不起作用

我一直在试图让我的页面上的一些按钮悬停执行动画。我写了下面的CSS来实现这一目标：CSS按钮动画将不起作用

#B1 { 
    margin: 50px; 
    margin-top: 50px; 
    margin-bottom: 50px; 
    flex: 1 1 auto; 
    padding: 20px; 
    border: 2px solid #f7f7f7; 
    text-align: center; 
    text-transform: uppercase; 
    position: relative; 
    overflow:hidden; 
    transition: .3s; 
    &:after { 
    position: absolute; 
    transition: .3s; 
    content: ''; 
    width: 0; 
    left: 50%; 
    bottom: 0; 
    height: 3px; 
    background: #f7f7f7; 
    } 
}

动画应该然而，在位于黑色格在页面底部的按钮的底部加载了一个小酒吧，我的动画做不行。是什么导致了这个问题？

https://codepen.io/Feners4/pen/KggAwg

来源

2017-01-03 feners

_“不过，我的动画不起作用。“_你能描述”不起作用“吗？预期的结果是什么？ – guest271314

当我将鼠标悬停在其上时，这些按钮会旋转 –

是...？他们旋转？问题是什么？使用连贯的句子，解释你想要什么，什么不工作，并提供适当的代码示例。 – junkfoodjunkie

您需要提供宽，当你将鼠标悬停在元素上显示吧。

使用下面的CSS来获得所需的结果。

#B1 { 
    margin: 50px; 
    margin-top: 50px; 
    margin-bottom: 50px; 
    flex: 1 1 auto; 
    padding: 20px; 
    border: 2px solid #f7f7f7; 
    text-align: center; 
    text-transform: uppercase; 
    position: relative; 
    overflow:hidden; 
    transition: .3s; 
    &:after { 
    position: absolute; 
    transition: .3s; 
    content: ''; 
    width: 0; 
    left: 0; 
    bottom: 0; 
    height: 3px; 
    background: #f7f7f7; 
    } 
} 

#B1:hover::after { 
    width:100% 
} 

#B2:hover::after { 
    width:100% 
}

笔：https://codepen.io/anon/pen/LxYEdX

来源

2017-01-03 02:32:31 Deep

回答我有关于聊天中的这个简短问题？ – feners

@fees sure，ping me – Deep

我该如何ping你？ – feners

您没有设置鼠标悬停后杠样式值。

当您将鼠标悬停在按钮上时，按钮中的条宽将变为100％。

请加上CSS样式 “&：悬停：;：{宽度为100％}后” 在＃B1及＃B2

Codepen：http://codepen.io/onyoon7/pen/rjNaov

#B1 { 
    margin: 50px; 
    margin-top: 50px; 
    margin-bottom: 50px; 
    flex: 1 1 auto; 
    padding: 20px; 
    border: 2px solid #f7f7f7; 
    text-align: center; 
    text-transform: uppercase; 
    position: relative; 
    overflow:hidden; 
    transition: .3s; 
    &:after { 
    position: absolute; 
    transition: .3s; 
    content: ''; 
    width: 0; 
    left: 0; 
    bottom: 0; 
    height: 3px; 
    background: #f7f7f7; 
    } 
    &:hover:after { 
    width: 100%; 
    } 
} 

#B2 { 
    margin: 50px; 
    flex: 1 1 auto; 
    padding: 20px; 
    border: 2px solid #f7f7f7; 
    text-align: center; 
    text-transform: uppercase; 
    position: relative; 
    overflow:hidden; 
    transition: .3s; 
    &:after { 
    position: absolute; 
    transition: .3s; 
    content: ''; 
    width: 0; 
    left: 0; 
    bottom: 0; 
    height: 3px; 
    background: #f7f7f7; 
    } 
    &:hover:after { 
    width: 100%; 
    } 
}

来源

2017-01-03 03:12:17

CSS按钮动画将不起作用

回答

相关问题