Tạo hiệu ứng ma trận bằng CSS3

Cập nhật: Lượt xem: 297 [ Css ]

Trong bài này, Tôi xin giới thiệu một sản phẩm CSS3 Animation Mô phỏng làm màn hình ma trận đẹp mắt bằng CSS và HTML thay vì mọi người vẫn sử dụng ảnh .gif cho một sản phẩm tương tự, ở đây chung ta có thể thay đổi được text hiển thị tuỳ ý.

Tạo hiệu ứng ma trận bằng CSS3

HTML

<div id="matrix">
    <div class="d1 c1 de" style="left:5px;">q8w<span>1</span>Lập trình web<span>j</span>zxc</div>
    <div class="d3 f1" style="left:30px;">zbc xyz cai gi cung dc<span>q</span></div>
    <div class="d1 f2 c1" style="left:60px;">tr<span>z</span>ews0yfkldf4cvgbhj<span>n</span></div>
    <div class="d2 f1" style="left:80px;">sodhr49wh<span>u</span>ta la sieu nhan</div>
    <div class="d4 c3 de" style="left:110px;">fue73<span>s</span>jf0tbkxpowf<span>v</span>n</div>
    <div class="d2 c1" style="left:140px;">sjdhfgueiwfgivecjowxkwpkpo<span>m</span>vcjoeuur</div>
    <div class="d3 f2 c1" style="left:170px;">tr<span>z</span>ahihi hhaadsadadas sdaasdadsdas</div>
    <div class="d1 c1" style="left:185px;">thgp<span>m</span>srthdvytfv09876t<span>q</span>fgv</div>
    <div class="d3 de" style="left:200px;">dhiwgfdue<span>s</span>rjm</div>
    <div class="d4 f1" style="left:250px;">osadh<span>a</span>rshdyfeujm</div>
    <div class="d2 de" style="left:290px;">fwedjsdjh<span>l</span>gmrghftdercwewergjm</div>
    <div class="d3 f2" style="left:310px;">sodhr49wh<span>a</span>yfbsrnlepjh</div>
    <div class="d1 f1" style="left:350px;">p00oi<span>0</span>nf5sujhgdgbrjs36gdr<span>g</span>jpo</div>
    <div class="d4 c1" style="left:390px;">h68kgdetklbf<span>b</span>eswk</div>
    <div class="d2 de" style="left:410px;">dfrttvb<span>s</span>cfsr</div>
    <div class="d1 c1 de" style="left:430px;">sgfy<span>b</span>0hfrese<span>4</span>kc</div>
</div>

Phần này các bạn có thể thay đổi phần text tuỳ ý theo sở thích của bản thân

Animation

// Làm mờ đần đều
	@-webkit-keyframes fade{
		    0%   { opacity: 1; }
		    100% { opacity: 0; }
		}
        // Chuyển Động
		@-webkit-keyframes fall{
		   	from {top: -250px;}
			to 	{top: 300px;}
		}
   } 
   
  // Tạo thời gian chuyển động của các phần từ
     .d1{
       -webkit-animation-duration: 4s;
     }

  .d2{
    -webkit-animation-duration: 6s;
  }
  .d3{
    -webkit-animation-duration: 8s;
  }
  .d4{
    -webkit-animation-duration: 10s;
  }
  .de{	
    -webkit-animation-delay: 3s;
  }

Phần thời gian các bạn sẽ có thể thay đổi theo ý muốn và mở rộng thêm các phần tương tự để đa dạng phiên bản matrix của mình

Css Cho phần Chuyển Động

#matrix div{
  /* writing-mode: tb-rl; - ughh. doesn't work */
  position: absolute;	
  top: 0;
  /* arrearance */
  -webkit-transform-origin: 0%;
    -webkit-transform: rotate(90deg); 

  /* animation */
  -webkit-animation-name: fall, fade;			
  -webkit-animation-iteration-count: infinite; /* use 0 to infinite */
  -webkit-animation-direction: normal; /* default is normal. use 'alternate' to reverse direction */
  -webkit-animation-timing-function: ease-out;
}

Css Layout

// Tạo Giao diện chung cho khối Matrix
#matrix{
			margin: 1em auto;
			width: 450px;
			height: 288px;
			overflow: hidden;
			background: #000;
			background-image: -webkit-gradient(linear, 0% 90%, 0% 100%, from(rgba(0, 255, 0, 0)), to(rgba(0, 255, 0, 0.1)));
			color: rgba(0, 255, 0, .7);
			text-shadow: rgba(255, 255, 255, .8) 0px 0px 4px;
			position: relative;	
		}
    // Tạo Giao diện các phần tử con bên trong
    #matrix span{
        color: rgb(0, 255, 0);
        text-shadow: rgb(255, 255, 255) 0px 0px 5px;
    }
    .f1{
        font-size: 1.2em;
    }
    .f2{
        font-size: .9em;
    }

Chúc các bạn thành công!