CSS3 实现下拉选择框、单选框和复选框动画特效 认证专享

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

    目录 收起>

    本课程讲解,使用 CSS3 完成表单控件中,下拉选择框、单选框、复选框的动画效果,进一步加深 CSS3 中 transform、transition 的使用场景和方法。

    1.不一样的下拉选择框 00:40:12

    本课时讲解,CSS3 动画属性和 jQuery 结合使用的方法,模拟炫酷的下拉选择框动画特效

    2.CSS3 实现单选框的动画特效 00:12:55

    本课时讲解,使用 transform、transition 属性,和 CSS3 强大的选择器功能,实现炫酷的单选框动画特效。

    3.CSS3 实现复选框的动画特效 00:22:24

    本课时讲解,使用 transform、transition 属性,和 CSS3 强大的选择器功能,实现炫酷的复选框动画特效。
  • 提问

    提交问题
  • 下载

  • 线路

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

    收藏课程
  • 分享

连播

连续播放

关灯

关灯模式
视频加载太慢?

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

CSS3 实现下拉选择框、单选框和复选框动画特效

3课时,76分钟
王士强
王士强

极客学院签约布道师

课程背景:
Html 表单控件中,下拉选择框、单选框和复选框默认的样式风格,很多时候不能满足我们的 UI 需求,通过 CSS3 动画属性的学习,再加上一点 jQuery 的基础知识,就能完美改变默认的交互效果,吸引用户的眼球,并为用户带来极致的交互体验。

核心内容:
1.CSS3 中的 transform、transition、animation 属性的熟练运用。
2.CSS3 动画属性和 jQuery 的结合应用。
3.下拉选择框、单选框和复选框动画特效的实现原理。

软件环境:Sublime Text

是否提供资料:

课程等级:中级

适合人群:
具有一定的前端开发基础,了解或使用过 jQuery,和 CSS3 简单动画属性的用户
  • 技术问答
  • 1

    不一样的下拉选择框

    40:12

    本课时讲解,CSS3 动画属性和 jQuery 结合使用的方法,模拟炫酷的下拉选择框动画特效

  • 2

    CSS3 实现单选框的动画特效

    12:55

    本课时讲解,使用 transform、transition 属性,和 CSS3 强大的选择器功能,实现炫酷的单选框动画特效。

  • 3

    CSS3 实现复选框的动画特效

    22:24

    本课时讲解,使用 transform、transition 属性,和 CSS3 强大的选择器功能,实现炫酷的复选框动画特效。

相关课程

  • CSS3 实现 loading 动画和 3D 翻转动画特效

    本课程讲解,使用 CSS3 制作各类 loading 动画效果,并开始学习 CSS3 中 3D 动画的基础知识,完成一个立体的 3D 菜单翻转动画特效。

    3课时 36分钟
    中级
    17225人学习
  • CSS3-商城首页的子模块分析和细节实现

    本课程讲解 CSS 3 商城布局项目开发实战之商城首页的子模块分析和细节实现,内容包括页头、首屏的布局和细节 。

    3课时 79分钟
    初级
    8022人学习
  • CSS3 动画属性简介及弹球效果

    本课程,首先对 CSS3 动画相关属性和其它常用属性进行了简单的介绍,并对使用方法进行演示。然后,利用相关知识点详细讲解弹球效果的实现思路和过程。

    4课时 40分钟
    中级
    17983人学习
  • CSS3 布局属性全接触

    介绍 CSS3 布局相关属性的应用,通过简要介绍了解基本属性,通过案例演示了解属性的应用。

    6课时 50分钟
    中级
    24379人学习