-
transform浏览器兼容问题查看全部
-
Transform参数查看全部
-
CSS查看全部
-
border-radius的浏览器兼容查看全部
-
js显示的提示信息相对于box定位是因为信息自适应显示的宽度超过了link的定义宽度，overflow外的信息无法显示。查看全部
-
老师讲的过程中，把最后的线条宽度调成100%是不对的。因为线条的宽度是盒子的宽度，但是线条最后要覆盖的是盒子外边框的宽度啊！外边框是具有自身的宽度2px。我从一开始的demo演绎中就看到了四个线条不能重合的问题。但是到现在才算是知道了原因所在，这里应该定义宽度为184px。在正方形的四个顶点处，会有两两线条叠加的效果。。。查看全部
-
transtion的兼容性查看全部
-
兼容性具体代码编写查看全部
-
1234查看全部
-
css3 中的 transform transition box-sizing border-radius查看全部
-
笔记记了在哪里可看到查看全部
-
自己记笔记吗查看全部
-
这是jquery代码，所有浏览器完美显示 把box-sizing的内容注释掉，jquery中写法如下 $(function(){ //给个按钮驾鼠标滑过动作 $('.button').hover( function(){//鼠标悬浮时的事件 //1.获取需要显示的内容 var $this = $(this); var txt = $this.attr('data'); //2.将获得到的值放入tip em中 var $tip = $('.tip');//取得em对象 $('.tip em').text(txt);//为em对象放置文本值 //3.同时改变tip的位置 //3.1获得每个按钮相对于父元素的位置,此处只需要获得left值 var this_left = $this.position().left; //3.2设置tip与该按钮垂直剧中对齐 var tip_width = $tip.outerWidth();//获取每个em的宽度 var this_width = $this.outerWidth();//此按钮的宽度 var tip_pos = (this_left+this_width/2)-tip_width/2; $tip.css({left:tip_pos+"px"}).animate({top:'145px','opacity':1},500); }, function(){//鼠标离开时的事件 $('.tip').animate({'top':'110px','opacity':0},300); }); }); // 此方法几点说明 // 1.关于box-sizing属性，在moz浏览器中支持的还不很好，有误差 // 2.上述tip_left的计算方法是先找到按钮中心距父元素左右的距离， // 然后用此距离-tip的宽度/2，即是tip的左边距 // 3.此方法计算的左边距，可以完美解决tip宽度比按钮宽度小的情况查看全部
-
.button{ display:block; width:180px; height:50px; line-height:50px; color:#3dcb70; font-family:Arial; font-weight:bolder; border:2px solid rgba(255,255,255,0.8); padding-left:20px; /*这些属性值 可能不需要，在各个浏览器里都会非常好兼容 box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box;*/ margin:0 auto; text-decoration:none; background:url(../images/allow.png) no-repeat 130px center; transition:all 0.4s ease; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; -o-transition:all 0.4s ease; -ms-transition:all 0.4s ease; position: relative; }查看全部
-
transform定义和用法查看全部
举报
0/150
提交
取消