VN-Lives: Thiết kế chữ động chạy từ trái sang phải kèm theo dòng chữ dưới chuyển động lên xuống.

Thiết kế chữ động chạy từ trái sang phải kèm theo dòng chữ dưới chuyển động lên xuống.

Bài viết này mình xin giới thiệu một ví dụ biến thể kết hợp của dạng chữ động chạy từ phải sáng trái và dòng chữ thứ 2 sẽ nhích lên, nhích xuống.

Live Demo:

Animation Source Text Right To Left:

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

      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ừ trái sang phải kèm theo dòng chữ dưới chuyển động lên xuống.

No comments:

Post a Comment