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

Huỳnh Phụng Blogger đã đăng
Hiện có lượt xem và 14 bình luận
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
HIỆN CÓ 14 BÌNH LUẬN
  1. Người yêu tôi ko có gì để mặc :v

    Trả lờiXóa
  2. Ủ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
  3. https://4.bp.blogspot.com/-jmA-qIOJIFU/WfgKSYnhm5I/AAAAAAAAABQ/ElEIBlHd31gISODb3GlA9Z_JPRKiSzvYQCLcBGAs/s100/Logo-Bac-Si-Windows.png

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

    Trả lờiXóa