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

Vũ Trường / lúc tháng 3 07, 2018 ngày 7/3/18 / 13 bình luận

Chia sẻ

Chọn hình thức muốn chia sẻ:
• Copy liên kết
• Facebook
• Google +
• Email

Ra mắt BSW Community - trang đăng bài tự do dành cho bạn, thoải mái trao đổi, đặt câu hỏi, thắc mắc, viết bài viết mới hay thậm chí rao vặt, buôn bán. Click trải nghiệm ngay!

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