<em id="ii1f9"></em>

    <ruby id="ii1f9"><p id="ii1f9"><tt id="ii1f9"></tt></p></ruby>
      <li id="ii1f9"></li>
      1. <rp id="ii1f9"></rp>

        <s id="ii1f9"><strike id="ii1f9"><u id="ii1f9"></u></strike></s>

        1. <tbody id="ii1f9"><center id="ii1f9"></center></tbody>
        2. Menu

          10个CSS工具提示片段可以节省Web项目的时间

          <返回列表

          在页面中添加一个简单的工具提示并不难。你可以找到一堆免费工具提示插件和JS脚本可以帮助解决这个问题。

          但是纯CSS是另一种选择,它很快成为许多web设计师的首选。如果你在寻找CSS工具提示,那么这个集合应该有你需要的东西。

          所有这些代码片段都来自CodePen,它们可以免费为您的网站进行分叉、复制和重新设计。

          1.产品特色亮点

          让我们从网络开发人员伊恩·法布(Ian Farb)的一句废话开始吧。他的一个片段产品功能工具提示简直不可思议。绝对是独一无二的,不是你每天都能看到的东西!

          通过将一些工具提示附加到div元素上,您可以将它们放置在图像顶部的任何位置。通过这种方式,用户可以悬停以获取有关产品样式、设计、格式等信息。

          工具提示本身看起来超级干净的白色背景和一个小的阴影。它们可以使用任何布局样式,因此非常适合产品标注。

          2.动画CSS工具提示

          在工具提示上寻找自定义动画样式?然后是马库斯·布鲁赫的动画提示应该在你的网站上创造奇迹。

          它们有三种不同的风格:褪色、膨胀和摇摆运动。

          它们都很容易添加到页面中,并且使用HTML5数据标题属性来定义工具提示文本。这意味着您不需要太多额外的HTML来实现这些功能,而且它们完全是语义引导的。

          你甚至可以把它作为一个模板来定制你自己的CSS动画,在Markus的基础上构建。

          3.自动化工具提示

          带着这些自动化工具提示您会注意到两件事:它们与锚链接很好地融合在一起,并且依赖于一些JavaScript。

          尽管这些不是纯粹的CSS,但我还是不得不把它们包括进来,因为它们实在太实用了。我不会说这些工具提示适用于所有人,因为它们需要特定类型的网站才能真正“适应”内容。

          不过,这个设计还是很棒的,代码片段可以完美地工作。

          所有的CSS都在Sass上运行,HTML在Pug上运行,但是如果您想直接复制/粘贴到布局中,您可以在CodePen内部编译成原始代码。

          4.动画问题

          我经常看到小问号图标在更大的表单和更复杂的页面。它们有助于吸引用户的注意力并告知用户页面的特定部分。

          您可以使用此动画问题工具提示运行在纯CSS上。它甚至有自己的自定义动画样式,你可以在悬停时看到。

          HTML5在这方面又起作用了数据-*属性,以便所有工具提示文本都可以直接放入其中。

          代码完全开源后,您甚至可以根据需要更改动画样式和配色方案,以更好地融入其中。

          5.纯CSS3快速提示

          我想这些工具提示是完美的日常运行工具提示任何网站。

          它们在纯CSS3上工作,如果您深入研究一下代码,它们非常容易定制。

          默认情况下,每个工具提示都使用半透明不透明的略暗背景。如果你的工具提示出现在另一个段落的顶部,这可能很难阅读。但是只要对CSS稍作改动,你就可以重新设计配色方案为了可读性 .

          完全免费的图片和JavaScript,这也许是最好的工具提示集,你会发现具有普遍吸引力。

          6.没有JS工具提示

          Chris Yaxley设计这些非JS工具提示它也运行在纯CSS上。它们没有自定义动画效果,因此与此列表中的其他动画相比,它们可能会觉得有些过时。

          但它们完全兼容现代浏览器,而且它们的行为完全符合您的预期。

          有时删除动画对你有利。这就像一个毫无意义的设计,你可以直接分享工具提示信息,没有什么有趣的事情。

          7.带工具提示的动画按钮

          这个风俗动画按钮工具提示当然是独一无二的。它在悬停时出现,并以自上而下的动画样式淡入视图。

          开发人员adityabhandari用最广泛支持的CSS3属性创建了这个工具提示。它可以在使用类的任何按钮或链接上工作.按钮和伪类一起出现:之前:之后 .

          如果你要设计一个带有下载或注册表单的页面,请记住这一点。您可以将此工具提示添加到任何按钮上,以便与用户共享相关信息。

          8.纯文本CSS提示

          我非常喜欢基于文本的工具提示,因为它们在网络上很传统。与这些纯粹的CSS提示你不仅可以得到一个干净的界面,而且可以在悬停时获得一个非常酷的动画效果。

          实际的工具提示有一个小延迟,这是标准浏览器工具提示的典型特征。这一个使用CSS动画浮动到视图中。此外,它还将默认光标样式更改为问号光标,这是一种与通常不可单击的链接相关的设计模式。

          非常简单的设置一个华丽的最终结果。而且,它运行在纯CSS上的事实更令人印象深刻。

          9.信息工具提示

          这是另一个信息型工具提示使用“i”信息图标。您可以轻松地复制此CSS,以在任何可能支持基于信息的工具提示的页面元素上运行。

          动画的风格是超级干净,虽然有点慢,我的口味。谢天谢地,您可以完全访问源代码,这样您就可以更改动画的速度、样式、位置以及几乎所有其他内容。

          另一点需要注意的是,这个设计如何使用SVG元素作为图标。减少页面上的图像当然不是很好的方法。

          10.带工具提示的甜甜圈图表

          数据图表总是与工具提示一起工作得更好。这样,即使页面上没有太多空间,也可以共享有关图表某些部分的额外数据。

          看一眼这个甜甜圈图表使用一些非常不可思议的工具提示。您会注意到它确实使用了一些JavaScript,但它主要用于donut图形效果。

          工具提示基于JS数据显示,因此不需要任何HTML。这使得定制变得更加困难,同时也使您能够更好地控制工具提示的样式、位置和行为。


          最新网站设计资讯
          企业网站建设

          企业网站建设优化一条龙,多年品牌网站设计,营销网站开发,手机网站制作,响应式网站设计

          联系我们

          电话:18868949445QQ:1611387063 邮箱:[email protected]

          联系云轩总监微信

          微信
          一本大道香蕉久在线播放29