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

2017.02.22

教程 | Blockquote Effect


- Tutorial requested by Pandora Angel & Elaine-

曰:
原本是不打算发布这个教程的。只是很多博友觉得这个教程很特别,很喜欢。但是,却通过 “不法” 的途径来拿这个代码。不用我说。你们都知道是什么了。很不明白,喜欢但不会弄、那就问啊。有很丢脸么?我承认,我的代码也是从 BS 学来的,这个不是叫做拷贝啊,BS 就是让你整个模板下载去用的。那为什么使用 BT 就要抄袭呢、不能问,不能自己学么?难道你们觉得偷了代码,然后弄成像是自己发现的,会比较有面子么?好心了,大家都不是没有 sense 的人,好不?算了,我还是比较看得起,不会但肯问的亲亲博友们。来,亲一个 木啊 ♥

注意:如果你已经添加过 blockquote 代码,那就直接把以下代码 {...} 里的美化代码搬去你的 blockquote 代码里,不要再添加多一次,不然就看不到效果了。

版本 I
我是版本 I。

1. 设计 → 修改 HTML

2. 添加这个代码:
blockquote {
border: 1px solid #ccc;
box-shadow: inset 0px 0 0px 0 #cccccc;
padding: 4px;
}

blockquote:hover {
border: 1px solid #ccc;
box-shadow: inset 800px 0 0px 0 #cccccc;
padding: 4px;
-webkit-transition-duration: 1.5s;
}
3. 预览看看代码有没有问题,即可保存。

版本 II
我是版本 II。
1. 设计 → 修改 HTML

2. 添加这个代码:
blockquote {
border: 1px dashed #eeeeee;
border-right: 20px solid #fecdc9;
border-left: 20px solid #fecdc9;
box-shadow: inset 0px 0 10px 0 #fecdc9;
padding: 4px;
-webkit-transition-duration: 1.5s;
border-radius: 10px;
}

blockquote:hover {
border: 1px dashed #eeeeee;
border-right: 20px solid #fecdc9;
border-left: 20px solid #fecdc9;
box-shadow: inset 0px 0 800px 0 #faafbe;
padding: 4px;
-webkit-transition-duration: 1.5s;
border-radius: 10px;
}
 3. 预览看看代码有没有问题,即可保存。

小解释
红色代码:边框的类型、粗度、颜色。
蓝色代码:鼠标划过时,出现的效果的颜色(嘿嘿,自己发掘呗、)
紫色代码:慢慢划过的那个效果的时间 *可更改
青色代码:blockquote 圆框的弧度

- 当然,如果你还想添加自己的美化代码,当然可以,我给的不过是那个效果的 basecode, 重要的还是你自己的概念、设计。所以,效果的代码我给了,其他的就由你们自己去发掘吧!如果我发现到更多特别的效果,会再在这里更新的嗯、

22 comments:

  1. Replies
    1. 请参考这篇教程:http://angelbii.blogspot.com/2011/11/blockquote.html

      BII.

      Delete
  2. 雖然很喜歡……
    但是我放棄了!!!!OAO
    真是太麻煩了!!!!
    真是太複雜了!!!!

    ReplyDelete
    Replies
    1. 嘿嘿、哪里会 :P
      直接拷贝去就好了嘛、哈哈!

      BII.

      Delete
  3. 我使用了你的教程咯^^

    ReplyDelete
  4. 我拿去用咯=]谢谢你的教程=)

    ReplyDelete
  5. thanks for tutorial :D
    love your blog >__<

    ReplyDelete
  6. Replies
    1. 是的,加在 ]]> 上面。

      -replied by Bii.

      Delete
  7. 你的 有图画 飘下来是怎样弄的啊 ?

    ReplyDelete
    Replies
    1. 那个只是背景图片来的啊 ^^

      blockquote{
      background:url(图片网址) no-repeat top right;
      }

      blockquote:hover{
      background:url(图片网址) no-repeat bottom right;
      }

      像这样 :)

      - replied by Bii.

      Delete
    2. 那么上面的 code 还要加吗?

      Delete
    3. 你是指 帖子里的 code?
      不需要了.

      -replied by Bii.

      Delete
  8. 成功了,谢谢你的教程 :)

    ReplyDelete
  9. Replies
    1. 你是代码添加在哪里?上面已经写了啊。

      -replied by Bii.

      Delete

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

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

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