hint.css使用说明
2018-06-24 02:00:45来源:未知 阅读 ()
GitHub:http://liu12fei08fei.github.io/html/1hint.html
hint.css使用说明
用途
快速实现tooltips提示样式
相关资源
官方网站GitHubCDN
功能特色:
- 只需要引入一个CSS文件,没有JavaScript
- 文件只有1.5KB min版 and zip版 (指的是SCSS,CSS10KB)
- 便于使用,无需配置
- 支持aria-label无障碍属性
- 支持所有主流浏览器
缺点:
收费,商业用途需要获得相关许可证
使用方法:
一、在HEAD标签内引入:
<link rel="stylesheet" href="hint.css"></link>
或
<link rel="stylesheet" href="hint.min.css"></link>
二、例子
Hello Sir, <span class="hint--bottom" aria-label="Thank you!">hover me.</span>
三、使用方法
class绑定八种方法:(表示显示位置)
hint--top hint--right hint--bottom hint--left hint--top-left hint--top-right hint--bottom-left hint-bottom-right
提示内容或提示文本:(以属性的形式写入)
两种方法:data-hint="提示信息" 或 aria-label="提示信息"
四、颜色-修饰符
错误 hint--error
<span class="hint--top hint--error" data-hint="提示信息">错误</span>
警告 hint--warning
<span class="hint--top hint--warning" data-hint="提示信息">警告</span>
提示 hint--info
<span class="hint--top hint--info" data-hint="提示信息">提示</span>
成功 hint--success
<span class="hint--top hint--success" data-hint="提示信息">成功</span>
五、尺寸-修饰符
小尺寸 hint--small
<span class="hint--top hint--small" data-hint="提示信息">成功</span>
中等尺寸 hint--medium
<span class="hint--top hint--medium" data-hint="提示信息">成功</span>
大尺寸 hint--large
<span class="hint--top hint--large" data-hint="提示信息">成功</span>
六、其他-修饰符
一直显示不隐藏 hint--always
<span class="hint--top hint--always" data-hint="提示信息">一直显示</span>
提示框改成圆角 hint--rounded
<span class="hint--top hint--rounded" data-hint="提示信息">圆角显示</span>
去掉过渡动画效果 hint--no-animate
<span class="hint--top hint--no-animate" data-hint="提示信息">无动画</span>
过渡增加弹性效果 hint--bounce
<span class="hint--top hint--bounce" data-hint="提示信息">动画增加弹性过渡</span>
浏览器兼容
- Chrome – 基本功能 + transition 效果
- Firefox – 基本功能 + transition 效果
- Opera – 基本功能
- Safari – basic
- IE 10+ – 基本功能 + transition 效果
- IE 8 & 9 –基本功能
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- GitHub开源的超棒后台管理面板 2020-04-12
- github pages 子域名 ( subdomain ) https 认证 2019-12-09
- 使用码云或GitHub搭建简单的个人网站 2019-08-26
- Github上写Blog 2019-01-08
- [学习交流]博客园 cnblog 添加github链接和自定义美化学习 2018-12-28
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash