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 :
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é !
Đơn giản vậy thôi
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>
Đơn giản vậy thôi