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

Bài viết này sẽ hướng dẫn một biến thể khác của chữ động bằng CSS Animation. Ở đây dòng chữ sẽ được chay qua chay lại kèm theo hiệu ứng phóng to thu nhỏ, với kiểu động này chữ sẽ không có hiện bị giựt hay chạy được một hồi lại mất.

Live Demo:

CSS Animation Text Left To Right Right To Left:

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>CSS animations: Example 4</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-animation-direction: alternate;
      -webkit-animation-direction: alternate;
    }

    @-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 rồi từ trái sang phải kết hợp với hiệu ứng chữ nhỏ chữ to bằng CSS Animation.

No comments:

Post a Comment