Mang đến cho bạn hành trang là Kiến thức và Kinh nghiệm

Lựa chọn chủ đề bạn quan tâm

Cùng nhau thảo luận về các vấn đề

Hãy theo dõi chúng tôi nếu bạn thấy bổ ích

  1. Hỏi đáp IT
  2. Hỏi nhanh

Hiệu ứng chữ động (Text Animation) độc đáo với CSS3

Nếu bạn đang cần làm một trang Profile để quảng cáo bản thân mình, thì ắt hẳn là rất cần những giao diện bắt mắt với những hiệu ứng chuyên nghiệp. Trong bài viết này, mình sẽ chia sẻ cho các bạn một đoạn css đơn giản thôi, nhưng nó sẽ tạo ra một hiệu ứng động cho chữ rất đẹp , rất thích hợp cho các bạn tích hợp vào trong các thiết kế web của mình.

HTML
Đầu tiên, chúng ta sẽ cần khung chuẩn html cho các dòng text sẽ hiển thị như sau :

  logo
 
   
         
  • ANDRIANA
  •      
  • WEB DESIGNER
  •      
  • FRONT END DEVELOPER
  •      
  • UX/UI DESIGNER
  •      
  • PROTOTYPING MACHINE
  •      
  • PROJECT MANAGER
  •      
  • CONFIDENT PRESENTER
  •    
     


    CSS
    Và đây là đoạn css mà mình muốn chia sẻ cho các bạn :

    body {
      width:100%;
      height:100%;
      position:fixed;
      background-color:#fff;
    }
     
    .content {
      width:650px;
      font-size:36px;
      line-height:40px;
      font-family:'Muli';
      color:#5e5e5e;
      height:40px;
      position:absolute;
      top:50%;
      left:50%;
    }
     
    .visible {
      float:left;
      font-weight:400;
      overflow:hidden;
      height:40px;
      margin-left:-65px;
      margin-top:22px;
    }
     
    img {
      display:inline;
      float:left;
      margin:0;
    }
     
    ul {
      margin-top:0;
      padding-left:110px;
      text-align:left;
      list-style:none;
      animation:20s linear 0s normal none infinite change;
      -webkit-animation:20s linear 0s normal none infinite change;
      -moz-animation:20s linear 0s normal none infinite change;
      -o-animation:20s linear 0s normal none infinite change;
    }
     
    ul li {
      line-height:40px;
      margin:0;
    }
     
    @-webkit-keyframes change {
      0%   {margin-top:0;}
      4%   {margin-top:0;}
      8%   {margin-top:0;}
      12%  {margin-top:-40px;}
      16%  {margin-top:-40px;}
      20%  {margin-top:-80px;}
      24%  {margin-top:-80px;}
      28%  {margin-top:-120px;}
      32%  {margin-top:-120px;}
      36%  {margin-top:-160px;}
      40%  {margin-top:-160px;}
      44%  {margin-top:-200px;}
      48%  {margin-top:-200px;}
      52%  {margin-top:-240px;}
      56%  {margin-top:-240px;}
      60%  {margin-top:-200px;}
      64%  {margin-top:-200px;}
      68%  {margin-top:-160px;}
      72%  {margin-top:-160px;}
      76%  {margin-top:-120px;}
      80%  {margin-top:-120px;}
      84%  {margin-top:-80px;}
      88%  {margin-top:-80px;}
      92%  {margin-top:-40px;}
      96%  {margin-top:-40px;}
      100% {margin-top:0;}
    }
     
    @keyframes change {
      0%   {margin-top:0;}
      4%   {margin-top:0;}
      8%   {margin-top:0;}
      12%  {margin-top:-40px;}
      16%  {margin-top:-40px;}
      20%  {margin-top:-80px;}
      24%  {margin-top:-80px;}
      28%  {margin-top:-120px;}
      32%  {margin-top:-120px;}
      36%  {margin-top:-160px;}
      40%  {margin-top:-160px;}
      44%  {margin-top:-200px;}
      48%  {margin-top:-200px;}
      52%  {margin-top:-240px;}
      56%  {margin-top:-240px;}
      60%  {margin-top:-200px;}
      64%  {margin-top:-200px;}
      68%  {margin-top:-160px;}
      72%  {margin-top:-160px;}
      76%  {margin-top:-120px;}
      80%  {margin-top:-120px;}
      84%  {margin-top:-80px;}
      88%  {margin-top:-80px;}
      92%  {margin-top:-40px;}
      96%  {margin-top:-40px;}
      100% {margin-top:0;}
    }

    Bài viết đơn giản, nhưng có rất nhiều đoạn css sẽ giúp các bạn hiểu rõ cách sử dụng CSS3 cũng như hiệu ứng động mà nó mang lại. Mình mong là các bạn sẽ học thêm được nhiều qua bài viết này.
    Câu trả lời

    - Bạn đã sẵn sàng thảo luận về chủ đề này. Hãy bấm "Viết bình luận", bạn có thể lựa chọn sử dụng tài khoản Facebook hoặc Google++

    - Vì sự phát triển của cộng đồng CNTT/CNPM tại Việt Nam!

    Unknown user
    No responses yet

    Ảnh và Demo

    hieu-ung-chu-dong-text-animation-doc-dao-voi-css3.jpg




    Download demo: http://www.mediafire.com/download/j571102zc71uzwa/hoidapit.com.vn-text-animation-css3.zip
    Pass giải nén : hoidapit.com.vn
    0 Lượt thích

    Từ khóa tìm kiếm

    Câu trả lời mới nhất

    Tin tuyển dụng