HTML5开发项目实战:幽灵按钮 VIP

成为vip会员,免费看所有精品课程
  • 目录

    目录 收起>

    本课讲解通过使用CSS3,完成一个幽灵按钮的效果,这里主要用到 CSS3 的旋转和缩放,同时注意浏览器兼容性问题。

    1.幽灵按钮布局 00:05:38

    本课时讲解幽灵按钮,并使用 HTML 基本标签完成基本布局效果。

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

    本课时讲解通过 CSS3 的特效完成图片的旋转和缩放效果,主要注意浏览器兼容器问题。

    3.Transition 的应用 00:06:27

    本课时讲解通过使用 Transition 的过渡效果完成一个动画的渐变效果,使动画看起来更加平滑。

    4.设置按钮效果 00:06:01

    本课时讲解通过使用基本的 CSS 样式完成幽灵按钮的布局效果。

    5.边框动画效果 00:10:58

    本课时讲解通过对幽灵按钮四个边的进入动画效果的了解,完成动画的分析以及完成 top 的进入动画的添加。

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

    本课时讲解通过使用 CSS3 特效以及对边框的了解完成边框动画的添加。

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

    本课时讲解通过使用提示框(tooltip)样式的布局,完成基本的布局添加以及三角形的制作。

    8.添加提示框事件隐藏与显示 00:08:48

    本课时讲解通过使用 jQuery 完成提示框的添加和提示框的隐藏。
  • 提问

    提交问题
  • 下载

  • 线路

    视频太卡?试试切换线路 √ 线路1 √ 线路2
  • 收藏

    收藏课程
  • 分享

连播

连续播放

关灯

关灯模式
视频加载太慢?

我们有两条线路可以选择,试试切换线路吧

HTML5开发项目实战:幽灵按钮

8课时,59分钟2014-12-18
iwen
iwen

极客学院金牌布道师

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


核心内容:
1.transform

2.transition

3.box-sizing

4.border-radius


软件环境:WebStrom


是否提供资料:


课程等级:初级


适合人群:
具有HTML基础的开发者

  • 技术问答
  • 1

    幽灵按钮布局

    05:38

    本课时讲解幽灵按钮,并使用 HTML 基本标签完成基本布局效果。

  • 2

    添加图片加入动画

    10:22

    本课时讲解通过 CSS3 的特效完成图片的旋转和缩放效果,主要注意浏览器兼容器问题。

  • 3

    Transition 的应用

    06:27

    本课时讲解通过使用 Transition 的过渡效果完成一个动画的渐变效果,使动画看起来更加平滑。

  • 4

    设置按钮效果

    06:01

    本课时讲解通过使用基本的 CSS 样式完成幽灵按钮的布局效果。

  • 5

    边框动画效果

    10:58

    本课时讲解通过对幽灵按钮四个边的进入动画效果的了解,完成动画的分析以及完成 top 的进入动画的添加。

  • 6

    边框动画效果全部完成

    05:06

    本课时讲解通过使用 CSS3 特效以及对边框的了解完成边框动画的添加。

  • 7

    提示框布局制作

    05:35

    本课时讲解通过使用提示框(tooltip)样式的布局,完成基本的布局添加以及三角形的制作。

  • 8

    添加提示框事件隐藏与显示

    08:48

    本课时讲解通过使用 jQuery 完成提示框的添加和提示框的隐藏。

相关课程

  • CSS动画—页面特效

    本课讲解2D、3D以及过渡的动画效果,并且了解多列的设计。

    5课时 38分钟
    初级
    50643人学习
  • jQuery CSS操作及jQuery的盒子模型

    通过使用jQuery能快速跟上越来越快的开发需求。掌握了jQuery对css的操作,能很好的通过jQuery来进行元素的样式的处理,本课讲解通过jQuery进行操作CSS及了解jQuery的盒子模型。

    2课时 17分钟
    初级
    22766人学习
  • HTML5开发项目实战:列表切换

    本课通过 CSS 经典计算完成列表标签的切换效果,使用 jQuery 完成事件的处理和标签的切换效果。

    3课时 24分钟
    初级
    19871人学习
  • HTML5开发项目实战:侧边栏固定

    通过对定位的使用,监听滚动事件,在滚动判断中通过 JavaScript 或者 jQuery 修改 CSS 样式,完成侧边栏停靠功能。

    3课时 25分钟
    初级
    20035人学习