陈德馨

hint.css纯代码实现超炫提示功能

1948人参与 |分类: 站长百科|时间:2016年09月08日 11:37

hint.css是一个20kb的css,却实现了和多炫酷的提示效果,无需javascript代码,无需javascript代码,无需javascript代码,重要的事情说三遍,具体是什么效果呢?可以查看自己尝试添加一下,下面来给你做个简单演示,3分钟让你学会怎么用!

1、网页head部分引用hint.css

<link rel="stylesheet" href="hint.css">

2、使用

设置提示框的位置:

<span class="hint--位置" aria-label="提示语">html内容</span>

位置相关的class类

左←:hint--left

右→:hint--right

左上↖:hint--top-left

上↑:hint--top

右上↗:hint--top-right

左下↙:hint--bottom-left

下↓:hint--bottom

右下↘:hint--bottom-right

设置提示框的颜色:

<span class="hint--位置" class="hint--颜色" aria-label="提示语">html内容</span>

颜色相关的class类

红色警告:hint--error

黄色提醒:hint--warning

绿色通过:hint--success

蓝色正常:hint--info

<span class="hint--位置" class="hint--颜色" aria-label="提示语">html内容</span>

大小相关的class类

小号:hint--small

中号:hint--medium

大号:hint--large

好了,关于纯代码实现提示功能的分享完毕,通过上面各种类的排列组合,完全可以自由发挥,可以自己设置多种不同的风格哦。

hint.css下载:

hint.zip

来源:陈德馨博客(微信/QQ号:35435164),转载请保留出处和链接!

地址:

必填

选填

选填

◎已有 1 人评论,请发表您的观点。

  
    
1楼金榜台网赚博客   2016-09-11 21:20:20
都是比较实用的资料,感谢分享
回复