-
transition: all; 过度该元素所有属性(可忽略)查看全部
-
要在元素上定义transition(过度属性),在行为上(如hover)去定义动态效果(如transform)查看全部
-
transform 旋转与缩放查看全部
-
transform查看全部
-
所有背景图默认都是巨左居上查看全部
-
三个盒子(div display:block; 独占一行) 摆一排的方法,既可以用float,亦可以display:inline-block; 使其同行查看全部
-
input的局限性查看全部
-
圆角按钮查看全部
-
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
提交
取消