为了账号安全,请及时绑定邮箱和手机立即绑定

按钮特效

江老实 Web前端工程师
难度初级
时长 2小时 0分
学习人数
综合评分9.77
113人评价 查看评价
9.9 内容实用
9.8 简洁易懂
9.6 逻辑清晰
  • 网页端用jquery animate()实现动画效果 兼容低版本浏览器 移动端用 css3 transition 更好
    查看全部
  • @@--按钮特效===第1章 CSS3实现“幽灵按钮”特效== 1-10 提示框样式制作 设计要点: ①提示文字放在按钮a标签的data属性中; ②提示框统一放在在一个盒子中,相对整个box定位 ③鼠标划过,提示框渐隐渐显的效果 提示框外观实现: ①圆角边框--border-radius ②三角--span- 【border-radius】设置圆角 定义和用法: border-radius 属性是一个简写属性,用于设置四个border-*-radius属性 **浏览器兼容**IE9+ 、 Firefox4+ 、Chrome 、 Safari5+ 以及Opera支持border-radius 属性 三角形实现 /*三角形的大小取决于border大小*/ border:7px solid transparent;/*透明*/ 设置三角形朝向: >向下 >border-top-color:#2DCB70; >向上 >border-bottom-color:#2DCB70; >向左 >border-right-color:#2DCB70; >向右 >border-left-color:#2DCB70; /*设置三角形位置*/ position:absolute; top:35px;/*和高度有关*/ --三角居边框中间位置-- left:50%; margin-left:-3px;/*border的一半*/
    查看全部
  • @@--按钮特效===第1章 CSS3实现“幽灵按钮”特效== 1-6 从左到右线条动画实现 按钮四个边线-动画效果--有一个点变成一根线,位置从外到内 【注意】与边框定点对齐,position:absolute;left:0;只是与盒子顶点对齐。因此left:-边框宽度; 【transition过渡】
    查看全部
  • 任务1:菜单的左上、右上为圆角 任务2:菜单项的宽度可以根据文字内容自适应宽度 任务3:有鼠标经过的反白效果
    查看全部
    1 采集 收起 来源:编程挑战

    2015-03-27

  • input属于行内块元素,可以设置宽高。
    查看全部
    1 采集 收起 来源:传统<input>标签

    2015-04-12

  • /*从上到下线条动画实现*/ .button .line-right{width:2px;height:0px;right:-2px;top:-110%;} .button:hover .line-right{height:50px;top:-2px;}; 鼠标滑过,高度还可以设置为108%: .button:hover .line-right{height:108%;top:-2px;}
    查看全部
  • 完全按照原程序提示完成。当提供的半边圆无法满足<a>的宽度时候,用背景色填充(目前所想到的方法) 用js实现鼠标经过的反白效果和失焦的表现
    查看全部
    1 采集 收起 来源:编程挑战

    2018-03-22

  • CSS3——box-sizing 定义和用法:box-sizing属性允许以特定的方式定义匹配某个区域的特定元素。 语法:box-sizing: comtent-box(默认值)宽度和高度分别应用到元素的内容框,在宽度和高度之外绘制元素的内边距和边框。 border-box为元素设定的宽度和高度决定了元素的边框盒。就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 inherit规定应从父元素继承box-sizing属性的值。
    查看全部
  • 用<input>标签做按钮的局限性:宽度无法自适应,没有交互效果。
    查看全部
  • $('.tip').css({'left':l+'px'}).stop().animate({'top':180,'opacity':1},300); $('.tip').stop().animate({'top':160,'opacity':0},300);
    查看全部
  • 制作一个菜单,如下图所示: 任务: 任务1:菜单的左上、右上为圆角 任务2:菜单项的宽度可以根据文字内容自适应宽度
    查看全部
    1 采集 收起 来源:编程挑战

    2015-02-22

  • 1.用css对input按钮进行贴图就会失去交互功能。 2.用css对input按钮进行贴图,改变按扭宽度就会图片repeat 总结:现在一般都使用<a>标签来定义按钮
    查看全部
    1 采集 收起 来源:传统<input>标签

    2018-03-22

  • 小三角形的制作 核心:border: border-top-color:三角形颜色
    查看全部
  • 按钮的三个写法。 <input> button按钮, submit提交, reset重置
    查看全部
    1 采集 收起 来源:传统<input>标签

    2018-03-22

  • transform rotate旋转 scale缩放。。 transform:rotate(360deg) scale(1.2);其父元素加上transition过渡属性 transition
    查看全部

举报

0/150
提交
取消
课程须知
1、你至少具备photoshop简单基础知识。 2、熟悉html基础知识,尤其对<input>标签、<a>标签、<span>标签和css样式比较了解。 3、有(X)HTML和CSS2基础及对HTML5和CSS3有所了解的童鞋们。
老师告诉你能学到什么?
1、如何制作圆角按钮 2、如何拆解动画效果 3、如何使用transform属性实现旋转 4、如何使用transition属性实现过渡

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!