[share] code hiệu ứng viền màu chạy

Demo: [You must be registered and logged in to see this link.]

Ưu điểm: dùng css nên nhẹ, hiệu ứng đẹp

Điều kiện: phải còn thẻ pun và tất cả class chạy viền phải đặt trong thẻ pun ( mới áp dụng cho punbb, các mã nguồn khác muốn dùng phải edit lại css)

phần cần đặt viền chạy tìm:

Code:

<div class="main-content">

thay thành:

Code:

<div class="main-content stat-board po-rel">
  <span class="natata"></span>
<span class="netete"></span>
<span class="nototo"></span>
<span class="nututu"></span>

thêm vào css:

Code:

47%{opacity:1}50%{opacity:0}97%{opacity:0}100%{opacity:1}@font-face{font-family:icomoon;font-style:normal;font-weight:400;src:url(https://googledrive.com/host/0B2iMjo97NLgXLUt3T0RtaWVRWVE/fonts/icomoon.eot?#iefix) format(embedded-opentype), url(https://googledrive.com/host/0B2iMjo97NLgXLUt3T0RtaWVRWVE/fonts/icomoon.woff) format(woff), url(https://googledrive.com/host/0B2iMjo97NLgXLUt3T0RtaWVRWVE/fonts/icomoon.ttf) format(truetype), url(https://googledrive.com/host/0B2iMjo97NLgXLUt3T0RtaWVRWVE/fonts/icomoon.svg#icomoon) format("svg")}@font-face{font-family:icomoon;font-style:normal;font-weight:400;src:url(/h12-svg.svg#icomoon) format("svg")}.pun a:link{font-family:Arial, Helvetica, verdana, sans-serif;font-size:10pt;text-decoration:none}.pun{min-width:100px;padding:0;width:100%}.clearfix{clear:both}
.po-rel{position:relative!important}
a{text-decoration:none!important}[type*="button"],[type*="reset"],
[type*="submit"]{-moz-transition:all .1s ease;-webkit-transition:all
 .1s ease;background:#fff!important;border:3px solid #0099ff!important;border-radius:1px!important;box-shadow:0 0 1px rgba(0,0,0,0.5);color:#0099ff!important;cursor:pointer;font-weight:700!important;padding:1.5px 12px}
.pun .main-content .natata{-moz-transition:all 1s ease;-webkit-transition:all 1s ease;background:#2e2e2e;border-radius:2px;content:"";height:3px;left:0;position:absolute;top:0;width:0}.pun .main-content:hover .natata{background:#0099ff;width:100%}
.pun .main-content .netete{-moz-transition:all 1s ease;-webkit-transition:all 1s ease;background:#2e2e2e;border-radius:2px;bottom:0;content:"";height:3px;position:absolute;right:0;width:0}
.pun .main-content:hover .netete{background:#0099ff;width:100%}
.fixedhead{background:#0099ff;height:94px;left:0;position:absolute;top:0;width:100%;z-index:-1}
.pun .main-content .nototo{-moz-transition:all 1s ease;-webkit-transition:all 1s ease;background:#2e2e2e;border-radius:2px;bottom:0;content:"";height:0;left:0;position:absolute;width:3px}.pun .main-content:hover .nototo{background:#0099ff;height:100%}
.pun .main-content .nututu{-moz-transition:all 1s ease;-webkit-transition:all 1s ease;background:#2e2e2e;border-radius:2px;content:"";height:0;position:absolute;right:0;top:0;width:3px}.pun .main-content:hover .nututu{background:#0099ff;height:100%}