如何使用CSS创建巧妙的动画提示框
原文: https://webdesign.tutsplus.co... 原作: Jase Smith 翻译: Stypstive 当你的用户需要漂亮的图标给出额外的文字信息时,亦或是当他们在点击了按钮之后需要确认自己没点错时,又或是带图片和字幕的复活节彩蛋,提示框是用来增强用户界面的绝佳手段。现在,让我们来做几个动画提示框,没有别的,只有HTML和CSS。 样例 这是我们之后要做的: http://jsfiddle.net/kcschaefe... 在我们沉浸在写代码的过程中之前,让我们先来看看我们的意图是什么。主要目的是为了获得一种简单的添加提示框的方法,这样一来,我们之后就能够通过增加一个自定义的 tooltip 属性来做到这一点。 <span tooltip="message">visible text or icon, etc.</span> 关于可访问性和功能的记注 如果你在寻找兼容508的提示框,或者需要带容器冲突侦测和/或HTML内容 vs 纯文本的智能提示框,有许多实用第三方脚本的解决方案能满足你的要求。 "用JavaScript来做完全可访问的交互组件是命令式的" - Sara Soueidan, 打造一个完全可访问的帮助提示框...比你想的要难 这篇教程不会特地解决可访问性的需求。你了解你的用户,知道他们需要什么,所以有关这方面,也要记得考虑他们的需求。