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
Trường Nguyễn - - 14 bình luận
Tag
  • Bình luận (14)
  • Emoticon
    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

  • :))
    :((
    :D
    :(
    :)
    :-)
    ;)
    =))
    :p
    =.=
    ==
    ^_^
    /=he
    :*
    /=r
    /=l
    :v
    /=ok
    /=clap
    (y)
    (yy)
    /=hi
    /=j
    /=hup
    /=hd
    /=hl
    /=hr
    /=s
    <3