按钮特效_学习笔记

首页免费课按钮特效笔记

按钮特效

最热最新

烟雨平生 01:15

把字体能放大么

查看全部

3 采集收起来源：CSS3新增的圆角属性
2018-03-22
停不下来

不应该是加20px,一开始不能左对齐是因为.tip里加了14px的左右内填充。而定义left是对定义的width开始的。所以，如果要左对齐，应该加14，var pos=$(this).position().left+14;

查看全部

3 采集收起来源：jq实现提示框内容显示
2015-06-09
wanice

通过这一段时间的学习，我发现学习CSS不只是会代码，而且要学会分析没个细微的动作，有的是局部的，有的是全局的，CSS可以做出非常好效果，用法简单，但我总是在布局上出现问题，后来发现，再思考的过程中应该清楚自己是相对的哪个div,搞清楚后再考虑是相对或者绝对定位，就好办了，老师讲解的非常详细，不仅把技术点告诉了，还教你怎么去分析，怎么做到那些好看的页面，一步步深入，最后自己也可以做出非常绚丽的页面了，还能自己发挥想要的页面；/*.link:hover .icon 是对link盒子操作 icon的变化*/ .link-miss .icon:hover{ background: url("icon/dog96.png") no-repeat center center; background-size: 110px; } .link-play .icon:hover{ background: url("icon/cat-blue128.png") no-repeat center center; background-size: 110px; } .link-touch .icon:hover{ background: url("icon/girl128.png") no-repeat center center; background-size: 120px; }

查看全部

3 采集收起来源：jq实现提示框内容显示
2018-03-22
Humiliter

老师讲的过程中，把最后的线条宽度调成100%是不对的。因为线条的宽度是盒子的宽度，但是线条最后要覆盖的是盒子外边框的宽度啊！外边框是具有自身的宽度2px。我从一开始的demo演绎中就看到了四个线条不能重合的问题。但是到现在才算是知道了原因所在，这里应该定义宽度为184px。在正方形的四个顶点处，会有两两线条叠加的效果。。。

查看全部

2 采集收起来源：从左到右线条动画实现
2015-01-08
XZanYI

.link .icon :hover{} //鼠标滑过.icon 时icon才变化 .link:hover .icon {} //鼠标滑过link 时icon 变化

查看全部

2 采集收起来源：渐变旋转放大动画（上）
2015-04-11
子皮 01:55

笔记的功能也做的非常好！！

查看全部

2 采集收起来源：传统<input>标签
2018-03-22
一淇

将transition定义在初始状态，而hover属性才是最终状态的表现形式

查看全部

2 采集收起来源：按钮样式及基本动画实现
2015-01-17
小幼苗之旅

推荐方法，用stop函数，不用判断 $(function(){ $('.link .button').hover(function(){ var title=$(this).attr('data-title'); $('.tip em').text(title); var pos=$(this).offset().left; var dis=($('.tip').outerWidth()-$(this).outerWidth())/2; var l=pos-dis; $('.tip').css({'left':l+'px'}).stop(true,true).animate({'top':180,'opacity':1},300); },function(){ $('.tip').stop(true,true).animate({'top':160,'opacity':0},300); }) })

查看全部

2 采集收起来源：动画连续播放bug解决
2015-11-30
梦想的天空

<input type="button" value="按钮"> <input type="submit" value="提交"> <input type="reset" value="重置"> <input type="image">现在都是用css美化，这个基本上不用了表单按钮的默认样式是有操作系统决定的 input{width:100px;height:40px;background:url();border:none;} input背景图片展示的话，只能做固定宽高的，如果宽度改变，会出现背景图片repeat效果 1. 传统表单input标签按钮有：type--button,submit,reset,image(image类型基本上不用）；input属于行内块元素，可设置宽高。 2. 如果input按钮没有设置CSS样式，默认由操作系统给的，有交互功能。如果设置了背景图片，则会失去交互功能，且若宽高不适合，会repeat. 3. submit和reset这两种类型有默认动作，平时不需要，比较流行的按钮制作都是由<a>标签实现的。

查看全部

2 采集收起来源：传统<input>标签
2018-03-22
gc

默认按钮的样式来自操作系统。所以如果用的是input中的按钮，那么最好使用CSS来指定样式，而不是使用默认样式，但是用CSS来指定样式又有一个问题，那就是指定了CSS之后，按钮的样式就没有交互效果了，即：鼠标经过、按下按钮时，按钮的样式不会变化。

查看全部

2 采集收起来源：传统<input>标签
2014-12-07
xuzhig 03:44

ok

查看全部

2 采集收起来源：传统<input>标签
2018-03-22
xuzhig

ok

查看全部

2 采集收起来源：传统<input>标签
2018-03-22
梦身

stop() 方法停止当前正在运行的动画。 $(selector).stop(stopAll,goToEnd) stopAll 可选。规定是否停止被选元素的所有加入队列的动画。 goToEnd 可选。规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用。进入时：$(".tip").stop().animate({opacity:1,top:"自己的值"},300) 离开时：$(".tip").stop().animate({opacity:0,top:"自己的值"},300)

查看全部

2 采集收起来源：动画连续播放bug解决
2018-03-22
微露之光 02:00

学习中

查看全部

2 采集收起来源：传统<input>标签
2018-03-22