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

按钮特效

江老实 Web前端工程师
难度初级
时长 2小时 0分
学习人数
综合评分9.77
113人评价 查看评价
9.9 内容实用
9.8 简洁易懂
9.6 逻辑清晰
  • <link type="text/css" rel="stylesheet" href="css/style.css">
    查看全部
    0 采集 收起 来源:html结构制作

    2018-03-22

  • <head> <meta charset="UTF-8"> <title>幽灵按钮</title> <body> </body> </head>
    查看全部
    0 采集 收起 来源:html结构制作

    2018-03-22

  • <html Lang="en"> </html> 语言
    查看全部
    0 采集 收起 来源:html结构制作

    2018-03-22

  • <!doctype html> 声明
    查看全部
    0 采集 收起 来源:html结构制作

    2018-03-22

  • box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素: box-sizing: content-box(默认值) | border-box | inherit 兼容性:IE 、 Opera 、 Chrome 支持 box-sizing 属性,Firefox 支持替代的 -moz-box-sizing 属性
    查看全部
  • transition: property duration timing-function delay; transition-property:规定设置过渡效果的CSS属性的名称 transition-duration:规定完成过渡效果需要多少秒或毫秒 transition-timing-function:规定速度效果的速度曲线 transition-delay:定义过渡效果何时开始
    查看全部
  • 浏览器兼容: transform:rotate( 360deg ) scale( 1.2 ); -ms-transform:rotate( 360deg ) scale( 1.2 ); -moz-transform:rotate( 360deg ) scale( 1.2 ); -webkit-transform:rotate( 360deg ) scale( 1.2 ); -o-transform:rotate( 360deg ) scale( 1.2 );
    查看全部
  • transform 属性向元素应用 2D 或 3D转换。该属性允许我们对元素进行 旋转、缩放、移动或倾斜。 transform 部分参数: 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 轴的值来定义缩放转换
    查看全部
  • transition
    查看全部
  • 憋了好久,忍不住吐槽一下这位美女的发音。听到L读成 哎楼 我已深深陶醉
    查看全部
    0 采集 收起 来源:html结构制作

    2015-08-16

  • 三角形定义
    查看全部
  • transition过渡属性
    查看全部
  • transform浏览器兼容
    查看全部
  • 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 属性。
    查看全部
  • Transform 定义和用法 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜 rotate(angle )定义 2D 旋转,在参数中规定角度.transform中的rotate属性 使用时加上一个角度 单位deg 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 缩放转换。 ie10 firefox opera 支持transform; ie9 支持代替的 -ms-transfrom(仅适用于 2D 转换)。 safari和chrome支持替代的-webkit-trancefrom opera只支持2D转换
    查看全部

举报

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
您的移动学习伙伴

公众号

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

友情提示:

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