Tạo hiệu chứ chữ cuộn lên xuống đẹp và đơn giản bằng CSS3
/ lúc / 14 bình luận
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

BÌNH LUẬN VỀ BÀI VIẾT (14)

avatar
Star Dũng Blog

Hay lắm :)

TRẢ LỜI
avatar
Trường Nguyễn

Ok hi :)

TRẢ LỜI
avatar
Star Dũng Blog

Ad rảnh không rep ib em với
fb.com/stardungblog.xyz

TRẢ LỜI
avatar
Trường Nguyễn

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

TRẢ LỜI
avatar
Star Dũng Blog

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

TRẢ LỜI
avatar
Trường Nguyễn

Bị sao đấy e?

TRẢ LỜI
avatar
Khôi Ròm

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

TRẢ LỜI
avatar
Trường Nguyễn

Gì vậy Khôi Ròm? :v

TRẢ LỜI
avatar
Star Dũng Blog

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

TRẢ LỜI
avatar
Trường Nguyễn

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

TRẢ LỜI

Ủa, sao tự nhiên die cả tháng rồi come back vậy thớt :|

TRẢ LỜI
avatar
Trường Nguyễn

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!

TRẢ LỜI
avatar
Trường Nguyễn

https://4.bp.blogspot.com/-jmA-qIOJIFU/WfgKSYnhm5I/AAAAAAAAABQ/ElEIBlHd31gISODb3GlA9Z_JPRKiSzvYQCLcBGAs/s100/Logo-Bac-Si-Windows.png

TRẢ LỜI
avatar
Việt Hưng

ra bài cái widget trending với stories đi trường

TRẢ LỜI

THAM GIA TRANH TOP BÌNH LUẬN NGAY!

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy).

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Bạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.