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

Tạo hiệu ứng Fadein và Fadeout cho Icon bằng CSS3

Hướng dẫn cách tạo hiệu ứng Fadein và Fadeout 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 {  
width: 64px;  
height: 64px;  
position: relative;  
-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;  
filter: alpha(opacity=0);  
opacity: 0;  
position: absolute;  
top: 0;  
-webkit-transition: all linear 200ms;  
-moz-transition: all linear 200ms;  
-o-transition: all linear 200ms;  
transition: all linear 200ms;
}

#demo a img:first-child,
#demo a:hover img:first-child + img {  opacity: 1;  filter: alpha(opacity=100);
}

#demo a:hover {  
-webkit-box-shadow: 0 0 6px #000000;  
-moz-box-shadow: 0 0 6px #000000;  
box-shadow: 0 0 6px #000000;
}

Phần định nghĩa HTML