少女祈禱中...
Loading...
图片加载过慢?试试 从源站加载资源 X

ccloli

每天一首小苹果,感觉自己萌!萌!哒!

昨天中午无聊闲逛时,看到了 小苹果 转啊转 这个神奇的东西。觉得无聊于是决定学(shan)习(zhai)一下……

首先第一步是画个苹果……额……苹果怎么画 _(:з」∠)_ 不会 SVG 的我立马想到了 border-radius 这个神奇的东西,而且在测试时发现 borer-radius 可以使用两个值,分别对应 X 和 Y。于是手残党在 Dreamweaver 的即时预览模式下一点点修改数值做成了这个东西……

这真的不是屁股!QAQ

这真的不是屁股!QAQ

好吧,我承认做得确实残了点,稍加调教一下还是不错的……

这下像黑苹果了吧(划掉

这下像黑苹果了吧(划掉

不过由于脑残,这货的代码……

2

接下来考虑旋转和颜色,这两个简单,直接随机生成数值然后用 transform / rgb 颜色就能搞定了。

完整源码见下:

不过这还不算完,想到 A 站的循环 2 倍速和慢摇版,咱决定弄个加强版 =.= 咳咳,其实就是播放速度在 2X 和 0.5X 间切换而已……改一下 js 就行了:

如果感兴趣愿意接受精神污染的话,欢迎洗脑 =w=

小苹果 V1 标准版:http://ccloli.com/temporary/xpg.html
小苹果 V2 加强版:http://ccloli.com/temporary/xpg-2.html

  1. p0i说道:

    你的蘋果沒有聲…不會轉mama
    applesick
    是我的問題嗎? 但f12沒有報錯notscience

    Google Chrome 35.0.1916.153 Google Chrome 35.0.1916.153 Windows 7 x64 Edition Windows 7 x64 Edition
      1. p0i说道:

        @864907600cc
        第一個不能訪問 第二第三能訪問

        Google Chrome 35.0.1916.153 Google Chrome 35.0.1916.153 Windows 7 x64 Edition Windows 7 x64 Edition
        1. 864907600cc说道:

          @p0i 看来是服务器的问题

          Google Chrome 35.0.1916.153 Google Chrome 35.0.1916.153 Windows 7 x64 Edition Windows 7 x64 Edition
        2. 864907600cc说道:

          @p0i 换成微盘的地址了,应该好了

          Google Chrome 35.0.1916.153 Google Chrome 35.0.1916.153 Windows 7 x64 Edition Windows 7 x64 Edition
          1. p0i说道:

            @864907600cc
            真的好了lala

            送你兩個廣告MV


            放心 雖然樣貌相似,但絕對不是比利

            Google Chrome 35.0.1916.153 Google Chrome 35.0.1916.153 Windows 7 x64 Edition Windows 7 x64 Edition
  2. MouYu说道:

    好像不会动…

    Google Chrome 35.0.1916.153 Google Chrome 35.0.1916.153 Windows 7 Windows 7
    1. 864907600cc说道:

      @MouYu 在播放音乐以后才会动

      Google Chrome 35.0.1916.153 Google Chrome 35.0.1916.153 Windows 7 x64 Edition Windows 7 x64 Edition
  3. Jak Wings说道:

    不錯~可以加上平移效果。新博客的靈感~

    Google Chrome 36.0.1985.125 Google Chrome 36.0.1985.125 Mac OS X  10.9.4 Mac OS X 10.9.4
    1. Jak Wings说道:

      @Jak Wings 對了,另一個人畫的是進口蘋果~吃起來感覺比效硬的。

      Google Chrome 36.0.1985.125 Google Chrome 36.0.1985.125 Mac OS X  10.9.4 Mac OS X 10.9.4
      1. 864907600cc说道:

        @Jak Wings 完全看不出啊 OTL

        Google Chrome 35.0.1916.153 Google Chrome 35.0.1916.153 Windows 7 x64 Edition Windows 7 x64 Edition
        1. Jak Wings说道:

          @864907600cc 那個果葉畫得太難看……衹留個梗更好。huhu 之前找了個會分析節奏的:http://jibushengdan.tk/test/

          Google Chrome 36.0.1985.125 Google Chrome 36.0.1985.125 Mac OS X  10.9.4 Mac OS X 10.9.4
      2. p0i说道:

        @Jak Wings
        那種蘋果在香港叫作美國蛇果(好像是=3=) 好難吃的…

        Google Chrome 36.0.1985.125 Google Chrome 36.0.1985.125 Windows 7 x64 Edition Windows 7 x64 Edition
        1. 864907600cc说道:

          @p0i 蛇果……听说过……

          Google Chrome 36.0.1985.125 Google Chrome 36.0.1985.125 Windows 7 x64 Edition Windows 7 x64 Edition
        2. Jak Wings说道:

          @p0i 竟然不叫蘋果 OAO 廣東貌似叫它紅富士。你可能買了劣質品吧,我就覺得皮太硬……

          Google Chrome 36.0.1985.125 Google Chrome 36.0.1985.125 Mac OS X  10.9.4 Mac OS X 10.9.4
          1. p0i说道:

            @Jak Wings
            英文名是Red Delicious 音譯是地厘蛇果 簡稱蛇果
            見到就唔想食

            Google Chrome 36.0.1985.125 Google Chrome 36.0.1985.125 Windows 7 x64 Edition Windows 7 x64 Edition
    2. kawaiiushio说道:

      @Jak Wings
      嘟嘟噜!

      Google Chrome 36.0.1985.125 Google Chrome 36.0.1985.125 GNU/Linux x64 GNU/Linux x64
  4. Pete说道:

    菊苣就是这么丧病..

    Google Chrome 35.0.1916.153 Google Chrome 35.0.1916.153 Windows 8.1 x64 Edition Windows 8.1 x64 Edition
  5. Cyberiad说道:

    慢速小苹果

    Firefox 30.0 Firefox 30.0 Windows 7 Windows 7
  6. Duxing说道:

    病得不輕,需要接受電擊治療(

    Google Chrome 36.0.1985.125 Google Chrome 36.0.1985.125 Windows 8.1 x64 Edition Windows 8.1 x64 Edition
    1. 864907600cc说道:

      @Duxing 说得好像还有救似的……

      Google Chrome 36.0.1985.125 Google Chrome 36.0.1985.125 Windows 7 x64 Edition Windows 7 x64 Edition
  7. shana说道:

    看见标题以为是翻唱,没兴趣来一首吗(´・ω・`)

    Google Chrome 35.0.1916.141 Google Chrome 35.0.1916.141 Android 4.4.4 Android 4.4.4
    1. 864907600cc说道:

      @shana 不要 / \

      Google Chrome 36.0.1985.125 Google Chrome 36.0.1985.125 Windows 7 x64 Edition Windows 7 x64 Edition
  8. 千与琥珀说道:

    病得不轻,急需放弃治疗

    Google Chrome 36.0.1985.125 Google Chrome 36.0.1985.125 Windows 7 Windows 7
    1. 864907600cc说道:

      @千与琥珀 http://nyanpass.com/

      Google Chrome 36.0.1985.125 Google Chrome 36.0.1985.125 Windows 7 x64 Edition Windows 7 x64 Edition
      1. 千与琥珀说道:

        @864907600cc 喵pass~

        Google Chrome 36.0.1985.125 Google Chrome 36.0.1985.125 Windows 7 Windows 7
  9. lovee说道:

    lz没吃药,觉得自己萌萌哒(

    Safari 7.0.5 Safari 7.0.5 Mac OS X  10.9.4 Mac OS X 10.9.4
    1. 864907600cc说道:

      @lovee 说得好像还有救似的……

      Google Chrome 36.0.1985.125 Google Chrome 36.0.1985.125 Windows 7 x64 Edition Windows 7 x64 Edition
  10. DragonForce说道:

    美酒了

    Google Chrome 36.0.1985.67 Google Chrome 36.0.1985.67 Windows 8 x64 Edition Windows 8 x64 Edition
  11. 无名智者说道:

    我只是来求代码高亮的

    Google Chrome 36.0.1985.125 Google Chrome 36.0.1985.125 Windows 8.1 Windows 8.1
  12. JerryLocke说道:

    好丧病 = =

    Google Chrome 38.0.2114.2 Google Chrome 38.0.2114.2 Windows 8.1 x64 Edition Windows 8.1 x64 Edition
  13. 太可怕@@

    Firefox 31.0 Firefox 31.0 GNU/Linux x64 GNU/Linux x64
  14. 梦若弦音说道:

    =.=丧心病狂!

    Google Chrome 37.0.2062.103 Google Chrome 37.0.2062.103 Windows 7 x64 Edition Windows 7 x64 Edition

864907600cc进行回复 取消回复