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
  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. https://4.bp.blogspot.com/-jmA-qIOJIFU/WfgKSYnhm5I/AAAAAAAAABQ/ElEIBlHd31gISODb3GlA9Z_JPRKiSzvYQCLcBGAs/s100/Logo-Bac-Si-Windows.png

    Trả lờiXóa
  5. ra bài cái widget trending với stories đi trường

    Trả lờiXóa
CÓ THỂ BẠN ĐANG TÌM