您现在的位置是:首页 > WEB > html+csshtml+css

css实现漂亮的文本提示效果

阿龙2019-06-15【html+css】人已围观

简介最近写输入框提示效果,发现这个效果还可以,就分享给大家伙,不是什么高难度,但是阿龙感觉还是很实用。

首先需要一个按钮
<button class = "button"> 寻觅 </button>
添加一些样式,让按钮看起来不那么丑
.button {
   position: relative;
   background: #E5C388;
   padding: 10px;
   border-radius: 4px;
   border: none;
   text-transform: uppercase;
   font-weight: bold;
   color: white;
}
该position按钮的属性设置为relative使我们可以添加tooltip位置absolute与相应的按钮。
现在按钮看起来像,这里就不截图出来了,大家可以用这款在线代码测试工具试一下,只要把上面的代码复制进去就有效果了。

接下来就是实现提示文本也就是“span”标签内容
<button class = "button"> 
      寻觅
      <span class="tooltip">阿龙个人博客</span>  
</button>
给提示文本加点样式,让我们看起来更舒服。
.tooltip {
    position: absolute; 
    bottom : 110%; 
    background-color: #333;
    border-radius: 3px;
    font-size: 10px;
    color: #eee;
}
初步样式已经完成了,想看效果自己把代码复制过去就能看到了。

如果要实现鼠标停留按钮上就触发提示的效果,就需要用到隐藏与显示。
为此增加display: none 了  .tooltip课程。
.tooltip {
    position: absolute;
    bottom : 110%;
    background-color: #333;
    border-radius: 3px;
    font-size: 10px;
    color: #eee;
    display : none;
}
.button: hover > .tooltip {
    display : block;
}
然后给提示文本加一些动画,让我们看起来更舒服。
.tooltip {
animation: moveup 0.1s linear;
}
@keyframes moveup {
  0% {
transform: translateY(10px) rotate(25deg);
opacity: 0;
}
100% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
}
到这就算完成了,需要看完成的效果还是那句话,自己粘一下就好了,我最后截个最终效果图给大家看一下吧:

Tags:html   css

支持一下! ()

文章评论

    共有条评论大侠,来闹两句...

    请输入昵称:

    填入验证码:

打赏本站

  • 如果您觉得站长文章不错,可以通过扫码支付打赏一下哦!
  • 微信扫码:您说多少就多少~
  • 支付宝扫码:您说多少就多少~