设为首页 - 加入收藏 - 网站地图 SecYe安全 Www.SecYe.Com - 国内网络信息安全IT技术门户网
当前位置:SecYe > 网页设计 > CSS > 正文

纯CSS制作一个非常简单的tip效果

时间:2016-07-13 15:32 来源:未知 作者:SecYe安全 阅读:

我们在网页上有时会针对一些内容做详细说明,以便更友好的服务用户。最常见的是在网站上加个用户使用帮助,但是一般需要跳转页面。今天我给大家介绍只需将鼠标滑向一个小问号上,就会出现帮助提示信息的效果。

纯CSS制作一个非常简单的tip效果

前言

HTML代码

  1. <div class="demo">
  2. <div class="help-tip">
  3. <p>这是一个纯CSS制作,基于CSS3实现的提示信息效果。</p>
  4. </div>
  5. <p>提示信息是一个简单,但非常有用的工具。它能够为我们的页面提供非常漂亮的提示信息,让内容更加直观,提升用户的体验,给用户比较好的体验。</p>
  6. <p>这是一个tooltip工具提示demo,你可以把鼠标滑上右上角的问号处看看效果。</p>
  7. </div>

CSS代码

  1. .demo {
  2. border-radius: 4px;
  3. padding: 40px;
  4. max-width: 600px;
  5. position: relative;
  6. margin: 0px auto 100px;
  7. background: #F7F7F7 none repeat scroll 0% 0%;
  8. }
  9. .help-tip{
  10. position: absolute;
  11. top: 18px;
  12. right: 18px;
  13. text-align: center;
  14. background-color: #BCDBEA;
  15. border-radius: 50%;
  16. width: 24px;
  17. height: 24px;
  18. font-size: 14px;
  19. line-height: 26px;
  20. cursor: default;
  21. }
  22.  
  23. .help-tip:before{
  24. content:'?';
  25. font-weight: bold;
  26. color:#fff;
  27. }
  28.  
  29. .help-tip:hover p{
  30. display:block;
  31. transform-origin: 100% 0%;
  32.  
  33. -webkit-animation: fadeIn 0.3s ease-in-out;
  34. animation: fadeIn 0.3s ease-in-out;
  35.  
  36. }
  37.  
  38. .help-tip p{
  39. display: none;
  40. text-align: left;
  41. background-color: #1E2021;
  42. padding: 20px;
  43. width: 300px;
  44. position: absolute;
  45. border-radius: 3px;
  46. box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  47. right: -4px;
  48. color: #FFF;
  49. font-size: 13px;
  50. line-height: 1.4;
  51. }
  52.  
  53. .help-tip p:before{
  54. position: absolute;
  55. content: '';
  56. width:0;
  57. height: 0;
  58. border:6px solid transparent;
  59. border-bottom-color:#1E2021;
  60. right:10px;
  61. top:-12px;
  62. }
  63.  
  64. .help-tip p:after{
  65. width:100%;
  66. height:40px;
  67. content:'';
  68. position: absolute;
  69. top:-40px;
  70. left:0;
  71. }
  72.  
  73. @-webkit-keyframes fadeIn {
  74. 0% {
  75. opacity:0;
  76. transform: scale(0.6);
  77. }
  78.  
  79. 100% {
  80. opacity:100%;
  81. transform: scale(1);
  82. }
  83. }
  84.  
  85. @keyframes fadeIn {
  86. 0% { opacity:0; }
  87. 100% { opacity:100%; }
  88. }

本文来源:SecYe安全网[http://www.secye.com] (责任编辑:SecYe安全)

点击复制链接 与好友分享!

顶一下
(0)
0%
踩一下
(0)
0%