暑假第14天,学习了幽灵按钮。
幽灵按钮,也就是Ghost Buttons,是一个透明的按钮,通常是矩形或者圆角矩形,仅保留基本的形制,使用细线来标识边界;按钮内的文字通常使用纤细的非衬线体字体的纯文本,来指明按钮功能。
幽灵按钮有时候也被称为“空按钮”,通常会被设计得比普通的按钮更大一些。而它们之所以被命名为“幽灵”,是应为这种按钮如同鬼魂一样透明,但是独特的造型会立刻吸引用户的注意力——正如同故事中鬼魂一样抓人眼球。
虽然你可能在大量的网站中看到幽灵按钮,但是并非所有的网站都和幽灵按钮相得益彰。真正适合幽灵按钮的是那些使用极简风和扁平风的网站和APP,使用大图背景的网站也与之非常搭。
效果是当点击上部图片图片会旋转和放大,用的transfrom:rotate,scale
当点击按钮,对应会在每个按钮上部出现提示框,并从四周向按钮内部出现动态线条
代码及解释如下:
代码如下:
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHT