<!doctype html>
<html lang="zh" class="no-js">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>14款CSS3卡片堆叠切换动画特效 - 网页模板</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.3.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr-custom.js"></script>
</head>
<body>
<div class="container">
<div class="content color-1">
<h2 class="content__title">Yuda</h2>
<ul id="stack_yuda" class="stack stack--yuda">
<li class="stack__item"><img src="img/1.png" alt="Tree 1" /></li>
<li class="stack__item"><img src="img/2.png" alt="Tree 2" /></li>
<li class="stack__item"><img src="img/3.png" alt="Tree 3" /></li>
<li class="stack__item"><img src="img/4.png" alt="Tree 4" /></li>
<li class="stack__item"><img src="img/5.png" alt="Tree 5" /></li>
<li class="stack__item"><img src="img/6.png" alt="Tree 6" /></li>
</ul>
<div class="controls">
<button class="button button--sonar button--reject" data-stack="stack_yuda"><i class="fa fa-times"></i><span class="text-hidden">Reject</span></button>
<button class="button button--sonar button--accept" data-stack="stack_yuda"><i class="fa fa-check"></i><span class="text-hidden">Accept</span></button>
</div>
</div>
<div class="content color-2">
<h2 class="content__title">Krisna</h2>
<ul id="stack_krisna" class="stack stack--krisna">
<li class="stack__item"><img src="img/3.png" alt="Tree 3" /></li>
<li class="stack__item"><img src="img/4.png" alt="Tree 4" /></li>
<li class="stack__item"><img src="img/5.png" alt="Tree 5" /></li>
<li class="stack__item"><img src="img/6.png" alt="Tree 6" /></li>
<li class="stack__item"><img src="img/1.png" alt="Tree 1" /></li>
<li class="stack__item"><img src="img/2.png" alt="Tree 2" /></li>
</ul>
<div class="controls">
<button class="button button--sonar button--reject" data-stack="stack_krisna"><i class="fa fa-times"></i><span class="text-hidden">Reject</span></button>
<button class="button button--sonar button--accept" data-stack="stack_krisna"><i class="fa fa-check"></i><span class="text-hidden">Accept</span></button>
</div>
</div>
<div class="content color-3">
<h2 class="content__title">Wangi</h2>
<ul id="stack_wangi" class="stack stack--wangi">
<li class="stack__item"><img src="img/1.png" alt="Tree 1" /></li>
<li class="stack__item"><img src="img/3.png" alt="Tree 3" /></li>
<li class="stack__item"><img src="img/2.png" alt="Tree 2" /></li>
<li class="stack__item"><img src="img/4.png" alt="Tree 4" /></li>
<li class="stack__item"><img src="img/7.png" alt="Tree 7" /></li>
<li class="stack__item"><img src="img/6.png" alt="Tree 6" /></li>
</ul>
<div class="controls">
<button class="button button--sonar button--reject" data-stack="stack_wangi"><i class="fa fa-times"></i><span class="text-hidden">Reject</span></button>
<button class="button button--sonar button--accept" data-stack="stack_wangi"><i class="fa fa-check"></i><span class="text-hidden">Accept</span></button>
</div>
</div>
<div class="content color-4">
<h2 class="content__title">Wira</h2>
<ul id="stack_wira" class="stack stack--wira">
<li class="stack__item"><img src="img/7.png" alt="Tree 7" /></li>
<li class="stack__item"><img src="img/6.png" alt="Tree 6" /></li>
<li class="stack__item"><img src="img/1.png" alt="Tree 1" /></li>
<li class="stack__item"><img src="img/2.png" alt="Tree 2" /></li>
<li class="stack__item"><img src="img/3.png" alt="Tree 3" /></li>
<li class="stack__item"><img src="img/4.png" alt="Tree 4" /></li>
</ul>
<div class="controls">
<button class="button button--sonar button--reject" data-stack="stack_wira"><i class="fa fa-times"></i><span class="text-hidden">Reject</span></button>
<button class="button button--sonar button--accept" data-stack="stack_wira"><i class="fa fa-check"></i><span class="text-hidden">Accept</span></button>
</div>
</div>
<div class="content color-5">
<h2 class="content__title">Slamet</h2>
<div class="counter" id="counter">
<svg width="40" height="40" viewBox="0 0 60 60">
<path d="M55.215 8.397c-0.336-1.32-1.968-2.397-3.63-2.397h-43.17c-1.665 0-3.297 1.077-3.63 2.397l-0.603 3.603h51.633l-0.6-3.603zM58.236 15h-56.475c-1.026 0-1.827 0.882-1.731 1.905l2.769 35.007c0.114 1.182 1.11 2.088 2.298 2.088h49.803c1.191 0 2.184-0.906 2.298-2.088l2.769-35.007c0.099-1.023-0.705-1.905-1.731-1.905zM37.314 25.125c1.554 0 2.814 1.26 2.814 2.814s-1.26 2.814-2.814 2.814-2.814-1.263-2.814-2.817c0-1.551 1.26-2.811 2.814-2.811zM16.5 42l7.458-17.142 8.481 13.728 7.272-3.612 3.789 7.026h-27z"></path>
</svg>
<span class="text-hidden">Saved Images</span>
<span class="counter__number">0</span>
</div>
<ul id="stack_slamet" class="stack stack--slamet">
<li class="stack__item"><img src="img/2.png" alt="Tree 2" /></li>
<li class="stack__item"><img src="img/3.png" alt="Tree 3" /></li>
<li class="stack__item"><img src="img/4.png" alt="Tree 4" /></li>
<li class="stack__item"><img src="img/5.png" alt="Tree 5" /></li>
<li class="stack__item"><img src="img/6.png" alt="Tree 6" /></li>
<li class="stack__item"><img src="img/1.png" alt="Tree 1" /></li>
</ul>
<div class="controls">
<button class="button button--sonar button--reject" data-stack="stack_slamet"><i class="fa fa-times"></i><span class="text-hidden">Reject</span></button>
<button class="button button--sonar button--accept" data-stack="stack_slamet"><i class="fa fa-check"></i><span class="text-hidden">Accept</span></button>
</div>
</div>
<div class="content color-6">
<h2 class="content__title">Utari</h2>
<ul id="stack_utari" class="stack stack--utari">
<li class="stack__item"><img src="img/4.png" alt="Tree 4" /></li>
<li class="stack__item"><img src="img/5.png" alt="Tree 5" /></li>
<li class="stack__item"><img src="img/6.png" alt="Tree 6" /></li>
<li class="stack__item"><img src="img/1.png" alt="Tree 1" /></li>
<li class="stack__item"><img src="img/2.png" alt="Tree 2" /></li>
<li class="stack__item"><img src="img/3.png" alt="Tree 3" /></li>
</ul>
<div class="controls">
<button class="button button--sonar button--reject" data-stack="stack_utari"><i class="fa fa-times"></i><span class="text-hidden">Reject</span></button>
<button class="button button--sonar button--accept" data-stack="stack_utari"><i class="fa fa-check"></i><span class="text-hidden">Accept</span></button>
</div>
</div>
<div class="content color-7">
<h2 class="content__title">Cinta</h2>
<ul id="stack_cinta" class="stack stack--cinta">
<li class="stack__item"><img src="img/6.png" alt="Tree 6" /></li>
<li class="stack__item"><img src="img/1.png" alt="Tree 1" /></li>
<li class="stack__item"><img src="img/3.png" alt="Tree 3" /></li>
<li class="stack__item"><img src="img/2.png" alt="Tree 2" /></li>
<li class="stack__item"><img src="img/4.png" alt="Tree 4" /></li>
<li class="stack__item"><img src="img/7.png" alt="Tree 7" /></li>
</ul>
<div class="controls">
<button class="button button--sonar button--reject" data-stack="stack_cinta"><i class="fa fa-times"></i><span class="text-hidden">Reject</span></button>
<button class="button button--sonar button--accept" data-stack="stack_cinta"><i class="fa fa-check"></i><span class="text-hidden">Accept</span></button>
</div>
</div>
<div class="content color-8">
<h2 class="content__title">Eka</h2>
<ul id="stack_eka" class="stack stack--eka">
<li class="stack__item"><img src="img/1.png" alt="Tree 1" /></li>
<li class="st
14款CSS3卡片堆叠切换动画特效.zip
版权申诉
11 浏览量
2022-11-16
21:21:00
上传
评论
收藏 508KB ZIP 举报
14款CSS3卡片堆叠切换动画特效.zip （29个子文件） 
14款CSS3卡片堆叠切换动画特效 jiaoben3764 css 
default.css 6KB normalize.css 2KB component.css 27KB img 
5.png 3KB 1.png 3KB 6.png 4KB 2.png 3KB 7.png 3KB 4.png 4KB 8.png 3KB 3.png 3KB fonts icomoon.woff 1KB
icomoon.svg 2KB font-awesome-4.3.0 css font-awesome.min.css 23KB font-awesome.css 28KB fonts fontawesome-webfont.eot 59KB fontawesome-webfont.woff 70KB FontAwesome.otf 92KB fontawesome-webfont.svg 306KB fontawesome-webfont.woff2 55KB fontawesome-webfont.ttf 119KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 29KB js classie.js 2KB modernizr-custom.js 5KB main.js 8KB dynamics.min.js 25KB
14款CSS3卡片堆叠切换动画特效.jpg 30KB资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
最新资源
- HTML5小游戏【阳光高尔夫球-优秀H5小游戏合集】游戏源码分享下载 - golfblast.zip
- 二层半独栋别墅结构水电施工图结构施工图.dwg
- 数据结构，常用的数据结构
- 某三层别墅建筑施工图编号D061-三层-12.54&12.24米-施工图.dwg
- 某三层别墅施工图带效果图D060-三层-23.04&15.39米- 施工图.dwg
- 流水灯，8个灯，不同花样
- TikTokPlugin-1.39-for-rezvorck.apk
- 某三层豪华型别墅建筑施工图D059-三层-27.00&16.00米- 施工图.dwg
- 11111111111111111111
- process-data-final.c
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
