信息悬停按钮 - 教程
HTML
对于 HTML,我们有一个按钮,里面有两个 span,“i”和“nfo”。 “Nfo”将在按钮悬停时显示。
<button>
<span>一世</span>
<span class="nfo">NFO</span>
</button>
CSS
对于 CSS,首先我们将设置按钮样式。
我们将设置一些颜色,移除边框,宽度和高度为 30px,边框半径为 15px 将创建一个圆形。
使用 flexbox,我们将元素定位在中心并添加过渡,以便我们稍后将广告的悬停效果很好且平滑。
按钮 {
边框:无;
光标:指针;
宽度:30px;
高度:30px;
边框半径:15px;
背景色:rgb(255, 128, 0);
颜色:#fff;
显示:弯曲;
证明内容:中心;
对齐项目:居中;
过渡:.3s;
}
对于“nfo”类,我们将宽度和不透明度设置为零并转换为 300 毫秒。
.信息{
宽度:0px;
过渡:.3s;
不透明度:0;
}
在按钮悬停时,我们将选择“nfo”类并将宽度设置为 20px,不透明度设置为 1,当然还有过渡,这样宽度的变化就很平滑了。
按钮:悬停 .nfo {
宽度:20px;
过渡:.3s;
不透明度:1;
}
最后,悬停按钮元素,我们将只增加宽度并设置过渡。
按钮:悬停{
宽度:80px;
过渡:.3s;
}
就是这样。
谢谢阅读。 ❤️
您可以通过视频教程找到完整代码 这里 .
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明
本文链接:https://www.qanswer.top/37584/29141816
标签:教程,nfo,3s,宽度,过渡,按钮,悬停 From: https://www.cnblogs.com/amboke/p/16705168.html