Tạo hiệu ứng sóng chuyển màu tại trang nhãn cho Blogspot

Mình được yêu cầu khá nhiều về thủ thuật tạo hiệu ứng sóng và chuyển màu đẹp mắt mà BSW Template đang sử dụng tại trang danh mục.

Hôm nay có dịp rảnh nên chia sẻ lại cho các bạn!

DEMO tại các trang danh mục của Bacsiwindows.com nhé.

XEM DEMO

Tạo hiệu ứng sóng chuyển màu tại trang nhãn cho Blogspot

Hướng dẫn sử dụng:

1. Vị trí chèn code

Chèn bên dưới Menu menu của các bạn nhé. Các bạn xác định đúng vị trí phần code chứa menu của các bạn sau đó chèn code dưới nó!

2. Code tại hiệu ứng trong tại trang nhãn cho blogspot

<b:if cond='data:blog.searchLabel'>
<style>
.breadcrumbs{display:none}
div#label-intro{z-index:20;margin:0;color:#fff;text-align:center;height:100%;position:absolute;width:100%}
.label-intro{z-index:2;position:absolute;width:100%;height:100%}
div#label-intro div.noi-dung{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);width:1080px;max-width:100%;text-align:left;padding:0 0 0 8em;box-sizing:border-box}
div#label-intro div.noi-dung i.labels{left:0;position:absolute;top:50%;transform:translate(0,-50%);font-size:6em;font-weight:100;opacity:.3}
div#label-intro div.noi-dung div.title{font-weight:700;font-size:2.5em;text-shadow:6px 6px 0 rgba(0,0,0,0.1)}
div#label-intro div.noi-dung div.content{width:600px;max-width:100%}
/*div#label-intro div.noi-dung div.title small.cap{display:block;font-size:14px;font-weight:300}*/
@keyframes bsw-wave2{0%{transform:translateX(0) translateZ(0) scaleY(1)}50%{transform:translateX(-25%) translateZ(0) scaleY(0.55)}100%{transform:translateX(-50%) translateZ(0) scaleY(1)}}
.waveWrapper{z-index:0;overflow:hidden;position:relative;left:0;top:0;margin:auto;width:100%;height:420px;user-select:none;-webkit-user-select:none}
.bsw-wavebg{position:absolute;width:100%;overflow:hidden;height:100%;bottom:0;background:linear-gradient(-45deg,#f5efef, #EE7752, #E73C7E, #23A6D5, #23D5AB,#764ba2,#7577a9);background-size:400% 400%;-webkit-animation:Gradient 50s ease infinite;-moz-animation:Gradient 50s ease infinite;animation:Gradient 50s ease infinite}
.bsw-bgt{z-index:15;opacity:0.5}
.bsw-bgm{z-index:10;opacity:0.75}
.bsw-bgb{z-index:5}
.wave{position:absolute;left:0;width:200%;height:100%;background-repeat:repeat no-repeat;background-position:0 bottom;transform-origin:center bottom}
.bsw-wavetop{background-size:50% 100px}
.bsw-wave-ani .bsw-wavetop{animation:move-wave 3s;-webkit-animation:move-wave 3s;-webkit-animation-delay:1s;animation-delay:1s}
.bsw-wave-mid{background-size:50% 120px}
.bsw-wave-ani .bsw-wave-mid{animation:bsw-wave2 10s linear infinite}
.bsw-wave-bot{background-size:50% 100px}
.bsw-wave-ani .bsw-wave-bot{animation:bsw-wave2 15s linear infinite}
.bsw_wrapper{margin-top:15px}
@-webkit-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@-moz-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
</style>
<div class='waveWrapper bsw-wave-ani'>
<div id='label-intro'>
<div class='label-intro'>
<div class='noi-dung'>
<i class='labels fa fa-folder-open'/>
  <div class='title'><!--<small class='cap'>CHUYÊN MỤC</small>--><span><data:blog.pageName/></span></div>
  <div class='content'>Nơi chia sẻ những bài viết, tài liệu, thủ thuật và mẹo vặt hay nhất về &#39;<span style='font-weight:700'><data:blog.pageName/></span>&#39; giúp bạn nhanh chóng tìm ra thứ mình cần!</div>
  </div>
  </div>
</div>
  <div class='bsw-wavebg bsw-bgt'>
    <div class='wave bsw-wavetop' style='background-image: url(&apos;http://front-end-noobs.com/jecko/img/wave-top.png&apos;)'/>
  </div>
  <div class='bsw-wavebg bsw-bgm'>
    <div class='wave bsw-wave-mid' style='background-image: url(&apos;http://front-end-noobs.com/jecko/img/wave-mid.png&apos;)'/>
  </div>
  <div class='bsw-wavebg bsw-bgb'>
    <div class='wave bsw-wave-bot' style='background-image: url(&apos;http://front-end-noobs.com/jecko/img/wave-bot.png&apos;)'/>
  </div>
</div>
  </b:if>

3. Lưu lại và Kiểm tra

-BacsiWindows-