用 CSS 写了几个 hover 特效，求拍砖

拍砖

hover

repo

82 条回复 • 1970-01-01 08:00:00 +08:00

1

dong3580

2014-04-04 11:37:48 +08:00

@nodejs
IE9都不支持，没戏。
客户要求都是全部支持，起码IE7+，变态的都是要求IE6的。

2

gaicitadie

2014-04-04 11:38:20 +08:00

很赞，HTML5+CSS3，人类的希望

3

andyliu

2014-04-04 11:41:51 +08:00

不错喜欢Circle

4

levon

2014-04-04 11:48:28 +08:00

cool

5

ggiiss

2014-04-04 11:58:32 +08:00

不错

6

nodejs

OP

2014-04-04 11:59:39 +08:00

@dong3580 IE9是可以的 (不可以的我标注了)，就是没有动画而已

IE6~8，不支持CSS3，所以肯定不行了 :)

不过还好，这边客户都只要IE9及以上就行，面试的时候一听到IE6~8，我回头就走 ;) 开玩笑的

7

kutata

2014-04-04 12:01:56 +08:00

Nice, 好多效果呀。

8

learnshare

2014-04-04 12:06:52 +08:00

好看就行，不支持垃圾浏览器是趋势，IE 9 跑不动很正常

9

kyze8439690

2014-04-04 12:10:36 +08:00

不知为何想起了moto 360（android wear）

10

gotounix

2014-04-04 12:11:44 +08:00

Firefox 看到第13个，崩溃了，直接退出弹错了……

11

loading

2014-04-04 12:18:37 +08:00 via iPhone

这个可以到codepen搜hover，很多。

感谢lz分享。 css3很好玩

12

151515

2014-04-04 12:29:47 +08:00

牛逼哇

13

vinsa

2014-04-04 12:34:47 +08:00

cool!

14

airbob

2014-04-04 12:34:48 +08:00

很好,赞!

15

dong3580

2014-04-04 12:43:13 +08:00

@learnshare
谁想为了兼容写一堆东西呀，诶，没办法啊，看到人家要兼容IE6,IE7之类的就恶心

16

tonghuashuai

2014-04-04 12:44:48 +08:00

@dong3580
我觉得还在用 IE6 的人根本不用这么特效

17

isaced

2014-04-04 12:49:22 +08:00

赞！

18

airyland

2014-04-04 12:56:02 +08:00

cool

19

sconfield

2014-04-04 12:56:02 +08:00

碉堡了，瞻仰瞻仰。。。。

20

airyland

2014-04-04 12:56:16 +08:00

大赞

21

housne

2014-04-04 12:57:02 +08:00

赞！

22

housne

2014-04-04 12:57:33 +08:00

炒鸡赞

23

yangg

2014-04-04 12:58:24 +08:00

不错，赞

24

iinterest

2014-04-04 13:05:52 +08:00

效果不错，赞一个，不过 :hover 有很大的局限性，比如在 HTML5 支持最好的的移动平台上无法使用。可以考虑独立成一个动画库

25

sneezry

2014-04-04 13:07:53 +08:00

炫爆了，已收藏，感谢已送出。

26

paloalto

2014-04-04 13:14:22 +08:00

4

非常棒！感谢分享。以后可以用到实际项目中。

有人说要兼容IE 6/7的，一直想说点这方面的想法，正好现在有十几分钟的时间，那就说一下好了。不是为了针对谁，不是为了挑起矛盾，只是自说自话，觉得我说的不对，请大力地block我好了。

大家也都知道，为了兼容这些低版本浏览器，我们在开发中需要付出额外的时间和精力，大多数时候是身(shang)不(ji)由(yao)己(qiu)。但是大家有没有意识到这是在自己挖坑自己跳？这次你花了1/3的时间让你的项目兼容了低版本浏览器，IE6用户一看，“哎呦，不错！”，那接下来用户就继续用低版本浏览器 —— 这么下去是一个恶性循环，用户继续用IE6，作为开发者的你要继续为这些IE6花费额外的时间。

最终为落后买单的人是谁？还不是我们这些开发者吗？

如果全世界的开发者联合起来一致反对为低端浏览器提供兼容，结果会怎样？

所以，要么闭上嘴，老老实实给低版本浏览器用户服务；要么对他们潇洒的挥挥手：爷不陪你玩儿了！拜拜了您內，慢走不送！

另外，再说下“客户”和“用户”。针对那些做“客户”项目的，我希望大家在做项目的时候，别被“客户”的需求牵着鼻子走。我们做的东西，是要给最终的“用户”用的。帮“客户”服务好他们的用户，“客户”有钱赚，我们才有钱赚。不过现实中，很多人眼里只看到了“客户”，却没有看到真正使用他们产品的“用户”。

“客户是天使，用户是上帝。”

27

endintro

2014-04-04 13:14:33 +08:00

非常赞

28

teddy1004

2014-04-04 13:16:36 +08:00

cool 啊！收藏送赞！

29

hustlzp

2014-04-04 13:20:15 +08:00

吊炸天！已收藏。

30

zhanggggfd

2014-04-04 13:25:33 +08:00

我是来凑热闹的，这几个效果都略叼

31

Artotria

2014-04-04 13:27:40 +08:00

楼主做的很不错啊，可以发到http://codepen.io/上去吖~

32

sd4399340

2014-04-04 13:35:02 +08:00

已star

33

Actrace

2014-04-04 13:36:05 +08:00

楼主果然有闲情雅致~赞一个~

34

linuxer

2014-04-04 13:39:42 +08:00

大赞！

35

yyy

2014-04-04 13:43:48 +08:00

赞一下，但是我在FF下有些相同特效的不同单元会有点感到不顺畅，大概是习惯性地开了20+个标签的关系

36

PotatoBrother

2014-04-04 13:51:05 +08:00

效果很赞，收藏了！

37

zhujinliang

2014-04-04 13:52:30 +08:00

非常赞！

38

paicha

2014-04-04 14:02:50 +08:00

好厉害~

39

oloopy

2014-04-04 14:05:10 +08:00

非常棒，已Star，学习一下 :)

40

cyr1l

2014-04-04 14:07:40 +08:00

@paloalto 专门登录来赞你。

41

Geeker

2014-04-04 14:22:09 +08:00

太赞了，已Star

42

nealv2ex

2014-04-04 14:39:41 +08:00

cool 已经star

43

reorx

2014-04-04 14:45:09 +08:00

赞, star +1 ~

44

devon

2014-04-04 14:48:59 +08:00

效果很赞，只是有两三个性能不太好。

45

kurtis

2014-04-04 15:00:38 +08:00

要是我需要前端，应该可以重点考虑你了

46

kavinyao

2014-04-04 15:00:53 +08:00

赞一下。

有个小bug是，如果鼠标停留在动画路径上就会一直卡在那儿。

另外貌似很吃CPU。

47

P233

2014-04-04 15:09:54 +08:00

写成 LESS 或者 Sass 库，引用的时候用参数定制怎么样?

48

P233

2014-04-04 15:18:38 +08:00

1

@paloalto 翻了好久终于找到了以前看过的一篇文章 http://www.creativebloq.com/design/older-browsers-dont-need-hacks-7126219

49

gangsta

2014-04-04 16:00:01 +08:00

帅爆~已Star~

晚上加到自己的blog里面去感谢~

50

zipspeed

2014-04-04 16:23:09 +08:00

赞，不错！

51

clijiac

2014-04-04 16:29:10 +08:00

NICE啊..

52

jsonline

2014-04-04 17:15:07 +08:00

Who cares IE

53

ceclinux

2014-04-04 18:10:14 +08:00

非常漂亮，感谢分享～

54

jun0205

2014-04-04 19:15:39 +08:00

效果非常好。

55

pandada8

2014-04-04 19:25:18 +08:00

想到了这个
http://h5bp.github.io/Effeckt.css/

56

zhangxiao

2014-04-04 19:29:08 +08:00

非常好，已starred

57

duteng612

2014-04-04 20:33:13 +08:00

58

chshouyu

2014-04-04 22:12:26 +08:00

32个赞！

59

sujin190

2014-04-04 22:26:39 +08:00

赞，这种效果谁还说什么ie8、ie9的就应该一巴掌拍死他

60

akn8

2014-04-04 23:49:55 +08:00

cool

61

ifishman

2014-04-05 00:45:01 +08:00

点赞狂人转战V2开始继续点赞

62

forestinthesea

2014-04-05 04:52:50 +08:00

非常漂亮！没想到现在的hover效果可以做得这么赞！我还停留在改变字体颜色的时代呢。。。。

63

jimbray

2014-04-05 09:50:33 +08:00

好酷啊！让我这种视觉系的人爽到了。狂点赞！！

64

gouflv

2014-04-05 11:22:36 +08:00

已经完全够用了, @dong3580 整天把ie挂嘴边有啥意思?

65

spoonwep

2014-04-06 02:25:48 +08:00

有人像我一样每个都hover一遍嘛
效果好赞，已star

66

soli

2014-04-06 09:51:37 +08:00

大赞！

67

sobigfish

2014-04-06 12:55:30 +08:00

1

赞，吹毛求疵的问每个效果能编个简单的名字么，1-20这么着来不太友好啊

68

whwei

2014-04-06 17:43:38 +08:00

已star~
不过感觉用translate3d更好。

69

nodejs

OP

2014-04-06 19:37:26 +08:00

非常感谢大家的star，项目上Github的Trending列表了，虽然没什么技术含量，但上trending还是很开心呀

70

nodejs

OP

2014-04-06 19:39:30 +08:00

@sobigfish 我其实想得和你一样，我开始想了好多取名的规则，最后崩溃了 :(

头大，后来就用1,2,3...命名了，如果你有的，千万告诉我呀 :)

71

diseng1991

2014-04-06 23:04:54 +08:00

很棒赞一个

72

shuson

2014-04-08 11:03:18 +08:00

starred

73

openroc

2014-04-08 11:14:47 +08:00

mark and star++. ;)

74

baoimaoo

2014-04-09 13:48:26 +08:00

@nodejs支持3图么

75

win2next

2014-04-09 16:33:51 +08:00

真漂亮，长知识了

76

stonestyle

2014-04-10 18:08:50 +08:00

支持楼主！

77

stonestyle

2014-04-10 18:09:02 +08:00

别再给自己挖坑了！

78

cougar

2014-04-12 21:13:45 +08:00

awsome

79

JoyNeop

2014-04-13 04:09:13 +08:00

2GHz Core i7 Ivy Bridge + Iris Pro + 8 GB DDR3 1600 表示 demo 页面卡顿严重……

80

lzt163

2014-04-15 17:04:03 +08:00

好厉害不过 class的下划线和横杠能统一一下么= = 逼死-+强迫症

81

hongdengdao

2014-04-15 17:06:09 +08:00

强人！！

82

flyingnn

2014-04-16 15:32:35 +08:00

好惊艳,star.