September 05, 2022   BLOGGER

[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ữ t...

 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 Ở BÊN DƯỚI :



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

Copyright @ 2015 By BomKhung.BlogSpot.Com