V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
nodejs
V2EX  ›  分享创造

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

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

    演示: 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  
       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
    非常漂亮,感谢分享~
    jun0205
        54
    jun0205  
       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
    大赞!
    sobigfish
        67
    sobigfish  
       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   ·   我们的愿景   ·   实用小工具   ·   5304 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 589ms · UTC 07:13 · PVG 15:13 · LAX 00:13 · JFK 03:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.