网站美化：文章列表和侧边栏添加选中效果

2018年1月19日16:36:54 发表评论 808 °C

摘要

给用户增加内容选中感，美化网站，提高用户体验。

网站美化：文章列表和侧边栏添加选中效果

一、前言

给用户增加内容选中感，美化网站，提高用户体验。

二、代码部署

这个代码只针对知更鸟主题用户，其他用户需要自行修改。效果展示：

知更鸟主题的用户可以添加到外观->主题设置->定制风格->自定义样式里面。

/*文章选中特效*/
.post:hover,.tao-box:hover,.picture-box:hover,.picture-h:hover,.tab-site:hover,.cat-box:hover{border:1px dashed #39c}

/*widget选中特效*/
.widget-title .title-i{margin:0 10px 0 16px;padding:7px 0 0 0}.widget-title:hover .title-i-t{background:#3690cf;transition:background .3s ease}.title-i{width:18px;height:18px}.title-i span{width:7px;height:7px}

/*文章选中特效*/

.post:hover,.tao-box:hover,.picture-box:hover,.picture-h:hover,.tab-site:hover,.cat-box:hover{border:1px dashed #39c}

/*widget选中特效*/

.widget-title .title-i{margin:0 10px 0 16px;padding:7px 0 0 0}.widget-title:hover .title-i-t{background:#3690cf;transition:background .3s ease}.title-i{width:18px;height:18px}.title-i span{width:7px;height:7px}

除此之外，还有选中冒蓝色微光特效，也很好看。可以自行尝试：

/*widget选中微光特效*/
.widget{background:#fff;margin:0 0 10px 0;border:1px solid #eaeaea;border-radius:2px;box-shadow:0 1px 1px rgba(0,0,0,0.04);-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;-ms-transition:.3s}.widget:hover{box-shadow:0 0 20px 3px #dfe9f7;border:1px solid #eaeaea;z-index:2}

/*文章选中微光特效*/
.post{overflow:hidden;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;-ms-transition:.3s}.post:hover{box-shadow:0 0 20px 3px #dfe9f7;border:1px solid #eaeaea;z-index:2}

/*widget选中微光特效*/

.widget{background:#fff;margin:0 0 10px 0;border:1px solid #eaeaea;border-radius:2px;box-shadow:0 1px 1px rgba(0,0,0,0.04);-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;-ms-transition:.3s}.widget:hover{box-shadow:0 0 20px 3px #dfe9f7;border:1px solid #eaeaea;z-index:2}

/*文章选中微光特效*/

.post{overflow:hidden;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;-ms-transition:.3s}.post:hover{box-shadow:0 0 20px 3px #dfe9f7;border:1px solid #eaeaea;z-index:2}