少女祈禱中...
Loading...

ccloli

Loading...

2014/07/17 | 33 comments

每天一首小苹果，感觉自己萌！萌！哒！

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

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

这真的不是屁股！QAQ

这真的不是屁股！QAQ

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

这下像黑苹果了吧（划掉

这下像黑苹果了吧（划掉

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

2

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

完整源码见下：

小苹果 1.0
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>每天一首小苹果，感觉自己萌萌哒！</title>
</head>
 
<body>
<audio src="http://sc.111ttt.com/up/mp3/403976/23D19644B90448BD07848D721F77E4C9.mp3" loop autoplay></audio>
<style>
html,body{margin:0;padding:0;overflow:hidden}
.苹果{width:600px;height:600px;left:0;right:0;top:0;bottom:0;margin:auto;position:absolute;transition:all 0.5s ease-in}
.果肉{width:600px;height:500px;bottom:0px;position:absolute}
.果肉 div{background:red;position:absolute;transition:all 0.5s ease-in}
.左边的肉{width:300px;height:500px;border-top-left-radius:200px 250px;
border-top-right-radius:150px 75px;border-bottom-left-radius:300px 350px;border-bottom-right-radius:50px 15px;left:0px}
.右边的肉{width:300px;height:500px;border-top-right-radius:200px 250px;
border-top-left-radius:150px 75px;border-bottom-right-radius:300px 350px;border-bottom-left-radius:50px 15px;right:0px}
.木条{width:20px;height:160px;position:absolute;background:#C90;left:290px;top:0px}
.叶子{width:200px;height:100px;border-top-left-radius:400px 200px;border-bottom-right-radius:400px 200px;background:#6F0;position:absolute;right:90px;top:0px}
</style>
<div class="苹果">
<div class="木条"></div>
<div class="叶子"></div>
<div class="果肉">
<div class="左边的肉"></div>
<div class="右边的肉"></div>
</div>
</div>
<script>
var 音乐=document.getElementsByTagName('audio')[0];
var 苹果=document.getElementsByClassName('苹果')[0];
var 左边的肉=document.getElementsByClassName('左边的肉')[0];
var 右边的肉=document.getElementsByClassName('右边的肉')[0];
var 次数=0;
音乐.onplay=function(){
var 定时器=setInterval(
function(){
if(次数==5){
var 红=parseInt(Math.random()*255);
var 绿=parseInt(Math.random()*255);
var 蓝=parseInt(Math.random()*255);
左边的肉.style.background='rgb('+红+','+绿+','+蓝+')';
右边的肉.style.background='rgb('+红+','+绿+','+蓝+')';
次数=0;
}
else 次数++;
var 大小=Math.random()*0.5+0.5;
var 角度=parseInt(Math.random()*360);
苹果.style.cssText='transform:scale('+大小+') rotate('+角度+'deg);-webkit-transform:scale('+大小+') rotate('+角度+'deg)';
},500
);
音乐.play();
}
</script>
</body>
</html>

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

小苹果 V2
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
var 音乐=document.getElementsByTagName('audio')[0];
var 苹果=document.getElementsByClassName('苹果')[0];
var 左边的肉=document.getElementsByClassName('左边的肉')[0];
var 右边的肉=document.getElementsByClassName('右边的肉')[0];
var 次数=0;
var 定时器;
var 定时器类型=0;
音乐.onplay=function(){
if(定时器类型==0){
定时器=setInterval(
function(){
if(次数==5){
var 红=parseInt(Math.random()*255);
var 绿=parseInt(Math.random()*255);
var 蓝=parseInt(Math.random()*255);
左边的肉.style.background='rgb('+红+','+绿+','+蓝+')';
左边的肉.style.transition='transition:all 1s ease-in';
右边的肉.style.background='rgb('+红+','+绿+','+蓝+')';
右边的肉.style.transition='transition:all 1s ease-in';
次数=0;
}
else 次数++;
var 大小=Math.random()*0.5+0.5;
var 角度=parseInt(Math.random()*360);
苹果.style.cssText='transform:scale('+大小+') rotate('+角度+'deg);-webkit-transform:scale('+大小+') rotate('+角度+'deg);transition:all 1s ease-in';
},1000
);
定时器类型=1;
}
音乐.playbackRate=0.5;
}
音乐.ontimeupdate=function(){
if(音乐.currentTime<=48||(音乐.currentTime>78&&音乐.currentTime<=124.5)){
音乐.playbackRate=0.5;
if(定时器类型==2){
clearInterval(定时器);
定时器=setInterval(
function(){
if(次数==5){
var 红=parseInt(Math.random()*255);
var 绿=parseInt(Math.random()*255);
var 蓝=parseInt(Math.random()*255);
左边的肉.style.background='rgb('+红+','+绿+','+蓝+')';
左边的肉.style.transition='transition:all 1s ease-in';
右边的肉.style.background='rgb('+红+','+绿+','+蓝+')';
右边的肉.style.transition='transition:all 1s ease-in';
次数=0;
}
else 次数++;
var 大小=Math.random()*0.5+0.5;
var 角度=parseInt(Math.random()*360);
苹果.style.cssText='transform:scale('+大小+') rotate('+角度+'deg);-webkit-transform:scale('+大小+') rotate('+角度+'deg);transition:all 1s ease-in';
},1000);
定时器类型=1;
}
}
else if((音乐.currentTime>48&&音乐.currentTime<=78)||音乐.currentTime>=124.5){
音乐.playbackRate=2;
if(定时器类型==1){
clearInterval(定时器);
定时器=setInterval(
function(){
if(次数==5){
var 红=parseInt(Math.random()*255);
var 绿=parseInt(Math.random()*255);
var 蓝=parseInt(Math.random()*255);
左边的肉.style.background='rgb('+红+','+绿+','+蓝+')';
左边的肉.style.transition='transition:all 0.25s ease-in';
右边的肉.style.background='rgb('+红+','+绿+','+蓝+')';
右边的肉.style.transition='transition:all 0.25s ease-in';
次数=0;
}
else 次数++;
var 大小=Math.random()*0.5+0.5;
var 角度=parseInt(Math.random()*360);
苹果.style.cssText='transform:scale('+大小+') rotate('+角度+'deg);-webkit-transform:scale('+大小+') rotate('+角度+'deg);transition:all 0.25s ease-in';
},250);
定时器类型=2;
}
}
}

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

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

Comments

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

    Google Chrome 35.0.1916.153 Google Chrome 35.0.1916.153 Windows 7 x64 Edition Windows 7 x64 Edition

  2. 好像不会动…

    Google Chrome 35.0.1916.153 Google Chrome 35.0.1916.153 Windows 7 Windows 7

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

    Google Chrome 36.0.1985.125 Google Chrome 36.0.1985.125 Mac OS X 10.9.4 Mac OS X 10.9.4

    • @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

        • @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

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

        Google Chrome 36.0.1985.125 Google Chrome 36.0.1985.125 Windows 7 x64 Edition Windows 7 x64 Edition

        • @p0i 蛇果……听说过……

          Google Chrome 36.0.1985.125 Google Chrome 36.0.1985.125 Windows 7 x64 Edition Windows 7 x64 Edition

        • @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

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

            Google Chrome 36.0.1985.125 Google Chrome 36.0.1985.125 Windows 7 x64 Edition Windows 7 x64 Edition

  4. 菊苣就是这么丧病..

    Google Chrome 35.0.1916.153 Google Chrome 35.0.1916.153 Windows 8.1 x64 Edition Windows 8.1 x64 Edition

  6. 病得不輕，需要接受電擊治療（

    Google Chrome 36.0.1985.125 Google Chrome 36.0.1985.125 Windows 8.1 x64 Edition Windows 8.1 x64 Edition

  7. 看见标题以为是翻唱，没兴趣来一首吗(´･ω･`)

    Google Chrome 35.0.1916.141 Google Chrome 35.0.1916.141 Android 4.4.4 Android 4.4.4

  8. 病得不轻，急需放弃治疗

    Google Chrome 36.0.1985.125 Google Chrome 36.0.1985.125 Windows 7 Windows 7

  9. lz没吃药，觉得自己萌萌哒（

    Safari 7.0.5 Safari 7.0.5 Mac OS X 10.9.4 Mac OS X 10.9.4

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

      Google Chrome 36.0.1985.125 Google Chrome 36.0.1985.125 Windows 7 x64 Edition Windows 7 x64 Edition

  10. 美酒了

    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. 好丧病 = =

    Google Chrome 38.0.2114.2 Google Chrome 38.0.2114.2 Windows 8.1 x64 Edition Windows 8.1 x64 Edition

  14. =.=丧心病狂！

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

BoldItalicDeleteLinkBlockquoteImageCode

↑ Back to top