标签 css3 下的文章
-
sticky解决粘性交互在微信的问题
前言 粘性交互 指的是某个模块在页面滚动到指定位置时脱离页面不再顺页面滚动而滚动，而是处于屏幕某一固定位置，变成fixed状态，粘着屏幕某一边缘。这种交互经常用到一些导航，比如《大话西游》手游移动官网，效果请看下面动图示意： 这种交互的主要逻辑是：导航模块默认是普通流体布局，然后监听window的scroll事件，当页面滚动到导航模块的位置时把导航改成position:fixed状态并调整模块的显示位置即可。在大部分浏览器没什么问题，但是微信对scroll这高频事件做了处理，即使你绑定了scroll事件，在滑动屏幕时也要等页面滚动完后才会执行。所以在微信下这种粘性交互是不流畅的：......
-
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 方法很简单，这里使用到......
