教学 blockquote hover ( 小图片 )
11 December 2011 @ 10:10 AM



转帖请留言和附上链接 ♥




这个呢 就是当鼠标指向 blockquote 的时候

Blockquote 的角落会出现小图片的效果 (:




还没 放入 blockquote hover 代码的 :

1 Design - Edit html

2 用 ctrl+F 找 :
]]></b:skin>

3 在它 上面 放入 :
blockquote:hover {
border: 2px dashed #000000;
background: url(小图片网址) no-repeat;
background-position: bottom right;
}




已经 放入 blockquote hover 代码的 :

1 Design - Edit html

2 用 ctrl+F 找 :
blockquote hover {

3 在它 下面 放入 :
background: url(小图片网址) no-repeat;
background-position: bottom right;




小解释 :

黄色的 是框框的粗细度 种类 和颜色

红色的 是小图片的URL

蓝色的 是小图片的位置 上或下

紫色的 是小图片的位置 左或右




如果你要它慢慢产生变化 而不是立刻有变化

那你就加入这个代码 :
-webkit-transition-duration: 1s;

红色的 是变化的时间 ( 用秒计算的 )




如果你要用这个效果的话

请你们先把你们 blockquote 和 blockquote hover 中的

background: #FFFFFF

或者是 :
background: url(图片url);

删除掉

不然是不会看到效果的 (:




不明白的话可以留下评论问我

或者是在 Tagboard 那里留言给我哦 (:


Copyrighted by Ahhxuan. ♥