Tạo hiệu chứ chữ cuộn lên xuống đẹp và đơn giản bằng CSS3

Tạo hiệu chứ chữ cuộn lên xuống đẹp và đơn giản bằng CSS3 - Hiệu ứng cuộn chữ đẹp và đơn giản chỉ bằng CSS, cho các bạn thiết kế web/blog cá nhân.


CSS

* {
   margin: 0px;
   padding: 0px;
   font-weight: 200;
   font-family: segoe ui, helvetica neue, helvetica, arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body {
   background: #fafafa;
} 
.container {
   width: 210px;
   height: 40px;
   position: fixed;
   top: 50%;
   left: 50%;
   margin-left: -105px;
   margin-top: -20px;
}
p {
   float: left;
   line-height: 40px;
   font-size: 160%;
   color: #333;
}
.scroller {
   height: 40px;
   line-height: 40px;
   float: left;
   margin-left: 7px;
   overflow: hidden;
}
.scroller span {
   display: block;
   font-size: 160%;
   color: #222;
}
.scroller .inner {
   animation: scroll 5s infinite ease-out;
}
@keyframes scroll {
   15%  {margin-top: 0px;}
   30%  {margin-top: 0px;}
   45%  {margin-top: -40px;}
   60%  {margin-top: -40px;}
   75%  {margin-top: -80px;}
   90%  {margin-top: -80px;}
   100% {margin-top: 0px;}
}

HTML

<div class="container">
  <p>Trường</p>
  <div class="scroller">
   <div class="inner">
      <span>Nguyễn.</span>
      <span>Đẹpzai.</span>
      <span>Ciute.</span>
    </div>
  </div>
</div>

Result

Codepen.io
Nhớ bấm "Thông báo cho tôi" bên trên để nhận thông báo qua Email khi Admin trả lời nhé.
  • Đây là khu vực quản trị, bạn không có quyền truy cập vào!
    1. Trả lời
      1. Ad rảnh không rep ib em với
        fb.com/stardungblog.xyz

        Xóa
      2. Ad không rep inbox riêng, có gì thì em cứ comment ở đây nha.

        Xóa
      3. Teamview chỉ em fix khung bình luận với <3

        Xóa
      4. Mẫu bình luận của anh khác với em :v

        Xóa
      5. Thì phải nói bị làm sao mới biết chứ !?

        Xóa
    2. Người yêu tôi ko có gì để mặc :v

      Trả lờiXóa
    3. Ủa, sao tự nhiên die cả tháng rồi come back vậy thớt :|

      Trả lờiXóa
      Trả lời
      1. Em không có thời gian đi gia hạn domain với quản lý, nên bỏ bê gần tháng mới mở lại!

        Xóa
    4. ra bài cái widget trending với stories đi trường

      Trả lờiXóa