<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css3高度灵活的模拟扑克牌切换图片效果</title>
<link rel="stylesheet" href="css/kort.css">
</head>
<body>
<h2>Default</h2>
<div class="thumb kort">
<img src="images/lanren1.jpg" width="200" height="200">
<img src="images/lanren2.jpg" width="200" height="200">
<img src="images/lanren3.jpg" width="200" height="200">
<img src="images/lanren4.jpg" width="200" height="200">
<img src="images/lanren5.jpg" width="200" height="200">
<img src="images/lanren6.jpg" width="200" height="200">
<img src="images/lanren7.jpg" width="200" height="200">
<img src="images/lanren8.jpg" width="200" height="200">
<img src="images/lanren9.jpg" width="200" height="200">
</div>
<h2>Concave</h2>
<div class="thumb kort concave">
<img src="images/lanren1.jpg" width="200" height="200">
<img src="images/lanren2.jpg" width="200" height="200">
<img src="images/lanren3.jpg" width="200" height="200">
<img src="images/lanren4.jpg" width="200" height="200">
<img src="images/lanren5.jpg" width="200" height="200">
<img src="images/lanren6.jpg" width="200" height="200">
<img src="images/lanren7.jpg" width="200" height="200">
<img src="images/lanren8.jpg" width="200" height="200">
<img src="images/lanren9.jpg" width="200" height="200">
</div>
<h2>Stack</h2>
<div class="thumb kort stack">
<img src="images/lanren1.jpg" width="200" height="200">
<img src="images/lanren2.jpg" width="200" height="200">
<img src="images/lanren3.jpg" width="200" height="200">
<img src="images/lanren4.jpg" width="200" height="200">
<img src="images/lanren5.jpg" width="200" height="200">
<img src="images/lanren6.jpg" width="200" height="200">
<img src="images/lanren7.jpg" width="200" height="200">
<img src="images/lanren8.jpg" width="200" height="200">
<img src="images/lanren9.jpg" width="200" height="200">
</div>
<script src="js/kort.js"></script>
<script>
// FF OS X animates this at 3-4 FPS when there are box-shadows
// on the images, hence the hack... Ugh :/
if( navigator.userAgent.match( /firefox/gi ) ) {
[].slice.call( document.querySelectorAll( '.thumb img' ) ).forEach(function( el ) { el.style.boxShadow = 'none'; });
}
</script>
</body>
</html>
css3高度灵活的模拟扑克牌切换图片效果.zip
版权申诉
96 浏览量
2023-09-25
14:25:43
上传
评论
收藏 124KB ZIP 举报
css3高度灵活的模拟扑克牌切换图片效果.zip （12个子文件） 
js 
kort.js 4KB css kort.css 4KB
index.html 2KB images 
lanren4.jpg 15KB lanren3.jpg 14KB lanren9.jpg 11KB lanren7.jpg 17KB lanren8.jpg 12KB lanren2.jpg 12KB lanren6.jpg 13KB lanren1.jpg 12KB lanren5.jpg 18KB资源评论
