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

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

    Bài gửi  by AnhDauSai on Sun Sep 28, 2014 10:33 pm

    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%}
     
    AnhDauSai