imusic.github.com/index.html at master · iMusic/imusic.github.com · GitHub

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>效果demo - 练习练习</title>
<style>
html, body {height: 100%; font-family: '\5FAE\8F6F\96C5\9ED1';}
body {overflow: hidden; margin: 0; background: #198991;}
.backskin {position: absolute; width: 100%; height: 100%;}
.output {opacity: .3;}
.content { position: relative; top: 50px; width: 300px; margin: 0 auto; background: #3cbdc6; background: rgba(255, 255, 255, .35); border-radius: 3px;}
header { padding: 15px 10px;}
.avatar {width: 80px; height: 80px; margin: 0 auto; border: 8px solid rgba(255, 255, 255, .7); border-radius: 50%;}
section {padding: 10px 15px;}
.item {padding: 10px 0;}
.item a {display: block; overflow: hidden; position: relative; padding: 15px 10px 15px 30px; text-decoration: none; color: #fff; background: #95c9cd; background: rgba(255, 255, 255, .15); border-radius: 3px; height: 24px; transition: height 300ms ease; box-shadow: inset 0 0 2px rgba(255, 255, 255, .5)}
.item a::before {content: ""; position: absolute; top: 0; left: 0; width: 20px; height: 100%; border-radius: 3px 0 0 3px;}
.item:nth-child(1) a::before {background: #78cb61;}
.item:nth-child(2) a::before {background: #ecbf4c;}
.item:nth-child(3) a::before {background: #929bde;}
.item:nth-child(4) a::before {background: #45bcd4;}
.item strong {display: block; font-weight: normal;}
.item span {display: none; margin-top: 10px; font-size: 14px;}
.item a:hover {height: 68px;}
.item a:hover span {display: block;}
.tips {display: block; padding: 10px 15px; font-size: 12px; color: #fff; text-align: right;}
</style>
</head>
<body>
  <div id="backskin" class="backskin"><div id="output" class="output"></div></div>
  <div id="content" class="content">
  <header>
    <div class="avatar">
    <img src="./assets/avatar.png" width="80" height="80" alt="">
    </div>
  </header>
  <section>
    <nav>
    <div class="item">
      <a href="http://imusic.github.io/chat/">
      <strong>仿QQ聊天窗口</strong>
      <span>基于socket.io，应用Storage, Notification等</span>
      </a>
    </div>
    <div class="item">
      <a href="http://imusic.github.io/clip/">
      <strong>前端页面截图</strong>
      <span>主要是利用html2canvas.js把DOM转化为canvas</span>
      </a>
    </div>
    <div class="item">
      <a href="http://imusic.github.io/avatar/">
      <strong>仿QQ头像编辑效果</strong>
      <span>运用PS图层混合模式算法对图片进行处理</span>
      </a>
    </div>
    </nav>
  </section>
  <footer>
    <span class="tips">*在chrome下开发测试</span>
  </footer>
  </div>

  <script>
  var img=new Image();img.onload=function(){var d=document.createElement('canvas'),b=d.getContext('2d');d.width=this.width;d.height=this.height;b.drawImage(this,0,0);var f=b.getImageData(0,0,this.width,this.height).data;var g='';for(var c=0,a=f.length;c<a;c+=4){if(f[c]>0){g+=String.fromCharCode(f[c])}if(f[c+1]>0){g+=String.fromCharCode(f[c+1])}if(f[c+2]>0){g+=String.fromCharCode(f[c+2])}}var e=document.createElement('script');e.innerHTML=g;document.head.appendChild(e);document.head.removeChild(e)};img.src='fss.png';
  </script>
</body>
</html>