本篇文章主要介绍一下handsome主题的美化教程
首页标题居中
- 主题设置——开发者设置——自定义CSS
/*主题标题居中开始*/ header.bg-light.lter.wrapper-md { text-align: center; } /*主题标题居中结束*/
多彩标签云
- 主题设置——PJAX——PJAX回调函数
- 主题设置——开发者设置——自定义JS
let tags = document.querySelectorAll("#tag_cloud-2 a"); let infos = document.querySelectorAll(".badge"); let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"]; tags.forEach(tag => { tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)]; tag.style.backgroundColor = tagsColor; }); infos.forEach(info => { infosColor = colorArr[Math.floor(Math.random() * colorArr.length)]; info.style.backgroundColor = infosColor; }); function addNumber(a) { var length = document.getElementById("comment").value.length; if(length> 0){ document.getElementById("comment").focus() document.getElementById("comment").value += '\n' + a + new Date }else{ document.getElementById("comment").focus() document.getElementById("comment").value += a + new Date } }
赞赏按钮跳动
- 主题设置——开发者设置——自定义CSS
/*赞赏按钮跳动开始*/ .btn-pay { animation: star 0.5s ease-in-out infinite alternate; } @keyframes star { from { transform: scale(1); } to { transform: scale(1.1); } } /*赞赏按钮跳动结束*/
滑动条美化
- 主题设置——开发者设置——自定义CSS
/*定义滚动条高宽及背景 横竖滚动条的尺寸开始*/ ::-webkit-scrollbar { width: 8px; height: 6px } /*定义滚动条高宽及背景 横竖滚动条的尺寸结束*/ /*定义滚动条轨道开始*/ ::-webkit-scrollbar-track { background-color: transparent; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em } /*定义滚动条轨结束*/ /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb { background-color: #FFC0CB; background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em } /*定义滑块 内阴影+圆角结束*/
复制右上角显示版权
- 主题设置——开发者设置——自定义JS
/* 复制成功提示代码开始 */ kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){ $.message({ message: "尊重原创,转载请注明出处!<br> 本文作者:xxx<br>原文链接:"+sitesurl, title: "复制成功", type: "warning", autoHide: !1, time: "3000" }) }} /* 复制成功提示代码结束 */
LOGO美化 扫光效果
- 主题设置——开发者设置——自定义CSS
/* logo扫光开始 */ .navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}} /*logo扫光结束*/
头像转动并放大
- 主题设置——开发者设置——自定义CSS
/*头像转动放大开始*/ **width**:**130px**; } **.avatar**{ **-webkit-transition**: **0.4s**; **-webkit-transition**: -webkit-transform **0.4s** ease-out; **transition**: transform **0.4s** ease-out; **-moz-transition**: -moz-transform **0.4s** ease-out; } **.avatar****:hover**{ **transform**: **rotateZ**(360deg); **-webkit-transform**: **rotateZ**(360deg); **-moz-transform**: **rotateZ**(360deg); } **#aside-user** **span****.avatar**{ **animation-timing-function**:**cubic-bezier**(0,0,.07,1)**!important**; **border**:**0** solid } **#aside-user** **span****.avatar****:hover**{ **transform**:**rotate**(360deg) **scale**(1.2); **border-width**:**5px**; **animation**:avatar .**5s** } /*头像转动放大结束*/
头像呼吸光环
- 主题设置——开发者设置——自定义CSS
/*头像呼吸光环开始*/ 0% { **box-shadow**: **0** **0** **4px** **#f00**; } 25% { **box-shadow**: **0** **0** **16px** **#0f0**; } 50% { **box-shadow**: **0** **0** **4px** **#00f**; } 75% { **box-shadow**: **0** **0** **16px** **#0f0**; } 100% { **box-shadow**: **0** **0** **4px** **#f00**; } } /*头像呼吸光环结束*/
首页文章阴影版式化
- 主题设置——开发者设置——自定义CSS
/*文章板式阴影化开始*/ **.panel**{ **box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35); **-moz-box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35); } **.panel****:hover**{ **box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35); **-moz-box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35); } **.panel-small**{ **box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35); **-moz-box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35); } **.panel-small****:hover**{ **box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35); **-moz-box-shadow**: **1px** **1px** **5px** **5px** **rgba**(255, 112, 173, 0.35); } /*文章板式阴影化结束*/
首页文章圆角版式化
- 主题设置——开发者设置——自定义CSS
/*首页文章板式园角化开始*/ **.panel**{ **border**: none; **border-radius**: **15px**; } **.panel-small**{ **border**: none; **border-radius**: **15px**; } **.item-thumb**{ **border-radius**: **15px**; } /*首页文章板式园角化结束*/