分类 CSS 下的文章
-
CSS HACK 支持IE6|7|8|9|10|11
原则上真心不支持大家使用hack，能不用hack就不用hack，但到了实际操作的时候却不得不用到hack。 本文纯实例展示，来个参考DEMO，这样更加直观一点，不写那么多理论的东西了，理论的东西百度下就可以找到很多；我不生产代码，我只是代码的搬运工。 本文只写CSS HACK，html、js的HACK就不写了。是的，就是这么任性。 单独HACK实例 IE6 .a {_background:#aaa;} IE7|8 .b {*background:yellow;} IE7|8|9|10 .c {background:orange\9;} IE8|9|10|11 .d {back......
-
3D样式在“部分真机”的遮挡原因（跟z-index无关），导致点击不上绑定点击事件的元素
最近做的一个专题项目(梦幻西游-阳光魅力榜)，遇到一个3D效果样式导致的问题附上项目地址：http://my.163.com/2016/ygmlb/m/index.html 大概描述下问题： 移动端 3D效果样式（3D翻转效果）导致在“部分真机”上，元素绑定的click事件点击无效，并不是js绑定点击事件方法bug或者不支持的原因，而是点击元素被遮挡了（谷歌浏览器所有模拟机和其他真机测试没问题，在“三星某个型号手机” 和“华为P7手机”绑定点击事件元素被遮挡了。），遮挡问题跟z-index层次高低无关。 3D翻转效果HTML部分代码简化如下： <div cla......
-
CSS3动画的一些小总结
总结的内容有的是一些平时自己遇到过的容易被忽略的，有的是个人觉得简单实用的，特此分享！ 1、过渡 简单的状态变化只用transition就可以方便地实现： transition-property： 规定应用过渡的 CSS 属性的名称； transition-duration：定义过渡效果花费的时间，默认是 0； transition-timing-function ： 规定过渡效果的时间曲线。 transition-delay： 规定过渡效果何时开始，默认是 0 在用的时候遇到一个问题，就是transition在动画退场时会有退场动画，相当于......
-
CSS动态滤镜 filter 在ie下遇到的bug
CSS动态滤镜 filter 在ie下遇到的bug 前言 最初接触滤镜，是为了某些属性去兼容低版本ie而使用的。比如： opacity透明属性，我们会加入filter:alpha(opacity=50);这样的兼容代码 background-rgba半透明属性，我们会加入filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr='#4d000000',endcolorstr='#4d000000'); 另外还有颜色渐变、透明度渐变等等 看起来还是为我们解决不少问题的。 写这篇文章时特意再去查了一下，发现滤镜......
-
css3星球椭圆运动
上一个项目里碰到了要写一个星球运动的动画，其中主要的点就是用css3如何实现椭圆运动。上网找了很久，看到一个“css3太阳系”的文章介绍，但可惜是正圆的，给人的感觉是平面，不适合。实在找不到，就自己想了些思路： 思路一：写个正圆的运动，然后用scale来变形。实践证明是不可行的，这样变形会导致里面的星球发生严重变形。 思路二：把星球同时做X轴和Y轴的位移运动。根据抛物线的原理，这个方案貌似可行。最后实践证明原理是这样，但有些地方需要留意下，否则会变成菱形运动了。 先看一下效果图吧： 失败实践： 先来看下椭圆的坐标示意图： 所以，一开始的想法就是，从原点o出发（分别给x、y轴......
-
css3逐帧动画-飘动旗子
写css3动画的时候，我们经常用到animation来实现，默认情况下，animation是使用连贯性的ease动画。我们熟悉的animation动画有·ease·、·ease-in·、·ease-out·、·linear·、·cubic-bezier·等过段函数，当然还有我们可能不是很熟悉的·steps·跳帧函数。我们在做一些特殊的动画，比如一个飘动的旗子、一个奔跑的小人，这些动画不需要补间，这时候需要的是跳帧·steps·。 逐帧动画实现方法： 1、把动画帧切图合并在一起 2、通过CSS3的animation控制background-position 方法很简单，这里使用到......
