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

按钮特效

江老实 Web前端工程师
难度初级
时长 2小时 0分
学习人数
综合评分9.77
113人评价 查看评价
9.9 内容实用
9.8 简洁易懂
9.6 逻辑清晰
  • transition: all; 过度该元素所有属性(可忽略)
    查看全部
  • 要在元素上定义transition(过度属性),在行为上(如hover)去定义动态效果(如transform)
    查看全部
  • transform 旋转与缩放
    查看全部
  • transform
    查看全部
  • 所有背景图默认都是巨左居上
    查看全部
  • 三个盒子(div display:block; 独占一行) 摆一排的方法,既可以用float,亦可以display:inline-block; 使其同行
    查看全部
  • input的局限性
    查看全部
  • 圆角按钮
    查看全部
    0 采集 收起 来源:传统<input>标签

    2015-03-21

  • css3
    查看全部
  • CSS-Transition
    查看全部
  • @@--按钮特效===第1章 CSS3实现“幽灵按钮”特效== 1-12 动画连续播放bug解决 当鼠标多次划过的速度太快,频繁触发鼠标划过事件,导致离开一会儿,动画还在执行。 【解决】 判断元素上是否有animate()再执行 关于 JQuery的stop方法??再去了解下。
    查看全部
  • @@--按钮特效===第1章 CSS3实现“幽灵按钮”特效== 1-11 jq实现提示框内容显示 --jQuery-- 1.提示框的整体宽的获取用.outerWidth()方法。》注意:width()获得的是定义的width值, 2.提示框的渐变效果用.animate({})方法 3.移动端建议用css3实现渐变效果;pc端为了浏览器兼容,有的动画渐变效果建议用.animate()方法。
    查看全部
  • @@--按钮特效===第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章 CSS3实现“幽灵按钮”特效== 1-5 按钮样式及基本动画实现 ①边框亮度--由暗变亮-->透明度变化 -->用rbga()表示颜色值和亮度 border:2px solid rbga(255,255,255,0.8); 初始值 ,鼠标划过,亮度变为1. ②【box-sizing】 css3属性-允许以特定的方式定义匹配某个区域的特定元素- >box-sizing:content-box|border-box|inherit >content-box(默认值):宽度和高度分别应用到元素的内容框,在宽度和高度之外绘制元素的内边距和边框。 >border-box:为元素设定的宽度和高度决定了元素的边框盒。就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度减去边框盒内边距才能得到内容的宽度和高度。 >inherit:规定从父元素集成box-sizing属性的值。 **浏览器兼容**IE,Opera,Chrome 支持box-sizing属性; Firefox 支持替代的-moz-box-sizing属性
    查看全部

举报

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

公众号

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

友情提示:

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