VN-Lives: Thiết kế chữ động chạy từ phải sang trái kết hợp với hiệu ứng chữ nhỏ chữ to bằng CSS Animation.

Thiết kế chữ động chạy từ phải sang trái kết hợp với hiệu ứng chữ nhỏ chữ to bằng CSS Animation.

Bài viết này xin giới thiệu với các bạn thêm một biến thể đơn giản của chữ chuyển động từ phải sang trái kết hợp với hiệu ứng phóng to và thu nhỏ chữ.

Live Demo:

CSS Animation Text Right To Left Source:

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

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

      75% {
        font-size:300%;
        margin-left:25%;
        width:150%;
      }

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

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

      75% {
        font-size:300%;
        margin-left:25%;
        width:150%;
      }

      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. Here, we've added an extra keyframe to make the text change size as it goes.</p>

</body></html>

VN-Lives

Thiết kế chữ động chạy từ phải sang trái kết hợp với hiệu ứng chữ nhỏ chữ to bằng CSS Animation.

No comments:

Post a Comment