-
/*从下到上线条动画实现*/ .button .line-bottom{width:2px;height:0px;left:-2px;bottom:-110%;} .button:hover .line-bottom{height:108%;bottom:-2px;}注意不是height:100%; （虽然能实现效果显示，但是高度和button高度不同） 鼠标滑过，高度还可以设置为50px： .button:hover .line-bottom{height:50px;bottom:-2px;}查看全部
-
/*从上到下线条动画实现*/ .button .line-right{width:2px;height:0px;right:-2px;top:-110%;} .button:hover .line-right{height:50px;top:-2px;}; 鼠标滑过，高度还可以设置为108%： .button:hover .line-right{height:108%;top:-2px;}查看全部
-
发现一个问题：最终线条覆盖在button上面， .button:hover .line-top{width:100%;left:-2px;}这样设置后的width和button的宽度不一样， 可改写为： .button:hover .line-top{width:102%;left:-2px;} 或者 .button:hover .line-top{width:180px;left:-2px;}/*注意width:184px;也是不对的*/查看全部
-
css3——box-sizing 定义和用法： box-sizing属性允许以特定的方式定义匹配某个区域的特定元素 语法： box-sizing：content-box|border-box|inherit content-box(默认值)：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。 border-box：为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度减去边框盒内边距才能得到内容的宽度和高度。 inherit：规定从父元素集成box-sizing属性的值。 ease-out一开始快，然后变慢 ease—慢——快——慢查看全部
-
css3——Transform 定义和用法 transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。查看全部
-
CSS3关键技术点： transform transition box-sizing border-radius查看全部
-
幽灵按钮：不再使用复杂的色彩、样式和纹理。外在以线框示以轮廓，内部以文字示以功能，背景透出，与整个页面或背景合二为一的一种方式查看全部
-
<a>标签制作按钮的优点查看全部
-
border-radius 设置圆角查看全部
-
box-sizing 兼容问题查看全部
-
box-sizing 具体描述查看全部
-
CSS3 —— box-sizing属性查看全部
-
transition兼容问题查看全部
-
transition属性：用于设置四个过渡属性查看全部
-
transform兼容问题查看全部
举报
0/150
提交
取消