html卡片左右切换,HTML5 很酷的系统设置卡片（可扩展、可翻转）

CSS

语言：

CSSSCSS

确定

html {

box-sizing: border-box;

font-size: 10px;

}

*,

*:before,

*:after {

box-sizing: inherit;

position: relative;

tap-highlight-color: transparent;

}

html,

body {

height: 100%;

}

body {

color: #3b3b3b;

font-size: 1.618rem;

}

.boxed {

margin: 0 auto;

margin-bottom: 5rem;

max-width: 90rem;

min-height: 50rem;

box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.15), 0 -0.5rem 1rem 0 rgba(0, 0, 0, 0.033);

}

.padded {

padding: 2.5rem;

}

.padded--slightly {

padding: 1.618rem;

}

.centered-container {

position: absolute;

top: 50%;

left: 0;

right: 0;

transform: translateY(-50%);

max-width: 75%;

margin: 0 auto;

text-align: center;

}

.group:after {

content: "";

display: table;

clear: both;

/*

---------------------------------------------------------

| Exploring the Card Metaphor

---------------------------------------------------------

*/

/* Like everything, a card's foundation

is built on a few core things...*/

}

body {

font-family: "Roboto Condensed", sans-serif;

background-color: #1b1b1b;

background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/16584/space.jpg");

background-repeat: no-repeat;

background-size: cover;

background-attachment: fixed;

}

.centered-container {

perspective: 1000;

}

.card {

margin: 0 auto;

transform-style: preserve-3d;

/* First things first. It might a good place to start

defining the actual size and shape of a card...

but wait, from where do we start? Are we talking

about the size ratio of a modern playing card? */

/* A card can have rounded corners,

if we think of it as a playing card of

the modern day and age (20th century).

Cards dating earlier than that did rarely

have rounded corners, so that is also a

consideration if we are taking the card

metaphor very strict (or not). The rounded

corner angle is around 3mm in radius, which

gives us a rough estimate of 1.13rem. */

/* To continue in our adventure into 3D space,

an exploration of the card metaphor would not

be complete without the classical rotation all

directions. First off, on the Y-axis. */

/* As we know, cards have two sides to show,

which the digital card should also take into

account. */

/* A card used as a UI element should be able

to reflect this with proper headers, footers,

content areas and so on. */

/* As with all good cards, if we can't do

magic tricks with them, they ain't worth much.

The following section is dedicated to experimental

interactions.*/

transform: translateZ(1px);

/* Refactor this when working with stacks of cards */

/* Misc. */

/* Checkboxes */

transition: all 0.48s cubic-bezier(0.215, 0.61, 0.355, 1);

}

.card.card--modern,

.card {

width: 24rem;

height: 34rem;

}

.card--rounded,

.card,

.card .card__back,

.card .card__front {

border-radius: 1.13rem;

}

.card.card--rotate-horizontally {

transform: rotateY(180deg);

}

.card .card__back,

.card .card__front {

position: absolute;

width: 100%;

height: 100%;

backface-visibility: hidden;

background-color: ghostwhite;

box-shadow: 0 3px 6px 0 rgba(22, 22, 22, 0.75);

}

.card .card__front {

z-index: 2;

}

.card .card__back {

z-index: 1;

transform: rotateY(180deg);

}

.card .card__header,

.card .card__footer {

line-height: 2.75;

height: 4.5rem;

width: 100%;

background-color: #d2d3d5;

}

.card .card__header {

z-index: 10;

border-bottom: 1px solid #999;

/* Headers usually have some extra

tidbits going on, such as titles,

icons and interaction points.*/

box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.33);

}

.card .card__header .header__title {

display: inline-block;

font-size: 1.312rem;

font-weight: 500;

opacity: 0.75;

text-shadow: 0 1px 0 ghostwhite;

}

.card .card__header .header__icon {

position: absolute;

top: 0.5rem;

font-size: 1.412rem;

font-weight: 700;

opacity: 0.5;

cursor: pointer;

transition: opacity;

transition: 0.48s;

}

.card .card__header .header__icon--left {

left: 1.5rem;

}

.card .card__header .header__icon--right {

right: 1.5rem;

}

.card .card__header .header__icon:hover {

opacity: 1;

}

.card .card__footer {

position: absolute;

bottom: 0;

background-color: #d2d3d5;

border-top: 1px solid #999;

box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.33);

}

.card .card__part {

height: 50%;

max-width: 100%;

background-color: inherit;

transition-property: transform, box-shadow;

transition-duration: 0.48s;

}

.card .does-trick--split .card__part {

z-index: 1;

}

.card .does-trick--split .card__part--middle {

z-index: 0;

}

.card .does-trick--split.opened .card__part .card__part-content {

opacity: 0.25;

}

.card .does-trick--split.opened .card__part--upper {

transform: translateY(-50%);

box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);

}

.card .does-trick--split.opened .card__part--lower {

transform: translateY(50%);

box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.15);

}

.card + .card {

position: absolute;

top: -5px;

left: 0;

right: 0;

}

.card + .card:nth-child(even) {

left: -10px;

background-color: silver;

}

.card + .card:nth-child(odd) {

right: -10px;

background-color: slategrey;

}

.card + .card:nth-child(3) {

top: -10px;

}

.card + .card:hover {

animation: aside 0.28s ease-in-out forwards;

}

@keyframes aside {

to {

left: -250px;

}

}

.card .h1,

.card .h2,

.card .h3,

.card .h4,

.card .h5 {

margin-bottom: 1.412rem;

font-weight: 700;

}

.card .h1.divider,

.card .h2.divider,

.card .h3.divider,

.card .h4.divider,

.card .h5.divider {

display: inline-block;

width: 75%;

}

.card .h1.divider:before,

.card .h2.divider:before,

.card .h3.divider:before,

.card .h4.divider:before,

.card .h5.divider:before {

content: "";

position: absolute;

top: 1.15rem;

right: -35%;

width: 55%;

height: 2px;

background-color: rgba(0, 0, 0, 0.1);

z-index: -1;

}

.card .h2 {

font-size: 1.8rem;

}

.card .left-aligned {

text-align: left;

}

.card [data-click-toggle] {

cursor: pointer;

}

.card .button {

padding: 1.618rem;

margin-bottom: 0.809rem;

border: 0;

font-weight: 700;

border-radius: 1.13rem;

outline: none;

transition-property: border-bottom-width, transform;

transition-duration: 0.05s;

}

.card .button--danger {

background-color: #e74c3c;

border-bottom: 3px solid #c0392b;

color: white;

}

.card .button--block {

display: block;

width: 100%;

}

.card .button:hover {

box-shadow: inset 0 100px 0 0 rgba(0, 0, 0, 0.05);

}

.card .button--link {

background-color: transparent;

color: #3498db;

font-size: 1.412rem;

font-weight: normal;

padding-left: 0;

}

.card .button--link:hover {

box-shadow: none;

}

.card .button:active {

transform: translateY(3px);

border-bottom-width: 0px;

}

.card .checkbox {

display: block;

width: 100%;

font-size: 1.412rem;

cursor: pointer;

}

.card .checkbox ~ .checkbox {

margin-top: 1.412rem;

}

.card .checkbox:after {

content: "";

position: absolute;

display: block;

right: 0;

top: 0;

width: 4.8rem;

height: 2.4rem;

border: 1px solid gainsboro;

z-index: 10;

box-shadow: inset 2.4rem 0 0 0 #e74c3c;

transition: box-shadow 0.48s;

}

.card input[type="checkbox"] {

display: none;

}

.card input[type="checkbox"]:checked + .checkbox:after {

box-shadow: inset -2.4rem 0 0 0 #2ecc71;

/* Helpers */

}

.upper-rounded {

border-radius: 1.13rem 1.13rem 0 0;

}

.lower-rounded {

border-radius: 0 0 1.13rem 1.13rem;

}