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

14 nhận xét:

Star Dũng Blog nói...

Hay lắm :)

Trường Nguyễn nói...

Ok hi :)

Star Dũng Blog nói...

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

Trường Nguyễn nói...

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

Star Dũng Blog nói...

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

Trường Nguyễn nói...

Bị sao đấy e?

Khôi Ròm nói...

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

Trường Nguyễn nói...

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

Star Dũng Blog nói...

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

Trường Nguyễn nói...

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

NAD nói...

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

Trường Nguyễn nói...

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ường Nguyễn nói...

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

Việt Hưng nói...

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

Đăng nhận xét