Tạo bài viết

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 - 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

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


Tôi thích viết Blog để chia sẻ trãi nghiệm của chính mình. Tôi làm việc về Digital Marketing (SEO, Google Adwords, Facebook) và hy vọng sẽ có cơ hội hợp tác với bạn trong tương lai. Cùng chia sẻ kinh nghiệm mình có được