Hiệu ứng chữ động (Text Animation) độc đáo với CSS3

Nếu bạn đang cần làm một trang Profile để quảng cáo bản thân mình, thì ắt hẳn là rất cần những giao diện bắt mắt với những hiệu ứng chuyên nghiệp. Trong bài viết này, mình sẽ chia sẻ cho các bạn một đoạn css đơn giản thôi, nhưng nó sẽ tạo ra một hiệu ứng động cho chữ rất đẹp , rất thích hợp cho các bạn tích hợp vào trong các thiết kế web của mình.

Xem Demo | Download

HTML

Đầu tiên, chúng ta sẽ cần khung chuẩn html cho các dòng text sẽ hiển thị như sau :

<div class="content">
  <img alt="logo" src="logo_animated_sm.gif"/>
  <div class="visible">
    <ul>
      <li>ANDRIANA</li>
      <li>WEB DESIGNER</li>
      <li>FRONT END DEVELOPER</li>
      <li>UX/UI DESIGNER</li>
      <li>PROTOTYPING MACHINE</li>
      <li>PROJECT MANAGER</li>
      <li>CONFIDENT PRESENTER</li>
    </ul>
  </div>
</div>

CSS

Và đây là đoạn css mà mình muốn chia sẻ cho các bạn :

body {
  awidth:100%;
  height:100%;
  position:fixed;
  background-color:#fff;
}

.content {
  awidth:650px;
  font-size:36px;
  line-height:40px;
  font-family:'Muli';
  color:#5e5e5e;
  height:40px;
  position:absolute;
  top:50%;
  left:50%;
}

.visible {
  float:left;
  font-weight:400;
  overflow:hidden;
  height:40px;
  margin-left:-65px;
  margin-top:22px;
}

img {
  display:inline;
  float:left;
  margin:0;
}

ul {
  margin-top:0;
  padding-left:110px;
  text-align:left;
  list-style:none;
  animation:20s linear 0s normal none infinite change;
  -webkit-animation:20s linear 0s normal none infinite change;
  -moz-animation:20s linear 0s normal none infinite change;
  -o-animation:20s linear 0s normal none infinite change;
}

ul li {
  line-height:40px;
  margin:0;
}

@-webkit-keyframes change {
  0%   {margin-top:0;}
  4%   {margin-top:0;}
  8%   {margin-top:0;}
  12%  {margin-top:-40px;}
  16%  {margin-top:-40px;}
  20%  {margin-top:-80px;}
  24%  {margin-top:-80px;}
  28%  {margin-top:-120px;}
  32%  {margin-top:-120px;}
  36%  {margin-top:-160px;}
  40%  {margin-top:-160px;}
  44%  {margin-top:-200px;}
  48%  {margin-top:-200px;}
  52%  {margin-top:-240px;}
  56%  {margin-top:-240px;}
  60%  {margin-top:-200px;}
  64%  {margin-top:-200px;}
  68%  {margin-top:-160px;}
  72%  {margin-top:-160px;}
  76%  {margin-top:-120px;}
  80%  {margin-top:-120px;}
  84%  {margin-top:-80px;}
  88%  {margin-top:-80px;}
  92%  {margin-top:-40px;}
  96%  {margin-top:-40px;}
  100% {margin-top:0;}
}

@keyframes change {
  0%   {margin-top:0;}
  4%   {margin-top:0;}
  8%   {margin-top:0;}
  12%  {margin-top:-40px;}
  16%  {margin-top:-40px;}
  20%  {margin-top:-80px;}
  24%  {margin-top:-80px;}
  28%  {margin-top:-120px;}
  32%  {margin-top:-120px;}
  36%  {margin-top:-160px;}
  40%  {margin-top:-160px;}
  44%  {margin-top:-200px;}
  48%  {margin-top:-200px;}
  52%  {margin-top:-240px;}
  56%  {margin-top:-240px;}
  60%  {margin-top:-200px;}
  64%  {margin-top:-200px;}
  68%  {margin-top:-160px;}
  72%  {margin-top:-160px;}
  76%  {margin-top:-120px;}
  80%  {margin-top:-120px;}
  84%  {margin-top:-80px;}
  88%  {margin-top:-80px;}
  92%  {margin-top:-40px;}
  96%  {margin-top:-40px;}
  100% {margin-top:0;}
}

Bài viết đơn giản, nhưng có rất nhiều đoạn css sẽ giúp các bạn hiểu rõ cách sử dụng CSS3 cũng như hiệu ứng động mà nó mang lại. Mình mong là các bạn sẽ học thêm được nhiều qua bài viết này.

Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster