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

按钮特效

江老实 Web前端工程师
难度初级
时长 2小时 0分
学习人数
综合评分9.77
113人评价 查看评价
9.9 内容实用
9.8 简洁易懂
9.6 逻辑清晰
  • 旋转 transform中的rotate属性 使用时加上一个角度 单位deg 放大 scale(x,y) 2D缩放 scale3d(x,y,z) 3D缩放 scaleX(x)等 移动 倾斜....
    查看全部
  • 幽灵按钮
    查看全部
    0 采集 收起 来源:课程简介

    2015-07-15

  • 幽灵按钮
    查看全部
    0 采集 收起 来源:课程简介

    2015-07-15

  • 幽灵按钮
    查看全部
    0 采集 收起 来源:课程简介

    2015-07-15

  • 形象的幽灵按钮
    查看全部
    0 采集 收起 来源:课程简介

    2015-07-15

  • css3实现
    查看全部
    0 采集 收起 来源:编程挑战

    2015-07-15

  • 成了。。
    查看全部
    0 采集 收起 来源:编程挑战

    2015-07-15

  • <a>标签制作按钮的优点: 1、没有默认事件 2、可以用css模拟成按钮外观,并做到宽度自适应 3、可以增加交互效果,且浏览器兼容
    查看全部
  • css3 transition
    查看全部
  • css3 transform参数
    查看全部
  • box-sizing 定义和用法 box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素。 语法 box-sizing: content-box|border-box|inherit 值描述 content-box 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 border-box 为元素设定的宽度和高度决定了元素的边框盒。 就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 inherit 规定应从父元素继承 box-sizing 属性的值。 Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。 Firefox 支持替代的 -moz-box-sizing 属性。
    查看全部
  • Transform 定义用法 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜 rotate(angle )定义 2D 旋转,在参数中规定角度 rotateX(angle)定义沿着 X 轴的 3D 旋转。 rotateY(angle)定义沿着 Y 轴的 3D 旋转。 rotateZ(angle)定义沿着 Z 轴的 3D 旋转。 scale(x,y)定义 2D 缩放转换。 scale3d(x,y,z)定义 3D 缩放转换。 scaleX(x)通过设置 X 轴的值来定义缩放转换。 scaleY(y)通过设置 Y 轴的值来定义缩放转换。 scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。 Internet Explorer 10、Firefox、Opera 支持 transform 属性。 Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。 Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。 Opera 只支持 2D 转换。 Transition 定义和用法 transition 属性是一个简写属性,用于设置四个过渡属性: transition-property transition-duration transition-timing-function transition-delay 语法 transition: property duration timing-function delay; 值描述 transition-property规定设置过渡效果的 CSS 属性的名称。 transition-duration规定完成过渡效果需要多少秒或毫秒。 transition-timing-function规定速度效果的速度曲线。 transition-delay定义过渡效果何时开始。 Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。 Safari 支持替代的 -webkit-transition 属性。 注释:Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。
    查看全部
  • 记一下
    查看全部
  • 三角形 width:0; height:0; overflow:hidden; border:7px solid transparent;//決定三角形的大小 border-top-color:#f00;//決定三角形的方向 這裡的top指的是三角形的尖端朝下 圓角:border-radius:某px; 透明度: opacity:0;
    查看全部
  • .button:hover 滑過後只定義滑鼠滑過的變化 而具體的transition要定義在初始狀態下.button
    查看全部

举报

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

微信扫码,参与3人拼团

微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

友情提示:

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