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

按钮特效

江老实 Web前端工程师
难度初级
时长 2小时 0分
学习人数
综合评分9.77
113人评价 查看评价
9.9 内容实用
9.8 简洁易懂
9.6 逻辑清晰
  • border-radius (圆角) 用法:border-left(right/top/bottom所有不写)-radius:3px; opacity:0; 初始是0
    查看全部
  • left:-100%(-100px) 表示向其父元素的左边偏移该元素的宽度,也可以设置数值 transition:谁有变化就给谁加,写在变化前,而不是变化后 position:absolute,相对于父包含层进行绝对定位 对应的,父包含层要写 相对定位:position:relative
    查看全部
  • CSS3-box-sizing 属性允许以特定方式定义匹配某个区域的特定元素 box-sizing:content-box(默认值‘旧版’宽高+内边距+边框)、border-box(CSS3新属性:为元素设定的宽高,不受内边距和边框影响,自动减去边框和内边距,等到设定的值)、inherit(继承) 浏览器支持 IE、Opera、Chrome支持 Firefox:-moz-box-sizing border:rgba(255,255,255,0.5); 边框颜色 白色,0.5的透明度 background-position(背景位置):140PX(水平距左140PX) center(垂直居中);
    查看全部
  • transform:rotate(360deg)转360度 scale(1.2)放大1.2倍; -ms-transform:rotate(360deg) scale(1.2);IE -moz-transform:rotate(360deg) scale(1.2);火狐 -webkit-transform:rotate(360deg) scale(1.2);苹果、谷歌 -o-transform:rotate(360deg) scale(1.2);欧朋
    查看全部
  • CSS3-Transition(简写:用于设置四个过度属性:transition-property/-duration/-timing-function/-delay) 用法:transition:property duration timing-function delay; 例:transition:all(所有) 2s(时间) ease-out(减速:由快到慢);-ms-transition:2s ease-out:... all:width,height...过渡什么写什么,all/不写,表示所有。 值说明: transition-property:规定设置过度效果的CSS属性名称 transition-duration:规定完成过渡效果需要多少秒或者毫秒 transition-timing-function:规定速度效果的速度曲线 transition-delay:定义过渡效果何时开始(延时;不写此属性,鼠标滑过即开始) 浏览器支持 IE10、Firefox、Oprea、Chrome支持transition属性; Safari支持替代的-webkit-transition属性;(IE9及之前不支持)
    查看全部
  • CSS3-Transform 浏览器支持 IE10、Firefox(火狐 替代"-moz-")、Opera(欧朋 "-o-")支持; Opera(欧朋)只支持2D转换; IE9支持替代的 -ms-transform属性(仅适用于2D转换); Safari(苹果)、Chrome(谷歌)支持替代的 -webkit-transform属性(3D和2D转换);
    查看全部
  • CSS3-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):定义3D缩放转换; scaleX(x):通过设置X轴的值来定义缩放转换; scaleY(x):通过设置Y轴的值来定义缩放转换; scaleZ(x):通过设置Z轴的值来定义(3D)缩放转换;
    查看全部
  • 幽灵按钮主要用到 CSS3中: transform, transition, box-sizing border-radius
    查看全部
    0 采集 收起 来源:html结构制作

    2015-06-20

  • 这种解决方法好像还是有问题的
    查看全部
  • 使用判断还是会出现tip停住不消失的问题。 在鼠标滑入时加一个.stop(false,true).animate(...),鼠标移出时加一个.stop().animate(...)。
    查看全部
  • 不应该是加20px,一开始不能左对齐是因为.tip里加了14px的左右内填充。而定义left是对定义的width开始的。所以,如果要左对齐,应该加14,var pos=$(this).position().left+14;
    查看全部
  • $(对象).outerWidth() //该对象的完整宽度(包括padding和border)
    查看全部
  • opacity:半透明属性 三角形制作:border:7px solid transparent; 定义三角形朝向:borer-bottom-color: #2DCB70 //朝下
    查看全部
  • border-radius: 边框圆角属性、 兼容:-ms-;-moz-;-webkit-;-o-;
    查看全部
  • js动画连续播放bug 法一:.stop() 法二:判断元素上是否有animate()再执行 is(:animated)
    查看全部

举报

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

公众号

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

友情提示:

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