用 CSS 写了几个 hover 特效,求拍砖 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
nodejs
V2EX    分享创造

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

  •  
  •   nodejs 2014-04-04 11:31:45 +08:00/span> 9260 次点击
    这是一个创建于 4213 天前的主题,其中的信息可能已经有所发展或是发生改变。
    没什么技术含量,纯好玩而已,大家也许可以用到下一个项目中 :)

    演示: http://gudh.github.io/ihover/dist/index.html

    Github Repo在这里: https://github.com/gudh/ihover
    82 条回复    1970-01-01 08:00:00 +08:00
    dong3580
        1
    dong3580  
       2014-04-04 11:37:48 +08:00
    @nodejs
    IE9都不支持,没戏。
    客户要求都是全部支持,起码IE7+,变态的都是要求IE6的。
    gaicitadie
        2
    gaicitadie  
       2014-04-04 11:38:20 +08:00
    很赞,HTML5+CSS3,人类的希望
    andyliu
        3
    andyliu  
       2014-04-04 11:41:51 +08:00
    不错 喜欢Circle
    levon
        4
    levon  
       2014-04-04 11:48:28 +08:00
    cool
    ggiiss
        5
    ggiiss  
       2014-04-04 11:58:32 +08:00
    不错
    nodejs
        6
    nodejs  
    OP
       2014-04-04 11:59:39 +08:00
    @dong3580 IE9是可以的 (不可以的我标注了),就是没有动画而已

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

    不过还好,这边客户都只要IE9及以上就行,面试的时候一听到IE6~8,我回头就走 ;) 开玩笑的
    kutata
        7
    kutata  
       2014-04-04 12:01:56 +08:00
    Nice, 好多效果呀。
    learnshare
        8
    learnshare  
       2014-04-04 12:06:52 +08:00
    好看就行,不支持垃圾浏览器是趋势,IE 9 跑不动很正常
    kyze8439690
        9
    kyze8439690  
       2014-04-04 12:10:36 +08:00
    不知为何想起了moto 360(android wear)
    gotounix
        10
    gotounix  
       2014-04-04 12:11:44 +08:00
    Firefox 看到第13个,崩溃了,直接退出弹错了……
    loading
        11
    loading  
       2014-04-04 12:18:37 +08:00 via iPhone
    这个可以到codepen搜hover,很多。

    感谢lz分享。 css3很好玩
    151515
        12
    151515  
       2014-04-04 12:29:47 +08:00
    牛逼哇
    vinsa
        13
    vinsa  
       2014-04-04 12:34:47 +08:00
    cool!
    airbob
        14
    airbob  
       2014-04-04 12:34:48 +08:00
    很好,赞!
    dong3580
        15
    dong3580  
       2014-04-04 12:43:13 +08:00
    @learnshare
    谁想为了兼容写一堆东西呀,诶,没办法啊,看到人家要兼容IE6,IE7之类的就恶心
    tonghuashuai
        16
    tonghuashuai  
       2014-04-04 12:44:48 +08:00
    @dong3580
    我觉得还在用 IE6 的人根本不用这么特效
    isaced
        17
    isaced  
       2014-04-04 12:49:22 +08:00
    赞!
    airyland
        18
    airyland  
       2014-04-04 12:56:02 +08:00
    cool
    sconfield
        19
    sconfield  
       2014-04-04 12:56:02 +08:00
    碉堡了,瞻仰瞻仰。。。。
    airyland
        20
    airyland  
       2014-04-04 12:56:16 +08:00
    大赞
    housne
        21
    housne  
       2014-04-04 12:57:02 +08:00
    赞!
    housne
        22
    housne  
       2014-04-04 12:57:33 +08:00
    炒鸡赞
    yangg
        23
    yangg  
       2014-04-04 12:58:24 +08:00
    不错,赞
    iinterest
        24
    iinterest  
       2014-04-04 13:05:52 +08:00
    效果不错,赞一个,不过 :hover 有很大的局限性,比如在 HTML5 支持最好的的移动平台上无法使用。可以考虑独立成一个动画库
    sneezry
        25
    sneezry  
       2014-04-04 13:07:53 +08:00
    炫爆了,已收藏,感谢已送出。
    paloalto
        26
    paloalto  
       2014-04-04 13:14:22 +08:00   4
    非常棒!感谢分享。以后可以用到实际项目中。


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

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

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

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

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


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

    “客户是天使,用户是上帝。”
    endintro
        27
    endintro  
       2014-04-04 13:14:33 +08:00
    非常赞
    teddy1004
        28
    teddy1004  
       2014-04-04 13:16:36 +08:00
    cool 啊!收藏送赞!
    hustlzp
        29
    hustlzp  
       2014-04-04 13:20:15 +08:00
    吊炸天!已收藏。
    zhanggggfd
        30
    zhanggggfd  
       2014-04-04 13:25:33 +08:00
    我是来凑热闹的,这几个效果都略叼
    Artotria
        31
    Artotria  
       2014-04-04 13:27:40 +08:00
    楼主做的很不错啊,可以发到http://codepen.io/上去吖~
    sd4399340
        32
    sd4399340  
       2014-04-04 13:35:02 +08:00
    已star
    Actrace
        33
    Actrace  
       2014-04-04 13:36:05 +08:00
    楼主果然有闲情雅致~赞一个~
    linuxer
        34
    linuxer  
       2014-04-04 13:39:42 +08:00
    大赞!
    yyy
        35
    yyy  
       2014-04-04 13:43:48 +08:00
    赞一下,但是我在FF下有些相同特效的不同单元会有点感到不顺畅,大概是习惯性地开了20+个标签的关系
    PotatoBrother
        36
    PotatoBrother  
       2014-04-04 13:51:05 +08:00
    效果很赞,收藏了!
    zhujinliang
        37
    zhujinliang  
       2014-04-04 13:52:30 +08:00
    非常赞!
    paicha
        38
    paicha  
    PRO
       2014-04-04 14:02:50 +08:00
    好厉害~
    oloopy
        39
    oloopy  
       2014-04-04 14:05:10 +08:00
    非常棒,已Star,学习一下 :)
    cyr1l
        40
    cyr1l  
       2014-04-04 14:07:40 +08:00
    @paloalto 专门登录来赞你。
    Geeker
        41
    Geeker  
       2014-04-04 14:22:09 +08:00
    太赞了,已Star
    nealv2ex
        42
    nealv2ex  
       2014-04-04 14:39:41 +08:00
    cool 已经star
    reorx
        43
    reorx  
       2014-04-04 14:45:09 +08:00
    赞, star +1 ~
    devon
        44
    devon  
       2014-04-04 14:48:59 +08:00
    效果很赞,只是有两三个性能不太好。
    kurtis
        45
    kurtis  
       2014-04-04 15:00:38 +08:00
    要是我需要前端,应该可以重点考虑你了
    kavinyao
        46
    kavinyao  
       2014-04-04 15:00:53 +08:00
    赞一下。

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

    另外貌似很吃CPU。
    P233
        47
    P233  
       2014-04-04 15:09:54 +08:00
    写成 LESS 或者 Sass 库,引用的时候用参数定制怎么样?
    P233
        48
    P233  
       2014-04-04 15:18:38 +08:00   1
    @paloalto 翻了好久终于找到了以前看过的一篇文章 http://www.creativebloq.com/design/older-browsers-dont-need-hacks-7126219
    gangsta
        49
    gangsta  
       2014-04-04 16:00:01 +08:00
    帅爆~已Star~

    晚上加到自己的blog里面去 感谢~
    zipspeed
        50
    zipspeed  
       2014-04-04 16:23:09 +08:00
    赞,不错!
    clijiac
        51
    clijiac  
       2014-04-04 16:29:10 +08:00
    NICE啊..
    jsonline
        52
    jsonline  
       2014-04-04 17:15:07 +08:00
    Who cares IE
    ceclinux
        53
    ceclinux  
       2014-04-04 18:10:14 +08:00
    非常漂亮,感谢分享~
    xAI
        54
    xAI      2014-04-04 19:15:39 +08:00
    效果非常好。
    pandada8
        55
    pandada8  
       2014-04-04 19:25:18 +08:00
    zhangxiao
        56
    zhangxiao  
       2014-04-04 19:29:08 +08:00
    非常好,已starred
    duteng612
        57
    duteng612  
       2014-04-04 20:33:13 +08:00
    收藏
    chshouyu
        58
    chshouyu  
       2014-04-04 22:12:26 +08:00
    32个赞!
    sujin190
        59
    sujin190  
       2014-04-04 22:26:39 +08:00
    赞,这种效果谁还说什么ie8、ie9的就应该一巴掌拍死他
    akn8
        60
    akn8  
       2014-04-04 23:49:55 +08:00
    cool
    ifishman
        61
    ifishman  
       2014-04-05 00:45:01 +08:00
    点赞狂人转战V2开始继续点赞
    forestinthesea
        62
    forestinthesea  
       2014-04-05 04:52:50 +08:00
    非常漂亮!没想到现在的hover效果可以做得这么赞!我还停留在改变字体颜色的时代呢。。。。
    jimbray
        63
    jimbray  
       2014-04-05 09:50:33 +08:00
    好酷啊!让我这种视觉系的人爽到了。狂点赞!!
    gouflv
        64
    gouflv  
       2014-04-05 11:22:36 +08:00
    已经完全够用了, @dong3580 整天把ie挂嘴边有啥意思?
    spoonwep
        65
    spoonwep  
       2014-04-06 02:25:48 +08:00
    有人像我一样每个都hover一遍嘛
    效果好赞,已star
    soli
        66
    soli  
       2014-04-06 09:51:37 +08:00
    大赞!
    run2
        67
    run2  
       2014-04-06 12:55:30 +08:00   1
    赞,吹毛求疵的问每个效果能编个简单的名字么,1-20这么着来不太友好啊
    whwei
        68
    whwei  
       2014-04-06 17:43:38 +08:00
    已star~
    不过感觉用translate3d更好。
    nodejs
        69
    nodejs  
    OP
       2014-04-06 19:37:26 +08:00
    非常感谢大家的star,项目上Github的Trending列表了,虽然没什么技术含量,但上trending还是很开心呀
    nodejs
        70
    nodejs  
    OP
       2014-04-06 19:39:30 +08:00
    @sobigfish 我其实想得和你一样,我开始想了好多取名的规则,最后崩溃了 :(

    头大,后来就用1,2,3...命名了,如果你有的,千万告诉我呀 :)
    diseng1991
        71
    diseng1991  
       2014-04-06 23:04:54 +08:00
    很棒 赞一个
    shuson
        72
    shuson  
       2014-04-08 11:03:18 +08:00
    starred
    openroc
        73
    openroc  
       2014-04-08 11:14:47 +08:00
    mark and star++. ;)
    baoimaoo
        74
    baoimaoo  
       2014-04-09 13:48:26 +08:00
    @nodejs支持3图么
    win2next
        75
    win2next  
       2014-04-09 16:33:51 +08:00
    真漂亮,长知识了
    stonestyle
        76
    stonestyle  
       2014-04-10 18:08:50 +08:00
    支持楼主!
    stonestyle
        77
    stonestyle  
       2014-04-10 18:09:02 +08:00
    别再给自己挖坑了!
    cougar
        78
    cougar  
       2014-04-12 21:13:45 +08:00
    awsome
    JoyNeop
        79
    JoyNeop  
       2014-04-13 04:09:13 +08:00
    2GHz Core i7 Ivy Bridge + Iris Pro + 8 GB DDR3 1600 表示 demo 页面卡顿严重……
    lzt163
        80
    lzt163  
       2014-04-15 17:04:03 +08:00
    好厉害 不过 class的下划线和横杠能统一一下么= = 逼死-+强迫症
    hongdengdao
        81
    hongdengdao  
       2014-04-15 17:06:09 +08:00
    强人!!
    flyingnn
        82
    flyingnn  
       2014-04-16 15:32:35 +08:00
    好惊艳,star.
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     5770 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 44ms UTC 06:13 PVG 14:13 LAX 23:13 JFK 02:13
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86