kết quả từ 1 tới 6 trên 6

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

  1. #1
    Ðến Từ
    Hà Tĩnh
    Thành Viên Thứ: 422306
    Giới tính: Nam
    Bài gửi
    455

    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 Code:
    <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>

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



    Đơn giản vậy thôi
    Quick reply to this message Trả lời       

  2. 2 thành viên đã cảm ơn Tùng Minky:

    Azohtt9 

  3. #2
    Ðến Từ
    Hà Nội
    Thành Viên Thứ: 427247
    Bài gửi
    14

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

    Web bác ngỏm rồi hả Tùng Minky
    Download Phần Mềm Kỹ Thuật - https://laptopxyz.com/category/download

  4. Đã cảm ơn TrungLun0112:


  5. #3
    Ðến Từ
    Hà Tĩnh
    Thành Viên Thứ: 422306
    Giới tính: Nam
    Bài gửi
    455

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

    Trích Nguyên văn bởi TrungLun0112 Xem bài viết
    Web bác ngỏm rồi hả Tùng Minky
    À chào bác Trung, em lỡ tay ấn xóa VPS nên không còn code nữa

  6. #4
    Ðến Từ
    Hà Nội
    Thành Viên Thứ: 427247
    Bài gửi
    14

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

    Trích Nguyên văn bởi Tùng Minky Xem bài viết
    À chào bác Trung, em lỡ tay ấn xóa VPS nên không còn code nữa
    Chia buồn với bác . Hết chỗ cmt lấy link rồi

  7. #5
    Ðến Từ
    Hà Tĩnh
    Thành Viên Thứ: 422306
    Giới tính: Nam
    Bài gửi
    455

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

    Trích Nguyên văn bởi TrungLun0112 Xem bài viết
    Chia buồn với bác . Hết chỗ cmt lấy link rồi
    Đang có dự án mới, khi nào xong em đưa link cho bác

  8. #6
    Ðến Từ
    Hà Nội
    Thành Viên Thứ: 427247
    Bài gửi
    14

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

    Trích Nguyên văn bởi Tùng Minky Xem bài viết
    Đang có dự án mới, khi nào xong em đưa link cho bác
    Yêu bác ghê vậy đó

Nhãn