HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 学习视频 查看内容

HTML5开发项目实战案例-幽灵按钮

2015-10-28 10:02| 发布者: html5cn| 查看: 7876| 评论: 0|来自: 腾讯精品课

摘要: 说透明按钮是“幽灵”并没有错,“薄”和“透”是这种设计的最大特色。置于按钮之后的背景往往相对素雅,或加以纯色,或高斯模糊,或色调沉郁,这使得即使有按钮也不影响观看全图。双方相互映衬而达成微妙的平衡。 ...

 

  难以程度:简单易学

 

  课程背景: 说透明按钮是“幽灵”并没有错,“薄”和“透”是这种设计的最大特色。不设底色不加纹理,按钮仅有一层薄薄的线框标明边界,确保了它作为按钮的功能性,又达成了“纤薄”的视觉美感。置于按钮之后的背景往往相对素雅,或加以纯色,或高斯模糊,或色调沉郁,这使得即使有按钮也不影响观看全图。双方相互映衬而达成微妙的平衡。

 

  1. 幽灵按钮布局 [ 05:38 ]

  2. 添加图片加入动画 [ 10:22 ]

  3. Transition 的应用 [ 06:27 ]

  4. 设置按钮效果 [ 06:01 ]

  5. 边框动画效果 [ 10:58 ]

  6. 边框动画效果全部完成 [ 05:06 ]

  7. 提示框布局制作 [ 05:35 ]

  8. 添加提示框事件隐藏与显示——课程完结 [ 08:49 ]


鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-5-27 16:16

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部