Mình mới sưu tầm được một số css ảnh khá hay, có thể bạn sẽ cần dùng đến, tùy vào óc sáng tọa của bạn, thử nha! :phunu:
Vì mình không đưa trực tiếp demo vào bài viết được nên mình sẽ làm demo sau: Không các bạn có thể tự cho css vào và kiểm tra cũng đc :noidan:
Mẫu 1:
Code:
Css:
Mẫu 2:
Code:
Mẫu 3:
Loại 1:
Code:
Loại 2:
Code:
Mẫu 4:
Code:
Mẫu 5:
Code:
Mẫu 6:
Code:
Vì mình không đưa trực tiếp demo vào bài viết được nên mình sẽ làm demo sau: Không các bạn có thể tự cho css vào và kiểm tra cũng đc :noidan:
Mẫu 1:
Code:
- Code:
<div id="cf">
<img class="bottom" src="http://css3.bradshawenterprises.com/images/Summit.jpg" />
<img class="top" src="http://css3.bradshawenterprises.com/images/Stones.jpg" />
</div>
Css:
- Code:
#cf {position:relative;height:281px;width:450px; margin:0 auto; }#cf img {position:absolute;left:0; -webkit-transition: opacity 1s ease-in-out;-moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out;-ms-transition: opacity 1s ease-in-out;transition: opacity 1s ease-in-out;}#cf img.top:hover {opacity:0;}
Mẫu 2:
Code:
- Code:
<div id="cf2" class="shadow">
<img class="bottom" src="http://css3.bradshawenterprises.com/images/Summit.jpg" />
<img class="top" src="http://css3.bradshawenterprises.com/images/Stones.jpg" />
</div>
<p id="cf_onclick">Click vào ảnh</p>
- Code:
#cf2 {position:relative;height:281px;width:450px;margin:0 auto;}#cf2 img {position:absolute;left:0; -webkit-transition: opacity 1s ease-in-out;-moz-transition: opacity 1s ease-in-out;-o-transition: opacity 1s ease-in-out;-ms-transition: opacity 1s ease-in-out;transition: opacity 1s ease-in-out;}#cf2 img.transparent {opacity:0;}#cf_onclick {cursor:pointer;}
- Code:
<script>
$(document).ready(function() {
$("#cf_onclick, #cf2 img.top").click(function() {
$("#cf2 img.top").toggleClass("transparent");
});
});
</script>
Mẫu 3:
Loại 1:
Code:
- Code:
<div id="cf3" class="shadow">
<img class="bottom" src="http://css3.bradshawenterprises.com/images/Summit.jpg" />
<img class="top" src="http://css3.bradshawenterprises.com/images/Stones.jpg" />
</div>
- Code:
@keyframes cf3FadeInOut {0% {opacity:1;}45% {opacity:1;}55% { opacity:0;}100% {opacity:0;}}#cf3 img.top { animation-name: cf3FadeInOut;animation-timing-function: ease-in-out;animation-iteration-count: infinite;animation-duration: 10s; animation-direction: alternate;}
Loại 2:
Code:
- Code:
<div id="cf4a" class="shadow">
<img src="http://css3.bradshawenterprises.com/images/Stones.jpg">
<img src="http://css3.bradshawenterprises.com/images/Summit.jpg">
<img src="http://css3.bradshawenterprises.com/images/Clown Fish.jpg">
<img src="http://css3.bradshawenterprises.com/images/Cirques.jpg">
</div>
- Code:
@keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#cf4a img:nth-of-type(1) {
animation-delay: 6s;
}
#cf4a img:nth-of-type(2) {
animation-delay: 4s;
}
#cf4a img:nth-of-type(3) {
animation-delay: 2s;
}
#cf4a img:nth-of-type(4) {
animation-delay: 0;
}
Mẫu 4:
Code:
- Code:
<div id="cf4" class="hover">
<img class="bottom shadow" src="http://css3.bradshawenterprises.com/images/Stones.jpg">
<img class="top shadow" src="http://css3.bradshawenterprises.com/images/Summit.jpg">
</div>
- Code:
#cf4 {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf4 img {
position:absolute;
left:0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#cf4 img.top {
-webkit-transform:scale(0,0);
-moz-transform:scale(0,0);
-o-transform:scale(0,0);
-ms-transform:scale(0,0);
transform:scale(0,0);
opacity:0;
}
#cf4:hover img.top, #cf4.hover_effect img.top {
opacity:1;
-webkit-transform:scale(1,1);
-webkit-transform-origin: top right;
-moz-transform:scale(1,1);
-moz-transform-origin: top right;
-o-transform:scale(1,1);
-o-transform-origin: top right;
-ms-transform:scale(1,1);
-ms-transform-origin: top right;
transform:scale(1,1);
transform-origin: top right;
}
#cf4:hover img.bottom, #cf4.hover_effect img.bottom {
-webkit-transform:scale(0,0);
-webkit-transform-origin: bottom left;
-moz-transform:scale(0,0);
-moz-transform-origin: bottom left;
-o-transform:scale(0,0);
-o-transform-origin: bottom left;
-ms-transform:scale(0,0);
-ms-transform-origin: bottom left;
transform:scale(0,0);
transform-origin: bottom left;
}
Mẫu 5:
Code:
- Code:
<div id="cf5" class="hover">
<img class="bottom shadow" src="http://css3.bradshawenterprises.com/images/Stones.jpg">
<img class="top shadow" src="http://css3.bradshawenterprises.com/images/Summit.jpg">
</div>
- Code:
#cf5 {
position:relative;
height:281px;
width:450px;
margin:10px auto;
}
#cf5 img {
position:absolute;
left:0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#cf5 img.top {
-webkit-transform:scale(1,0);
-moz-transform:scale(1,0);
-o-transform:scale(1,0);
-ms-transform:scale(1,0);
transform:scale(1,0);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity:0;
}
#cf5:hover img.top, #cf5.hover_effect img.top {
opacity:1;
-webkit-transform:scale(1,1);
-moz-transform:scale(1,1);
-o-transform:scale(1,1);
-ms-transform:scale(1,1);
transform:scale(1,1);
}
#cf5:hover img.bottom, #cf5.hover_effect img.bottom {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transform:rotate(360deg) scale(0,0);
-moz-transform:rotate(360deg) scale(0,0);
-o-transform:rotate(360deg) scale(0,0);
-ms-transform:rotate(360deg) scale(0,0);
transform:rotate(360deg) scale(0,0);
}
Mẫu 6:
Code:
- Code:
<div id="cf6_image"></div>
- Code:
#cf6_image {
margin:0 auto;
width:450px;
height:281px;
-webkit-transition: background-image 1s ease-in-out;
-moz-transition: background-image 1s ease-in-out;
-o-transition: background-image 1s ease-in-out;
-ms-transition: background-image 1s ease-in-out;
transition: background-image 1s ease-in-out;
background-image:url("http://css3.bradshawenterprises.com/images/Stones.jpg");
}
#cf6_image:hover, #cf6_image.hover_effect {
background-image:url("http://css3.bradshawenterprises.com/images/Summit.jpg");
}