Tutorial More on this category »
MS. Office More on this category »
Tokoh dan Penemu More on this category »

Buat Animasi Ketik Sederhana

tutorial infoalya.com

Assalamu'alaikum sahabat infoalya.com, pada postingan kali ini saya ingin berbagi sedikit tentang cara membuat animasi ketik sederhana dengan menggunakan css, untuk pengertian css sendiri sahabat dapat browsing di mbah google ya, dan sekalian mengisi waktu senggang :) baiklah kawan berikut ini kode yang digunkan :




CSS yang digunakan :
<style>
  .container{
   width: 800px;
   margin: 30px auto;
   padding: 20px 30px;
   background: #F6CECE;
   border: 1px solid #F5A9A9;
  }
  .wadah-mengetik
  {
   font-size: 27px;
   width: 740px;
   white-space:nowrap;
   overflow:hidden;
   -webkit-animation: ketik 5s steps(50, end);
   animation: ketik 5s steps(50, end);
  }
  @keyframes ketik{
    from { width: 0; }
  }
  @-webkit-keyframes ketik{
    from { width: 0; }
  }
 </style>


Dan berikut HTMLnya :
<div class="container">
  <h2>Animasi Ketik Teks Dengan CSS</h2>
  <p><a href="http://www.infoalya.com/">Kembali ke tutorial&raquo;</a></p>
  <p class="wadah-mengetik">Ini adalah contoh animasi dengan css </p>
 </div>


Sehingga secara keseluruhan akan tampak seperti berikut :
<style>
  .container{
   width: 800px;
   margin: 30px auto;
   padding: 20px 30px;
   background: #F6CECE;
   border: 1px solid #F5A9A9;
  }
  .wadah-mengetik
  {
   font-size: 27px;
   width: 740px;
   white-space:nowrap;
   overflow:hidden;
   -webkit-animation: ketik 5s steps(50, end);
   animation: ketik 5s steps(50, end);
  }
  @keyframes ketik{
    from { width: 0; }
  }
  @-webkit-keyframes ketik{
    from { width: 0; }
  }
 </style>

<div class="container">
  <h2>Animasi Ketik Teks Dengan CSS</h2>
  <p><a href="http://www.infoalya.com/">Kembali ke tutorial&raquo;</a></p>
  <p class="wadah-mengetik">Ini adalah contoh animasi dengan css </p>
 </div>


Sekian dulu postingan singkat yang dapat admin bagikan semoga bisa bermanfaat ya :)
Blogger
Disqus

6 komentar

đồng tâm
game mu
cho thuê nhà trọ
cho thuê phòng trọ
nhac san cuc manh
số điện thoại tư vấn pháp luật miễn phí
văn phòng luật
tổng đài tư vấn pháp luật
dịch vụ thành lập công ty trọn gói
lý thuyết trò chơi trong kinh tế học
đức phật và nàng audio
hồ sơ mật dinh độc lập audio
đừng hoang tưởng về biển lớn ebook
chiến thắng trò chơi cuộc sống ebook
bước nhảy lượng tử
ngồi khóc trên cây audio
truy tìm ký ức audio
mặt dày tâm đen audio
thế giới như tôi thấy ebook

Cùng lúc đó, tốc độ của năng lượng những mảnh vụn sao Bắc đẩu càng trở nên kinh người mãnh liệt tiến vào trong cơ thể hắn.

Lưu Phong cật lực chịu đựng sự đau đớn thoát thai hoán cốt, tinh thần và ý chí cơ hồ đã rơi vào hôn mê.

Cũng không biết trải qua bao lâu, thống khổ của Lưu Phong từ từ giảm bớt xuống, hắn có thể chứng kiến rõ ràng gân mạch của mình đã lớn hơn lúc trước không ít.

Năng lượng cường đại của những mảnh vụn sao Bắc đẩu trong kinh mạch mới sinh ra của Lưu Phong bắt đầu chạy như điên, càng ngày càng sáng ngời, càng ngày càng chói mắt, dẫn thẳng về phía đan điền.

Rốt cục, khi đã đem toàn bộ năng lượng các mảnh vụn sao Bắc Đẩu toàn thân nén lại vào đan điền, Lưu Phong cảm thấy toàn thân cực kỳ thoải mái.

Cẩn thận quan sát, hắn mới phát hiện, viên kim đan bên trong đan điền, trong lần tu luyện này đã lớn hơn một chút.

Lưu Phong hai mắt chậm rãi mở ra, trong con ngươi khi sáng thì tinh quang điện thiểm, tối thì âm trầm khó lường, một hồi lâu mới hồi phục bình thường, nhưng ánh mắt này đã khác với lúc trước, tràn ngập mị lực gần như hồ ma, thực quỷ dị. Da thịt hắn lập lòe phát sáng, giống như bị dính một lớp lực lượng câu hồn nhiếp phách người khác vậy, tướng mạo khuôn mặt tràn ngập hào hùng, lộ ra lông mày thô cùng vầng trán rộng cương nghị bất khuất…

Không biết bao nhiêu nữ tử lại sắp bị khuynh đảo.

Sự thật chứng minh Thái Âm thất tinh huyền được bổ khuyết, quả nhiên không giống bình thường, khó trách ngay cả Lão bất tử rất ương ngạnh đó cũng nói mình có tiền đồ.

Balas

terima kasih sahabat linteksi.com sudah mau mampir :shakehand

Balas

:thumbup
Tips disini mantap2... Admin-nya jago css ya...

Balas

tidak juga mas, masih belajar kok... blog linteksi juga menarik infonya :2thumbup

Balas

[+] Silahkan tinggalkan komentar
[+] Berkomertarlah dengan santun
[+] Mohon tidak meninggalkan live link
[+] Terima kasih untuk komentar anda

Copyright © 2013. INFOALYA.COM - All Rights Reserved | Template Created by Kompi Ajaib Proudly powered by Blogger