Typecho博客自定义高斯模糊背景小清新音乐播放器界面

Author： Anleeno
发布时间：September 1, 2020
1296views
22 comments
14223 words
Categories：前端 Typecho

应网友要求，现把基本源码给出来。需要自取，注明出处。设计：
<button class="btn m-b-xs btn-success btn-addon" onclick='window.open("https://dribbble.com/shots/4240318-Made-with-InVision-Studio-Music-Player","_blank")'><i class="glyphicon glyphicon-leaf"></i> Charles Patterson</button>

</div>

<div class="tab-container post_tab box-shadow-wrap-lg">
<ul class="nav no-padder b-b" role="tablist">
<li class='nav-item active' role="presentation"><a class='nav-link active' style="" data-toggle="tab" 
aria-controls='tabs-482615e48b2bd3765b117b17da82730c990' role="tab" href='#tabs-482615e48b2bd3765b117b17da82730c990'>HTML结构</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" 
aria-controls='tabs-9a98c9e9c90a56c0caa6340ccedb9a61761' role="tab" href='#tabs-9a98c9e9c90a56c0caa6340ccedb9a61761'>CSS样式</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" 
aria-controls='tabs-2a4b189ab5a2a5cb833ba8eb8023747f492' role="tab" href='#tabs-2a4b189ab5a2a5cb833ba8eb8023747f492'>JS代码</a></li>
</ul>
<div class="tab-content no-border">
<div role="tabpanel" id='tabs-482615e48b2bd3765b117b17da82730c990' class="tab-pane fade active in">
            
<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

</div><div role="tabpanel" id='tabs-9a98c9e9c90a56c0caa6340ccedb9a61761' class="tab-pane fade  ">
            
<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

</div><div role="tabpanel" id='tabs-2a4b189ab5a2a5cb833ba8eb8023747f492' class="tab-pane fade  ">
            
<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

</div>
</div>
</div>
<div class="tip inlineBlock info">

如果需要把这个页面当作模板，在php文件前面加入如下代码即可。

</div>

```
<?php
/**
* 音乐
*
* @package custom
*/
?>
```

效果：

![音乐播放器](https://www.anleenoxu.top/usr/uploads/time/5f17f22562914.jpg)

Last modification：November 14th, 2020 at 03:01 pm

喜欢就加个鸡腿吧！

22 comments

超超
2021年5月7日 14:42

谢谢,效果很好!

Reply
NF
2021年4月23日 21:08

谢谢分享

Reply
summer
2021年4月10日 22:05

nice!nice!

Reply
Feng
2021年3月31日 10:23

向大佬学习

Reply
1. Anleeno
  2021年3月31日 10:25
  
  @Feng
  
  Reply
篱庄
2021年3月31日 02:23

|´・ω・)ノ看看代码，可以和你交流一下吗，加个qq或微信

Reply
1. Anleeno
  2021年3月31日 08:55
  
  @篱庄
  代码挺详细的
  
  Reply
  1. 篱庄
    2021年3月31日 08:59
    
    @Anleeno
    想知道如何使用，建站小白一枚
    
    Reply
    
    Anleeno
    2021年3月31日 09:02
    
    @篱庄
    html结构和js不是已经给出了吗，对应修改的地方也注释了啊
    
    Reply
    
    篱庄
    2021年3月31日 23:13
    
    @Anleeno
    不知道html和js还有css咋用∠( ᐛ 」∠)＿
    
    Reply
低调G
2021年3月16日 01:45

不错不错

Reply
守兰
2021年2月2日 18:19

|´・ω・)ノ

Reply
1. 熊呢
  2021年2月19日 13:42
  
  @守兰
  φ(￣∇￣o)
  
  Reply
漠子荀
2021年1月29日 12:14

来看看感谢

Reply
污梦
2021年1月5日 06:22

看看效果OωO

Reply
haoyuan
2021年1月2日 19:31

φ(￣∇￣o)

Reply
青柠x
2020年12月18日 19:13

Reply
咩咩咩
2020年11月20日 17:07

Reply
Meng
2020年11月19日 14:53

i了i了OωO

Reply
1. Anleeno
  2020年11月19日 15:42
  
  @Meng
  
  Reply
xjh
2020年9月11日 23:01

666

Reply
1. Anleeno
  2020年9月11日 23:03
  
  @xjh
  那可不
  
  Reply