Tạo hiệu ứng động giống Ubuntu Phone unlock với CSS

Tiếp tục giới thiệu tới các bạn các hiệu ứng động được làm từ CSS3. Hôm nay, trong bài viết này, chúng ta sẽ tạo hiệu ứng động giống chữ “unlock” trong Ubuntu Phone. Và với những dòng lệnh CSS3 sau đây, các bạn có thể áp dụng vào những mẫu thiết kế web của mình, hay tự sáng tạo theo cách của các bạn.

Xem Demo | Download

HTML

Đầu tiên, chúng ta cần có khung chuẩn html như sau :

<img class="img absolute" src="ubuntu.jpg" awidth="1050">
  <div class="container absolute">
    <div class="unlock fsize absolute">Unlock</div>
    <div class="leftarrow absolute fsize">(</div>
    <div class="leftarrow2 absolute fsize">(</div>
    <div class="rightarrow absolute fsize">)</div>
    <div class="rightarrow2 absolute fsize">)</div>
  </div>

CSS

Và đây là toàn bộ đoạn css giúp các bạn tạo hiệu ứng động cho chữ “unlock”

.img{
  margin-top:-100px;
  top:0;
  left:0;
}
.container{
  top:430px;
  margin-left:240px;
  color:white;
  opacity:0.4;
  font-family:Ubuntu;
}
.fsize{
    font-size:30px;
    font-weight:100;
}
.absolute{
  position:absolute;
}
.unlock{
  top:10px;
  margin-left:230px;
  font-size:30px;
}
.leftarrow{
  top:8px;
  -webkit-animation: movefadeleft1 2s;
  -webkit-animation-iteration-count: infinite;
}
.leftarrow2{
  top:8px;
  -webkit-animation: movefadeleft2 2s;
  -webkit-animation-iteration-count: infinite;
}
.rightarrow{
  top:8px;
  -webkit-animation: movefaderight1 2s;
  -webkit-animation-iteration-count: infinite;
}
.rightarrow2{
  top:8px;
  -webkit-animation: movefaderight2 2s;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes movefaderight1 {
    0%   {left:360px;opacity:1}
    20% {left:460px;opacity:0;}
    90% {left:460px;opacity:0;}
   100% {left:360px; opacity:0;}
}
@-webkit-keyframes movefaderight2 {
    0%   {left:360px;opacity:0;}
    30%  {left:360px;opacity:1;}
    50% {left:460px; opacity:0;}
   100% {left:460px;opacity:0;}
}
@-webkit-keyframes movefadeleft1 {
    0%   {left:180px;opacity:1;}
    20% {left:100px;opacity:0;}
    90% {left:100px;opacity:0;}
   100% {left:180px; opacity:0;}
}
@-webkit-keyframes movefadeleft2 {
    0%   {left:180px;opacity:0;}
    30%  {left:180px;opacity:1;}
    50% {left:100px;opacity:0;}
   100% {left:100px;opacity:0;}

}

Vậy là xong, hy vọng trong bài viết ngắn ngủi này sẽ giúp ích rất nhiều cho các bạn học về CSS3.

Chuyên Mục: Css

Bài viết được đăng bởi webmaster