Tạo News Ticker với CSS3 Thuần

Cập nhật: Lượt xem: 717 [ Css ]

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 News Sticker với chỉ bằng CSS3 thuần mà không dùng bất kì đoạn script nào.

Tạo News Ticker với CSS3 Thuần

Ở bài trước, 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, ở bài này 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 scrip

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 }

Chúc các bạn thành công !