Tất cả bài viết | CSS3

Tạo hiệu ứng Slideup & Slidedown cho Icon bằng CSS3

Hướng dẫn tạo hiệu ứng Slideup & Slidedown cho Icon bằng CSS3

Phần định nghĩa CSS

div#demo {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}

  #demo a {
      display: block;
      float: left;
      margin: 0 10px 10px 0;
    }
    #demo a {
      overflow: hidden;
      height: 64px;
      -webkit-transition: all linear 200ms;
      -moz-transition: all linear 200ms;
      -o-transition: all linear 200ms;
      transition: all linear 200ms;
    }
    #demo a img {
      border: none;
      display: block;
    }
    #demo a img:first-child {
      margin-top: 0;
      -webkit-transition: all linear 200ms;
      -moz-transition: all linear 200ms;
      -o-transition: all linear 200ms;
      transition: all linear 200ms;
    }
    #demo a:hover img:first-child {
      margin-top: -64px;
    }
    #demo a:hover {
      -moz-box-shadow: 0 0 6px #000000;
      -webkit-box-shadow: 0 0 6px #000000;
      box-shadow: 0 0 6px #000000;
    }

Phần định nghĩa HTML