越努力越幸运。
不管如何,我比你努力,比你好,比你更问心无愧。

2017.02.22

教程 | 特别的 hover effect

真的是或别了好久的教程部落格呀,自制模板呢,还有在时不时地发布,只是这教程呀,多久没发布了,我看看啊。嗯,也还好,就 9 个月没发布过了 orz 所以咧,今天就来发布一篇自创的教程。其实也不是没有发布过,这个效果呢,在我上一个自制模板 Black & White 里面呢,就用过了哦 XD 不过单独发布这篇教程的话,大家就不需要到模板的代码里去挖这个效果的代码了 科科

效果图如上 ▲

Blog Template 使用者
1. 布局 - 添加小工具 - HTML/JavaScript
2. 把以下代码添加进去

Blogskin 使用者
1. 模板 - edit HTML
2. Ctrl + F 寻找代码 </style>
3. 在 </style> 下面添加以下代码

.b-musicbox {
position: fixed;
top: 0px;
left: 30px;
background: #eee;
color: #000;
font-family: tinytots;
font-size: 8px;
letter-spacing: 1px;
padding: 5px;
-webkit-transition-duration: .7s;
}
.b-musicbox:hover {
margin-top: -20px;
-webkit-transition-duration: .7s;
}
.b-musicbox:hover .playbox {
top: 3px;
-webkit-transition-duration: .7s;
}
.playbox {
position: fixed;
top: -30px;
left: 34px;
width: 50px;
padding: 3px;
border: 1px solid #ccc;
background: white;
overflow-x: hidden;
z-index: 1000;
-webkit-transition-duration: .7s;
}

<div class='b-musicbox'>HOVER HERE
<div class='playbox'>内容</div>
</div>

解释会分成两个部分来说,一个是 before hover, 另一个是 after hover 哦。

小解释
 Before hover (灰色背景框)
紫色代码:小工具距离左边有多远 *改成right就会出现在部落格右手边哟
深紫代码:小工具背景色
浅蓝代码:HOVER HERE 字体颜色
蓝色代码:小工具多大,margin-top - 的号码就会越大,如果没有更改我预设的大小,这个就可以忽略喽 :)

 After hover (灰色边框)
红色高亮:框框距离 top 有多远
橙色高亮:框框距离左边有多远 *改成right就会出现在部落格右手边哟
绿色高亮:边框种类、粗度(可参考框框的种类
蓝色高亮:框框的背景色

红色代码:小工具内的内容
绿色代码:Before hover 的内容(HOVER HERE)*可自行更改

备注:
 此款小工具适用于置放音乐播放器
 如果想要置放其他小工具,如:欢迎词等等,可自行调整小工具的大小哟 :D
 因为涉及更改小工具大小,代码上可能会出现错误,可以留言下大家的问题,会尽快回复 :)

No comments:

Post a Comment

っ 谢谢你耐心的看完这篇帖子 ♥
っ 评论将在博主审核后发布,如有不便,敬请原谅哦 :)
っ 除了评论之外,亲也可以选择在 Cbox 留言或 PM 我的部落格专页信箱

ベ 请用词确切,勿使用脏字哟
ベ 部落格不接受匿名评论,评论前请确保你拥有 Google Account 哦
ベ 请仔细列明你的问题好方便我回答哦 :)

* 感谢你的留言,欢迎下次再来。