Skip to content

Commit

Permalink
#6 添加模糊模糊背景
Browse files Browse the repository at this point in the history
  • Loading branch information
@xurui3762791
xurui3762791 committed Nov 24, 2015
1 parent 64e0224 commit acf6ecf
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 11 deletions.
43 changes: 38 additions & 5 deletions styl/background.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@ $menu_width = 100px
input#tm
display none
section
position relative
position absolute
top 0
transition all 0.6s
z-index 999
section
Expand Down Expand Up @@ -96,6 +97,15 @@ $menu_width = 100px
z-index 0
.hidden
opacity 0
.fuzzyBg
position absolute
background-image url($background_img)
opacity 0
width 100%
height 100%
z-index 9
filter: blur(8px);

input#tm:checked ~ section
transform translateX(($menu_width))
input#tm:checked ~ .sidenav
Expand All @@ -120,16 +130,20 @@ $menu_width = 100px
width 100%
height 100%
padding-left $menu_width
background-color #fff
// background-color #fff

z-index 998
opacity 1
overflow auto
.hidden
opacity 1
transition all 0.6s
input#tm:checked ~ .fuzzyBg
opacity 0.9
width 100%
height 100%



// .popup div,& input
// display none
// // 设置界面
Expand All @@ -139,6 +153,9 @@ $menu_width = 100px
// display block
// .popup input#about:checked ~ div.aboutCon
// display block
.floatingLayer
position absolute


.iconList
padding 20px
Expand All @@ -148,7 +165,7 @@ $menu_width = 100px
margin 15px
text-align center
width 64px
float left
display inline-block
div.close
display block
height 18px
Expand Down Expand Up @@ -247,13 +264,29 @@ $menu_width = 100px
h2
font-size 18px
font-weight bold
color #3498db
color #2ECC71

text-shadow 0 1px 2px #000
p
padding 8px 0
color #34495e
font-size 14px
line-height 24px
text-shadow 0 1px 2px #000
color #fff
a
color #fff
text-shadow 0 1px 1px #000


// 添加应用
.addItemCon
padding 40px
h2
font-size 18px
font-weight bold
color #fff
text-shadow 0 1px 1px #000



Expand Down
35 changes: 29 additions & 6 deletions templates/background.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,34 +11,57 @@
</ul>
</div>

<div class="fuzzyBg">1111</div>
<div class="popup">
<!-- <input type="checkbox" id="setting" /> -->
<!-- <input type="radio" name="setting" checked="checked" id="setting" /> -->
<div class="settingCon hidden">设置
<div>2222</div>
<div class="settingCon hidden zoomInDown animated">
<div>设置</div>

</div>
<!-- <input type="checkbox" id="addItem" /> -->
<!-- <input type="radio" name="setting" id="addItem" /> -->
<div class="addItemCon hidden">添加应用
<div class="addItemCon hidden zoomInDown animated">
<div class="iconList">
<h2 class="">娱乐</h2>
<ul id="">
<li class="zoomInDown animated"><a href="http://www.baidu.com" title="百度一下"><span><img src="http://m.baidu.com/static/index/screen_icon.png"></span><i class="name">百度一下</i></a></li>
<li class="zoomInDown animated"><a href="https://chrome.google.com/webstore?utm_source=InfinityNewtab" title="Chrome 商店"><span style="background:transparent;"><img src="http://infinityicon.infinitynewtab.com/icon/150127092207.png"></span><i class="name">Chrome 商店</i></a></li>
<li class="zoomInDown animated"><a href="http://taobao.com" title="淘宝"><span><img src="http://img.alicdn.com/tps/i1/TB13jPYHXXXXXcuXpXXE5jB3XXX-114-114.png"></span><i class="name">淘宝</i></a></li>
<li class="zoomInDown animated"><a href="http://www.youku.com" title="优酷"><span style="background:#EAEAEA;"><img src="http://7xilfp.com5.z0.glb.clouddn.com/icon/150127093210.png"></span><i class="name">优酷</i></a></li>
<li class="zoomInDown animated"><a href="http://www.iqiyi.com" title="爱奇艺"><span style="background:#EAEAEA;"><img src="http://7xilfp.com5.z0.glb.clouddn.com/icon/150127092958.png"></span><i class="name">爱奇艺</i></a></li>
</ul>
</div>

<div class="iconList">
<h2 class="">娱乐1</h2>
<ul id="">
<li class="zoomInDown animated"><a href="http://www.baidu.com" title="百度一下"><span><img src="http://m.baidu.com/static/index/screen_icon.png"></span><i class="name">百度一下</i></a></li>
<li class="zoomInDown animated"><a href="https://chrome.google.com/webstore?utm_source=InfinityNewtab" title="Chrome 商店"><span style="background:transparent;"><img src="http://infinityicon.infinitynewtab.com/icon/150127092207.png"></span><i class="name">Chrome 商店</i></a></li>
<li class="zoomInDown animated"><a href="http://taobao.com" title="淘宝"><span><img src="http://img.alicdn.com/tps/i1/TB13jPYHXXXXXcuXpXXE5jB3XXX-114-114.png"></span><i class="name">淘宝</i></a></li>
<li class="zoomInDown animated"><a href="http://www.youku.com" title="优酷"><span style="background:#EAEAEA;"><img src="http://7xilfp.com5.z0.glb.clouddn.com/icon/150127093210.png"></span><i class="name">优酷</i></a></li>
<li class="zoomInDown animated"><a href="http://www.iqiyi.com" title="爱奇艺"><span style="background:#EAEAEA;"><img src="http://7xilfp.com5.z0.glb.clouddn.com/icon/150127092958.png"></span><i class="name">爱奇艺</i></a></li>
</ul>
</div>

</div>
<!-- <input type="checkbox" id="about" /> -->
<!-- <input type="radio" name="setting" id="about" /> -->
<div class="aboutCon hidden">
<div class="aboutCon hidden zoomInDown animated">

<h2>关于我们</h2>
<p>BlankTab新标签页插件是一款可以把chrome默认新标签页换成一个美观实用的BlankTab新标签页，不仅有简洁美观的页面，还有邮件提醒，天气预报，笔记功能，待办事项，壁纸，历史记录管理等。</p>
<p>BlankTab新标签页插件是一款可以把chrome默认新标签页换成一个美观实用的BlankTab新标签页，不仅有简洁美观的页面，还有一些工具邮件提醒，天气预报，笔记功能，待办事项，壁纸，历史记录管理等。</p>
<p>BlankTab新标签页所提供的内容都是安全的，使用BlankTab搜索出来的内容会由BlankTab检测并安全地提供给用户。</p>
<br/>
<h2>贡献者</h2>
<p><a href="https://github.com/jaywcjlove/BlankTab">kenny.wang</a></p>

</div>
</div>
<section>
<label for="tm"><span></span></label>
</section>
<div class="iconList">
<div class="iconList floatingLayer">
<ul id="iconList">
<!-- <li class="zoomInDown animated"><a href="#"><span><img src="http://is1.mzstatic.com/image/thumb/Purple4/v4/16/be/ee/16beeefb-c5ad-3d0f-14bf-bb736f362794/source.icns/512x512bb.png"></span><i>百度应用</i></a></li>
<li class="zoomInDown animated"><a href="#"><span><img src="http://is1.mzstatic.com/image/thumb/Purple3/v4/ea/d1/40/ead14097-3e65-1d98-371e-3bd8cd3ee62d/source.icns/512x512bb.png"></span><i>Sina新闻</i></a></li> -->
Expand Down

0 comments on commit acf6ecf

Please sign in to comment.