css实现自适应响应式卡片式分类列表效果代码
代码语言:html
所属分类:响应式
代码描述:css实现自适应响应式卡片式分类列表效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html lang="zh" class="no-js"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> html * { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } *,*:after,*:before { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } body { font-size:100%; font-family:"Ubuntu",sans-serif; color:#333; background-color:#ebe9d7; } a { color:#383838; text-decoration:none; } img { max-width:100%; } /* -------------------------------- Modules - reusable parts of our design-------------------------------- */.cd-container { width:90%; max-width:1200px; margin:0 auto; } .cd-container::after { /* clearfix */ content:''; display:table; clear:both; } /* -------------------------------- Main components -------------------------------- */.cd-gallery-container { margin:2em auto; } @media only screen and (min-width:1200px) { .cd-gallery-container { margin:4em auto; } }.cd-filter { position:relative; height:40px; width:150px; margin:0 auto; cursor:pointer; z-index:10; } .cd-filter::after { /* small arrow icon */ content:''; position:absolute; right:14px; top:50%; bottom:auto; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); display:inline-block; width:16px; height:16px; background:url("//repo.bfw.wiki/bfwrepo/images/list/icon-small-arrow.svg") no-repeat center center; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; pointer-events:none; } .cd-filter ul { position:absolute; top:0; left:0; background:#FFF; border-radius:0.25em; box-shadow:0 1px 2px rgba(0,0,0,0.1); } .cd-filter li { display:none; } .cd-filter li:first-child { display:block; /* this way the placehodler is alway visible */ } .cd-filter li:last-child a { border-radius:0 0 .25em .25em; } .cd-filter a { display:block; height:40px; width:150px; line-height:40px; padding-left:14px; font-size:14px; font-size:0.875rem; font-weight:700; text-transform:uppercase; } .cd-filter a.selected { background:#1a7179; color:#FFF; } .no-touch .cd-filter a.selected:hover { background:#1f858e; } .cd-filter.is-open::after { -webkit-transform:translateY(-50%) rotate(-180deg); -moz-transform:translateY(-50%) rotate(-180deg); -ms-transform:translateY(-50%) rotate(-180deg); -o-transform:translateY(-50%) rotate(-180deg); transform:translateY(-50%) rotate(-180deg); /* small arrow rotation */ } .cd-filter.is-open ul li { display:block; } .cd-filter.is-open .placeholder a { opacity:.4; /* reduces the opacity of the placeholder on mobile when the menu is open */ } @media only screen and (min-width:768px) { .cd-filter { height:auto; width:auto; } .cd-filter::after { display:none; } .cd-filter ul { background:transparent; position:static; box-shadow:none; text-align:center; } .cd-filter li { display:inline-block; margin:0 .4em; } .cd-filter li:first-child { display:inline-block; } .cd-filter li.placeholder { display:none !important; } .cd-filter li.placeholder a { display:none; } .cd-filter a { display:inline-block; padding:1em 2em; height:auto; width:auto; line-height:1; border-radius:50em !important; } .no-touch .cd-filter a:hover { box-shadow:inset 0 0 0 2px rgba(56,56,56,0.2); } .cd-filter a.selected:hover { box-shadow:none; /* removes the hover effect from the selected item */ } .cd-filter.is-open ul li { display:inline-block; } }/* -------------------------------- xgallery -------------------------------- */.cd-gallery { margin-top:2em; position:relative; z-index:5; } .cd-gallery >li { position:relative; margin-bottom:1em; } .cd-gallery .cd-item-wrapper { /* this is the item that rotates */ position:relative; } .touch .cd-gallery .cd-item-wrapper { /* fix a bug on IOS8 - rotating elements dissapear*/ -webkit-perspective:800px; -moz-perspective:800px; perspective:800px; } .cd-gallery .cd-item-wrapper.is-switched .is-visible { -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -ms-transform:rotateY(180deg); -o-transform:rotateY(180deg); transform:rotateY(180deg); -webkit-animation:cd-rotate 0.5s; -moz-animation:cd-rotate 0.5s; animation:cd-rotate 0.5s; } .cd-gallery .cd-item-wrapper.is-switched .is-hidden { -webkit-transform:rotateY(0); -moz-transform:rotateY(0); -ms-transform:rotateY(0); -o-transform:rotateY(0); transform:rotateY(0); -webkit-animation:cd-rotate-inverse 0.5s; -moz-animation:cd-rotate-inverse 0.5s; animation:cd-rotate-inverse 0.5s; opacity:0; } .cd-gallery .cd-item-wrapper.is-switched .is-selected { opacity:1; } .cd-gallery .cd-item-wrapper >li { -webkit-backface-visibility:hidden; backface-visibility:hidden; border-radius:0.25em; box-shadow:0 1px 3px rgba(0,0,0,0.1); } .cd-gallery .cd-item-wrapper >li img { display:block; width:100%; border-radius:0.25em; } .cd-gallery li.is-visible { /* the front item,visible by default */ position:relative; z-index:5; } .cd-gallery li.is-hidden { /* the hidden items,right behind the front one */ position:absolute; top:0; left:0; height:100%; width:100%; z-index:1; -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -ms-transform:rotateY(180deg); -o-transform:rotateY(180deg); transform:rotateY(180deg); } .cd-gallery li.is-selected { /* the next item that will be visible */ z-index:3 !important; } @media only screen and (min-width:480px) { .cd-gallery >li { width:48%; float:left; margin-right:4%; margin-bottom:1.2em; } .cd-gallery >li:nth-of-type(2n) { margin-right:0; } }@media only screen and (min-width:768px) { .cd-gallery >li { width:22%; float:left; } .cd-gallery >li:nth-of-type(2n) { margin-right:4%; } .cd-gallery >li:nth-of-type(4n) { margin-right:0; } }@media only screen and (min-width:1200px) { .cd-gallery { margin-top:4em; } }/* -------------------------------- xkeyframes -------------------------------- */@-webkit-keyframes cd-rotate { 0% { -webkit-transform:perspective(800px) rotateY(0); } 70% { -webkit-transform:perspective(800px) rotateY(200deg); /* this creates the bounce effect */ } 100% { -webkit-transform:perspective(800px) rotateY(180deg); } }@-moz-keyframes cd-rotate { 0% { -moz-transform:perspective(800px) rotateY(0); } 70% { -moz-transform:perspective(800px) rotateY(200deg); /* this creates the bounce effect */ } 100% { -moz-transform:perspective(800px) rotateY(180deg); } }@keyframes cd-rotate { 0% { -webkit-transform:perspective(800px) rotateY(0); -moz-transform:perspective(800px) rotateY(0); -ms-transform:perspective(800px) rotateY(0); -o-transform:perspective(800px) rotateY(0); transform:perspective(800px) rotateY(0); } 70% { -webkit-transform:perspective(800px) rotateY(200deg); -moz-transform:perspective(800px) rotateY(200deg); -ms-transform:perspective(800px) rotateY(200deg); -o-transform:perspective(800px) rotateY(200deg); transform:perspective(800px) rotateY(200deg); /* this creates the bounce eff.........完整代码请登录后点击上方下载按钮下载查看
网友评论0