CSS3炫酷堆叠卡片切换动画特效源码14种.zip资源-CSDN文库

共28个文件

png：8个

css：5个

js：4个

版权申诉

css3

196 浏览量 2022-11-02 23:48:19 上传评论收藏 493KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

CSS3炫酷堆叠卡片切换动画特效源码 14种.zip （28个子文件）

132686934725847715

CSS3_ddkqh

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

classie.js 2KB

modernizr-custom.js 5KB

main.js 8KB

dynamics.min.js 25KB

<!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"> <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="stack__item"><img src="img/2.png" alt="Tree 2" /></li> <li class="

评论收藏

内容反馈

版权申诉