Thứ Ba, 6 tháng 9, 2022

[Blogger] - Create beautiful and simple scrolling text effect with CSS3

 Hi mọi người, có thời gian lượt internet để tìm hiểu về những thứ bản thân đang muộn học mà chợt nhìn thấy blog này chia sẽ thủ thuật chữ trượt cho blogspot cũng khá hay nên mình đem về đây chia sẽ lại cho mọi người, biết là thủ thuật này có từ lâu rồi, chắc cũng có một số anh em blogger biết về thủ thuật rồi.

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.

CODE 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;}
}

CODE HTML :
<div class="container">
  <p>HÙNG</p>
  <div class="scroller">
   <div class="inner">
      <span>LÊ.</span>
      <span>QUẢNG BÌNH.</span>
      <span>SO KIU.</span>
    </div>
  </div>
</div>

DEMO :
Live Demo

Chúc các bạn thành công với thủ thuật đơn giản này.
THEO : TAOWEBSITE24H

12 nhận xét:

MOD HUNGQB ™ nói...

(y) phá tem :v

ADM HUNGQB ™ nói...

Sâu ciu :v

Unix Coders nói...

sâu gút :v

Nặc danh nói...

sâu hot :v

Quản Trị Viên nói...

sâu kuteo :v

Nhân Nguyễn nói...

sâu kuto ;v

Thành Phong nói...

sâu gái :v

Hoàng Đông nói...

SÂU HÓT :v

Hoàng Đông nói...

SÂU BỌ :v

Hoàng Đông nói...

SÂU BỌ :v

ADM HUNGQB ™ nói...

Vừa cập nhật giao diện thành công nhé mọi người

MOD HUNGQB ™ nói...

AE ơi, mình là công tác viên blog mới nhé. mọi người ủng hộ bài viết mình nha, tks all