[Code] News Sticker với CSS3 Thuần dành cho forumotion

  • the_dav

    News Sticker với CSS3 Thuần dành cho forumotion


    demo:

    Theo như ước muốn của duật gay. mình làm lại dựa theo css của thuthuatweb để dùng được ở forumvi. ae sài thì cho ý kiến nhé chứ mình thấy ngon phết

    Code:
    <div class="newshotrofm"><div class="news red">
      <span>Latest News</span></div></div>
    <script>$(function () {
      $.ajax({url: "/feed/",success: function (a) {
      $(".news span").after('<ul id="newshotrofmdav">');
      22 < $(a).find("title").length ? so = 22 : so = $(a).find("title").length;for (i = 2; i < so; i++)
    $('<li><a href="' + $(a).find("link:eq(" + i + ")").text() + '">' + $(a).find("title:eq(" + i + ")").text() + "</a></li>").appendTo("#newshotrofmdav")}})});</script>

    <style>
    @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
    @keyframes ticker {
        0%  {margin-top: 0}
        25%  {margin-top: -30px}
        50%  {margin-top: -60px}
        75%  {margin-top: -90px}
        100% {margin-top: 0}
    }
     
    body { background: #333; width: 100%; height: 100% }
     
    .news {
      box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4), 0 5px 10px rgba(0,0,0,0.5);
      height: 30px;
      margin: 20px auto;
      overflow: hidden;
      border-radius: 4px;
      padding: 3px;
      -webkit-user-select: none
    }
     
    .news span {
      float: left;
      color: #fff;
      padding: 6px;
      position: relative;
      top: 1%;
      border-radius: 4px;
      box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4);
      font: 16px 'Source Sans Pro', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -webkit-user-select: none;
      cursor: pointer
    }
     
    .news ul {
      float: left;
      padding-left: 20px;
      animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
      -webkit-user-select: none
    }
     
    .news ul li {line-height: 30px; list-style: none }
     
    .news ul li a {
      color: #fff;
      text-decoration: none;
      font: 14px Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -webkit-user-select: none
    }

    #newshotrofmdav a:visited {
        color: #fff;
    }
    #newshotrofmdav a:link {
        color: #fff;
    }
     
    .news ul:hover { animation-play-state: paused }
    .news span:hover+ul { animation-play-state: paused }
     
    /* OTHER COLORS */
    .blue { background: #347fd0 }
    .blue span { background: #2c66be }
    .red { background: #d23435 }
    .red span { background: #c22b2c }
    .green { background: #699B67 }
    .green span { background: #547d52 }
    .magenta { background: #b63ace }
    .magenta span { background: #842696 }
    </style>

    Trong này có 4 mầu ae đổi class để đổi theo ý mình nhé

    trong code mình share có đoạn
    Code:
    <div class="news red">

    nếu muốn đổi thì chỉ cần sửa red thành blue hay green hoặc magenta tùy sở thích
    Tags: #code #codefm

  • Giựt
    2. Re: [Code] News Sticker với CSS3 Thuần dành cho forumotion
    avatar MOD
    Good good ! Very Happy Nhưng mà thế *beep* nào mà lại là duật gay

  • the_dav
    trandangduat đã viết:Good good ! Very Happy Nhưng mà thế *beep* nào mà lại là duật gay

    comment lạc đề đấy. muốn ra đảo chơi với khỉ không Smile

  • Sponsored content

Thông tin tác giả
avatar
MEM LV3
Bài viết :
222
Points :
319
Like :
47
Punbb
Quản trị
Xem lý lịch thành viên
Thông tin tác giả
avatar
MOD
Bài viết :
273
Points :
440
Like :
89
Punbb
Cẩn thận
Status :
Giựt đẹp trai
Xem lý lịch thành viên
Thông tin tác giả
avatar
MEM LV3
Bài viết :
222
Points :
319
Like :
47
Punbb
Quản trị
Xem lý lịch thành viên
Thông tin tác giả
Sponsored content
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết