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

Author： Anleeno
发布时间：September 1, 2020
2288views
31 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 scroll-hide" role="tablist">
<li class='nav-item active' role="presentation"><a class='nav-link active' style="" data-toggle="tab" 
aria-controls='tabs-87fcb787d963e74d2fbbddb42814391d680' role="tab" data-target='#tabs-87fcb787d963e74d2fbbddb42814391d680'>HTML结构</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" 
aria-controls='tabs-bf309a8b4da78cb065794dac8b258b70611' role="tab" data-target='#tabs-bf309a8b4da78cb065794dac8b258b70611'>CSS样式</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" 
aria-controls='tabs-ab3264d8d69066b5a55d9434da3e51b0302' role="tab" data-target='#tabs-ab3264d8d69066b5a55d9434da3e51b0302'>JS代码</a></li>
</ul>
<div class="tab-content no-border">
<div role="tabpanel" id='tabs-87fcb787d963e74d2fbbddb42814391d680' class="tab-pane fade active in">
            
<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

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

</div><div role="tabpanel" id='tabs-ab3264d8d69066b5a55d9434da3e51b0302' 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

喜欢就加个鸡腿吧！

31 comments

dd
2021年9月18日 17:08

感谢分享

Reply
邹不二
2021年9月11日 20:06

黑色风格真帅

Reply
jane
2021年8月4日 11:48

您好，求审核通过一下୧(๑•̀⌄•́๑)૭

Reply
又加
2021年7月27日 12:48

不错，很漂亮

Reply
知名的大黄
2021年7月26日 22:40

爱了爱了

Reply
宇情
2021年7月8日 11:31

效果很好

Reply
宇情
2021年7月8日 11:30

|´・ω・)ノ

Reply
somnus
2021年5月31日 15:54

博主审核通过一下୧(๑•̀⌄•́๑)૭

Reply
1. Anleeno
  2021年5月31日 15:59
  
  @somnus
  
  该评论仅登录用户及评论双方可见
  
  Reply
超超
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