前端特效的似是而非

让用户看起来是这样,而非实现起来一定是这样。
写特效时经常被逻辑思维所牵绊,A元素B元素分的太清了,反而麻烦。
最近在网上找了一些自己喜欢例子。

1.

effect.gif

html结构


.bg的层在.item下面,.item背景色是透明的。

2.

html结构

  

切换类的同时执行一个动画,动画执行完后回到初始状态

1,2 代码




    
    Menu Go!
    


    
    
    
    


g'h

3.

effect1.gif

HTML结构

通过radio的单一状态实现状态切换,label的特性可以控制input的选中,
选中后,reset会覆盖整个区域,使得再次点击可以回到初始状态
左侧的线是wrapper元素的,两个球的层级在比线的高

完整代码




    
    下拉手风琴
    
    
    
    
    


    
a

你可能感兴趣的:(前端特效的似是而非)