css.ppt,纯Css幻灯片

css

/****************************************/

html, body {

margin: 0;

background-color: #101010;

font-family: sans-serif;

}

.slideshow {

width: 100%;

height: 100%;

border: 0px;

padding: 0px;

margin: 0 auto;

background-color: #000;

overflow: hidden;

}

input {

display: none;

}

input:checked + .slide {

transform: translateX(0px);

transition: transform 0.5s ease-in-out;

}

input:checked + .slide .slide__content {

width: 100%;

display: block;

}

.slide {

transform: translateX(-100%);

position: absolute;

width: 50%;

height: 100%;

background-size: 50% 100%;

transition: transform 0.5s ease-in-out;

}

.slide__content {

box-sizing: border-box;

height: calc(100% - 60px);

overflow: scroll;

padding: 50px;

color: #DDD;

position: absolute;

left: 100%;

display: none;

animation-name: fade-in;

animation-duration: 1s;

animation-iteration-count: 1;

opacity: 1;

}

.slide:nth-child(3) {

background: url("https://placehold.it/2000x2500/2E112D/fff?text=1");

background-repeat: no-repeat;

background-size: 100%;

background-position: center;

}

.slide:nth-child(3):after {

position: absolute;

margin: auto;

top: 0px;

right: 0px;

bottom: 0px;

left: 0px;

width: 100%;

height: 100px;

}

.slide:nth-child(6) {

background: url("https://placehold.it/2000x2500/540032/fff?text=2");

background-repeat: no-repeat;

background-size: 100%;

background-position: center;

}

.slide:nth-child(6):after {

position: absolute;

margin: auto;

top: 0px;

right: 0px;

bottom: 0px;

left: 0px;

width: 100%;

height: 100px;

}

.slide:nth-child(9) {

background: url("https://placehold.it/2000x2500/820333/fff?text=3");

background-repeat: no-repeat;

background-size: 100%;

background-position: center;

}

.slide:nth-child(9):after {

position: absolute;

margin: auto;

top: 0px;

right: 0px;

bottom: 0px;

left: 0px;

width: 100%;

height: 100px;

}

.slide:nth-child(12) {

background: url("https://placehold.it/2000x2500/C9283E/fff?text=4");

background-repeat: no-repeat;

background-size: 100%;

background-position: center;

}

.slide:nth-child(12):after {

position: absolute;

margin: auto;

top: 0px;

right: 0px;

bottom: 0px;

left: 0px;

width: 100%;

height: 100px;

}

.slide:nth-child(15) {

background: url("https://placehold.it/2000x2500/F0433A/fff?text=5");

background-repeat: no-repeat;

background-size: 100%;

background-position: center;

}

.slide:nth-child(15):after {

position: absolute;

margin: auto;

top: 0px;

right: 0px;

bottom: 0px;

left: 0px;

width: 100%;

height: 100px;

}

label {

box-sizing: border-box;

color: #AAA;

font-weight: bold;

display: block;

width: calc((50% / 5) - 2%);

margin: 5px 1%;

height: 50px;

line-height: 50px;

border-bottom: solid 4px #AAA;

text-align: center;

position: absolute;

bottom: 5px;

text-transform: uppercase;

}

label:hover {

cursor: pointer;

color: #FFF;

border-bottom: solid 4px #FFF;

}

label:nth-child(1) {

left: calc(50% + (0 * (50% / 5)));

border-bottom-color: #2E112D;

}

label:nth-child(4) {

left: calc(50% + (1 * (50% / 5)));

border-bottom-color: #540032;

}

label:nth-child(7) {

left: calc(50% + (2 * (50% / 5)));

border-bottom-color: #820333;

}

label:nth-child(10) {

left: calc(50% + (3 * (50% / 5)));

border-bottom-color: #C9283E;

}

label:nth-child(13) {

left: calc(50% + (4 * (50% / 5)));

border-bottom-color: #F0433A;

}

@keyframes fade-in {

0% {

opacity: 0;

}

50% {

transform: translateY(-50px);

opacity: 0;

}

100% {

transform: translateY(0px);

opacity: 1;

}

}