-
@@--按钮特效===第1章 CSS3实现“幽灵按钮”特效== 动画--transform 动画过渡--tansition 【transition】transfom 的变化过程添加了过渡的过程，过渡时间,才能明显地看出动画效果，不然立刻执行动画，可能就像没变化一样。 属性是一个简写属性，用于设置四个过渡属性。 - transition-property：规定了需要设置过渡效果的CSS属性名称。 - transition-duration：规定了完成过渡效果的时间（秒或毫秒）。 - transition-timing-function：规定了速度效果的速度曲线。 - transition-delay：定义了过渡效果何时开始。查看全部
-
@@--按钮特效===第1章 CSS3实现“幽灵按钮”特效== transform 浏览器兼容问题 CSS3的样式，在需要不同浏览器兼容的时候，需要加上前缀： -ms- -moz- -webkit- -o-查看全部
-
@@--按钮特效===第1章 CSS3实现“幽灵按钮”特效== ==1-3 渐变旋转放大动画（下）== 实现的动画效果： 鼠标划过： 图标360度旋转，在旋转过程放大，在缩小 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章 CSS3实现“幽灵按钮”特效 1-2 html结构制作 ①CSS3关键技术点： transform | transition | box-sizing |border-radius ②有链接的按钮用a标签，点击进入链接地址，否则可用span ③data属性：鼠标经过的提示文本 ④按钮的鼠标经过特效，四个边线长度变化 利用四个span 分别设置不同的class。查看全部
-
任务1：菜单的左上、右上为圆角 任务2：菜单项的宽度可以根据文字内容自适应宽度 任务3：有鼠标经过的反白效果查看全部
-
要完成的效果： 利用css3 实现查看全部
-
【幽灵按钮】 示例：查看全部
-
@--按钮特效---第1章 CSS3实现“幽灵按钮”特效 1-1 课程简介 【幽灵按钮】 ……是不再使用复杂的色彩、样式和纹理。 ……外在以线框示以轮廓，内部以文字示以功能，背景透出，与整个页面或背景合二为一的一种方式。查看全部
-
css3新增圆角属性：border-radius html5+css3实现圆角按钮border-radius属性,html5+css3可用的浏览器为ie9以上以及最新的浏览器火狐，谷歌。 <a>标签本身是行内元素，变成行内块元素需设置属性：display:inline-block; <a>标签制作圆角水晶按钮的关键步骤？ 1、在<a>标签中增加<span>标签 2、给按钮贴图 3、增加交互效果 <input>标签是行内块元素 用<input>标签做按钮的局限性：宽度无法自适应，没有交互效果。查看全部
-
用<a>标签制作水晶按钮查看全部
-
<a>标签制作按钮的优点： 1、没有默认事件 2、可以用css模拟成按钮外观，并做到宽度自适应 3、可以增加上交互效果，且浏览器均兼容查看全部
-
input属于行内块元素，可以设置宽高。查看全部
-
在PC端网页，需要考虑低版本浏览器的情况，所以建议使用js实现动画效果，在移动端，则建议使用transition来实现动态效果，以加强其机动性。如果是需要添加动态内容，则建议使用js来实现查看全部
-
css3——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的一半*/查看全部
-
/*从右到左线条动画实现*/ .button .line-left{width:0px;height:2px;right:-110%;bottom:-2px;/*top:46px;*/} .button:hover .line-left{width:102%;right:-2px;}注意不是width:100%; （虽然能实现效果显示，但是宽度和button宽度不同） 鼠标滑过，高度还可以设置为180px： .button:hover .line-left{width:180px;right:-2px;}查看全部
举报
0/150
提交
取消