-
幽灵按钮： 1-10：提示框样式制作 相对于整个box对应的原因： 如果提示信息宽度是固定的，且小于link的话，是可以将tip放在link下面的。但如果提示信息宽度是自适应的，不确定的，且有可能会超过link的宽度，那么就需要将tip相对于整个box定位。查看全部
-
幽灵按钮： 1-6按钮线条的变化： .button .line{ display: block; position: absolute; background: none; transition:0.4s ease;/*0.2s的时间转换，ease-out由快到慢 */ -webkit-transition:0.4s ease; -moz-transition:0.4s ease; -o-transition:0.4s ease; } .button .line-top{ height:2px ; width: 0; left: -50%; top:-2px; } .button:hover .line-top{ width: 100%; left: -2px; } .button .line-right{ width: 2px; height: 0; top:-110%; right: -2px; } .button:hover .line-right{ height: 100%; top:-2px; }查看全部
-
CSS3 幽灵按钮： 1-5按钮特效及基本动画实现 按钮边框状态的变化效果，要添加transition属性，才可实现过渡的动画 .button{ display: block; width: 180px; height: 50px; line-height: 50px; text-decoration: none; color: #2dcb70; font-family: Arial; font-weight: bolder; border: 2px solid rgba(255,255,255,0.6); padding-left: 20px; margin: 0 auto; box-sizing: border-box; -moz-box-sizing:border-box ; -o-box-sizing:border-box ; -webkit-box-sizing:border-box ; -ms-box-sizing:border-box ; background: url(allow.png) no-repeat 130px center; transition:0.4s ease;/*0.2s的时间转换，ease-out由快到慢 */ -webkit-transition:0.4s ease; -moz-transition:0.4s ease; -o-transition:0.4s ease; } .button:hover{ border: 2px solid rgba(255,255,255,1); background-position: 140px center; }查看全部
-
CSS3 幽灵按钮： 1-5按钮特效及基本动画实现 3.浏览器兼容:IE,Opera,Chrome 支持box-sizing属性； Firefox 支持替代的-moz-box-sizing属性查看全部
-
CSS3 幽灵按钮： 1-5按钮特效及基本动画实现： ②【box-sizing】 css3属性-允许以特定的方式定义匹配某个区域的特定元素- >box-sizing：content-box|border-box|inherit content-box(默认值)：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。 border-box：为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度减去边框盒内边距才能得到内容的宽度和高度。 inherit：规定从父元素集成box-sizing属性的值。 ease-out一开始快，然后变慢 ease—慢——快——慢查看全部
-
CSS3 幽灵按钮： 1-5按钮特效及基本动画实现： 边框亮度--由暗变亮-->透明度变化 -->用rbga（）表示颜色值和亮度 border:2px solid rbga(255,255,255,0.8); 初始值 ，鼠标划过，亮度变为1. ②【box-sizing】 css3属性-允许以特定的方式定义匹配某个区域的特定元素- >box-sizing：content-box|border-box|inherit查看全部
-
-4 渐变旋转放大（下） CSS3-Transition浏览器支持问题 Internet Explorer10,Firefox,Opera和Chrome支持 Safari支持替代的-webkit-transition属性 Internet Explorer 9以及更早版本的浏览器不支持transition属性查看全部
-
幽灵按钮： 1-4 渐变旋转放大（下） CSS3-Transition属性：主要用来设置过渡效果 transition 简写属性，用于在一个属性中设置四个过渡属性。 transition-property 规定应用过渡的 CSS 属性的名称。 transition-duration 定义过渡效果需要多少秒或毫秒。默认是 0。 transition-timing-function 规定过渡效果的速度曲线。默认是 "ease"。 transition-delay 规定过渡效果何时开始。默认是 0。查看全部
-
幽灵按钮： 1-4 渐变旋转放大（下） CSS3-Transform浏览器支持问题： IE10,Firefox,Opera支持transform属性 IE9支持替代的-ms-transform属性（仅适用于2D转换 ） Safari和Chrome支持替代的-webkit-transform属性（3D和2D转换） Opera只支持2D转换查看全部
-
幽灵按钮： 1-4 渐变旋转放大（下） CSS3-Transform参数 rotate(angle)定义2D旋转，angle定义旋转角度 rotateX(angle)定义沿X轴的3D旋转 rotateY(angle)定义沿Y轴的3D旋转 rotateZ(angle)定义沿Z轴的3D旋转 scale(x,y)定义2D缩放 scale(x,y,z)定义3D缩放 rotateX(x)通过设置X轴的值来定义缩放 rotateY(y)通过设置Y轴的值来定义缩放 rotateZ(z)通过设置Z轴的值来定义缩放查看全部
-
幽灵按钮： 1-4 渐变旋转放大（下） CSS3-Transform 定义和用法：transform属性向元素应用2D或3D转换，该属性允许我们对元素进行旋转，缩放，移动和倾斜。查看全部
-
幽灵按钮： 1-3渐变旋转放大（上） display:inline-block; 把<span>元素显示为块元素，然后定义宽高。 [ 查看全文 ]查看全部
-
CSS3实现幽灵特效： 2-1：HTML结构制作 ①CSS3关键技术点： transform | transition | box-sizing |border-radius ②有链接的按钮用a标签，点击进入链接地址，否则可用span ③data属性：鼠标经过的提示文本，用js实现 ④按钮的鼠标经过特效，四个边线长度变化 利用四个span 分别设置不同的class。查看全部
-
幽灵按钮用到的主要技术点： CSS3关键技术点： transform transition box-sizing border-radius查看全部
-
幽灵按钮：在设计网页中的按钮之时，不再设计复杂色彩、样式和纹理，而是外仅以线框示意轮廓，内只用文字示意功能，背景透出，与整个页面/背景合而为一的设计方式。国外的设计师称之为“幽灵按钮”（Ghost Buttons），盛赞这种按钮通透简约，贴合整体风格又不失神韵，别具魅力。查看全部
举报
0/150
提交
取消