Từng Bước Tạo News Sticker với CSS3 Thuần

Trước đây mình đã giới thiệu cho các bạn bài viết Cách hiển thị bản tin mới với jQuery News Ticker dùng cho những trang tin tức, hôm nay mình tiếp tục chia sẻ cho các bạn thêm cách hiển thị tin tức theo dạng này với chỉ bằng CSS3 thuần mà không dùng bất kì đoạn script nào.

 Download

HTML

Đầu tiên, chúng ta xây dựng khung chuẩn html cho những tin tức cần hiển thị ở trang chủ như sau :

<div class="news red">

    <span>Latest News</span>

    <ul>

        <li><a href="#">Text 1 - Short Description</li>

        <li><a href="#">Text 2 - Short Description</a></li>

        <li><a href="#">Text 3 - Short Description</a></li>

        <li><a href="#">Text 4 - Short Description</a></li>

    </ul>

</div>



<div class="news blue">

    <span>Latest News</span>

    <ul>

        <li><a href="#">Student Option Wednesday!</li>

                    <li><a href="#">Student Parking @ CV</a></li>

                    <li><a href="#">DCSD Express Check-In</a></li>

                    <li><a href="#">Pay School Fees</a></li>

    </ul>

</div>



<div class="news green">

    <span>Latest News</span>

    <ul>

        <li><a href="#">Text 1 - Short Description</li>

        <li><a href="#">Text 2 - Short Description</a></li>

        <li><a href="#">Text 3 - Short Description</a></li>

        <li><a href="#">Text 4 - Short Description</a></li>

    </ul>

</div>



<div class="news magenta">

    <span>Latest News</span>

    <ul>

        <li><a href="#">Text 1 - Short Description</li>

        <li><a href="#">Text 2 - Short Description</a></li>

        <li><a href="#">Text 3 - Short Description</a></li>

        <li><a href="#">Text 4 - Short Description</a></li>

    </ul>

</div>

CSS

Và để hiển thị tin tức , các bạn sử dụng đoạn css sau :

@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);

  width: 350px;

  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

}



.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 }hy