爱意满满的作品展示区。
nodejs

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

  •  
  •   nodejs · Apr 4, 2014 · 10412 views
    This topic created in 4600 days ago, the information mentioned may be changed or developed.
    没什么技术含量,纯好玩而已,大家也许可以用到下一个项目中 :)

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

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

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

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

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


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

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

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

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

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


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

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

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

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

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

    头大,后来就用1,2,3...命名了,如果你有的,千万告诉我呀 :)
    diseng1991
    diseng1991
    Apr 6, 2014
    71
    很棒 赞一个
    shuson
    shuson
    Apr 8, 2014
    72
    starred
    openroc
    openroc
    Apr 8, 2014
    73
    mark and star++. ;)
    baoimaoo
    baoimaoo
    Apr 9, 2014
    74
    @nodejs支持3图么
    win2next
    win2next
    Apr 9, 2014
    75
    真漂亮,长知识了
    stonestyle
    stonestyle
    Apr 10, 2014
    76
    支持楼主!
    stonestyle
    stonestyle
    Apr 10, 2014
    77
    别再给自己挖坑了!
    cougar
    cougar
    Apr 12, 2014
    78
    awsome
    JoyNeop
    JoyNeop
    Apr 13, 2014
    79
    2GHz Core i7 Ivy Bridge + Iris Pro + 8 GB DDR3 1600 表示 demo 页面卡顿严重……
    lzt163
    lzt163
    Apr 15, 2014
    80
    好厉害 不过 class的下划线和横杠能统一一下么= = 逼死-+强迫症
    hongdengdao
    hongdengdao
    Apr 15, 2014
    81
    强人!!
    flyingnn
    flyingnn
    Apr 16, 2014
    82
    好惊艳,star.
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1857 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 172ms · UTC 09:17 · PVG 17:17 · LAX 01:17 · JFK 04:17
    ♥ Do have faith in what you're doing.