Hướng dẫn tạo hiệu ứng logo như CanhMe.Com

CanhMe.Com là blog chia sẻ mã giảm giá về domain, hosting, v.v... hằng đầu tại Việt Nam, phát triển bởi anh Luân Trần. Và các bạn có thể để ý thấy là logo của canhme.com có hiệu ứng ánh sáng chạy qua nó. Hôm nay mình sẽ hướng dẫn các bạn cách tạo hiệu ứng như vậy nhé !

Các bạn có thể xem demo : codepen.io/tungduy/pen/pqeMwo

Đầu tiên là cấu hình lại CSS, các bạn copy đoạn này vào :
Mã:
@media all{
div,img{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
a:link,a:visited{text-decoration:none;-webkit-transition:background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;transition:background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out;}
a:hover{text-decoration:none;}
a:active{outline:none;}
#logo{float:left;margin:30px 0;}
@media screen and (min-width: 900px){
#logo:before{content:"";position:absolute;left:-665px;top:-460px;width:250px;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 1.5s ease-out 1s infinite;-o-animation:searchLights 1.5s ease-out 1s infinite;animation:searchLights 1.5s ease-out 1s infinite;}
}
a:link,a:visited{color:#669900;}
@media only screen and (min-width: 1024px) and (max-width: 1280px){
#logo{margin-right:30px;}
}
@media only screen and (max-width: 1023px){
#logo{margin-right:0;}
}
img{height:auto;max-width:100%;}
*{-webkit-box-sizing:initial;-moz-box-sizing:initial;box-sizing:initial;}
}
/*! CSS keyframes */
@-webkit-keyframes searchLights{0%{left:-100px;top:0;}to{left:250px;top:0;}}
@-o-keyframes searchLights{0%{left:-100px;top:0;}to{left:250px;top:0;}}
@-moz-keyframes searchLights{0%{left:-100px;top:0;}to{left:250px;top:0;}}
@keyframes searchLights{0%{left:-100px;top:0;}to{left:250px;top:0;}}

Cuối cùng, chèn đoạn HTML này vào nơi cần hiển thị logo, nhớ thay link lại nhé !
HTML:
<div id="logo">  <a href="https://canhme.com" rel="home">  <img src="https://canhme.com/wp-content/uploads/2016/08/Canh-Me-Logo.png" alt="Canh Me" width="300">  </a></div>


canhme.png



Đơn giản vậy thôi :cnr:
 
  • Chủ đề
    canhme
  • Top