VN-Lives: Thiết kế chữ chạy từ phải qua trái với CSS. | Design text run form right to left animation with CSS.

Thiết kế chữ chạy từ phải qua trái với CSS. | Design text run form right to left animation with CSS.

Bài viết này mình sẽ hướng dẫn cách sử dụng CSS để tạo một hiệu ứng chữ động đơn giản, hiệu ứng này sẽ làm dòng chữ chạy từ phải sang trái khi trang web được load lên trên trình duyệt.

Live Demo:

Screenshot:

Source Animation Text Left To Right:

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>CSS animations: Example 1</title>
<style type="text/css">
    h1 {
      -moz-animation-duration: 3s;
      -webkit-animation-duration: 3s;
      -moz-animation-name: slidein;
      -webkit-animation-name: slidein;
    }

    @-moz-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }

      to {
        margin-left:0%;
        width:100%;
      }
    }

    @-webkit-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }

      to {
        margin-left:0%;
        width:100%;
      }
    }
</style>
</head>
<body>
<h1>Watch me move</h1>
<p>This example shows how to use CSS animations to make <code>H1</code> elements
move across the page.</p>

</body></html>

VN-Lives

Thiết kế chữ chạy từ phải qua trái với CSS. | Design text run form right to left animation with CSS.

No comments:

Post a Comment