style.css文件：

@import url("https://fonts.googleapis.com/css?family=Sree+Krushnadevaraya&display=swap");
@import url("https://fonts.googleapis.com/css?family=Catamaran&display=swap");
:root {--margin: 110px;--background: #e2e2f5;--perspective: 1800px;--transition: transform 1s .2s, z-index 0s 0.5s;--yellow: #ffce14;
}body .pages_page {width: 50%;position: absolute;right: 0px;height: 100%;-webkit-transform-origin: 0 50%;transform-origin: 0 50%;
}* {box-sizing: border-box;
}.overlay {background: rgba(255, 155, 0, 0.7019607843);position: fixed;width: 100%;pointer-events: none;height: 100%;z-index: -1;
}body {margin: 0;padding: 0;background: var(--background);height: 100vh;overflow: hidden;font-family: 'Sree Krushnadevaraya', serif;
}
body .logo {font-size: 20px;padding: 33px 30px 30px 30px;line-height: 0;color: var(--yellow);
}
body .pagenumber {position: absolute;bottom: 20px;left: 34px;width: 400px;color: var(--yellow);letter-spacing: 60px;
}
body .pagenumber:after {height: 1px;width: 100px;background: var(--yellow);content: '';display: block;position: absolute;left: 20px;top: 19px;
}
body .hamburger {position: absolute;top: 38px;height: 20px;width: 30px;right: 30px;z-index: 1;
}
body .hamburger_part {width: 20px;height: 1px;position: absolute;right: 0;background: var(--yellow);
}
body .hamburger_part:nth-of-type(1) {top: 0px;
}
body .hamburger_part:nth-of-type(2) {top: 4.5px;
}
body .hamburger_part:nth-of-type(3) {top: 9px;
}
body .hamburger_part:last-child {width: 8px;
}
body .pages {width: calc(100% - var(--margin));height: calc(100% - var(--margin));position: absolute;left: 0;right: 0;margin: auto;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);-webkit-perspective: var(--perspective);perspective: var(--perspective);box-shadow: 0 41px 38px -20px #0a3150;max-width: 1300px;max-height: 650px;
}
body .pages input {display: none;
}
body .pages input:nth-of-type(3):checked + input + div + div + div + div + div .pagenumber,
body .pages input:nth-of-type(3):checked + input + div + div + div + div + div + div .pagenumber {letter-spacing: 59px;transition: all 0.8s 0.7s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(3):checked + input + div + div + div + div + div .pagenumber:after,
body .pages input:nth-of-type(3):checked + input + div + div + div + div + div + div .pagenumber:after {width: 100px;transition: all 1s 0.7s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(3):checked + input + div + div + div + div + div .content_centerimage,
body .pages input:nth-of-type(3):checked + input + div + div + div + div + div + div .content_centerimage {-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);transition: all 0.8s 0.5s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(3):checked + input + div + div + div + div + div .content h4, body .pages input:nth-of-type(3):checked + input + div + div + div + div + div .content h6,
body .pages input:nth-of-type(3):checked + input + div + div + div + div + div + div .content h4,
body .pages input:nth-of-type(3):checked + input + div + div + div + div + div + div .content h6 {transition: all 1.5s 0.4s cubic-bezier(0.6, 0.045, 0.165, 1);-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(3):not(checked) + input + div + div + div + div + div .pagenumber,
body .pages input:nth-of-type(3):not(:checked) + input + div + div + div + div + div + div .pagenumber {letter-spacing: 0;transition: all 0.5s 0.2s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(3):not(checked) + input + div + div + div + div + div .pagenumber:after,
body .pages input:nth-of-type(3):not(:checked) + input + div + div + div + div + div + div .pagenumber:after {width: 0px;transition: all 0.5s 0.2s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(3):not(checked) + input + div + div + div + div + div .content_centerimage,
body .pages input:nth-of-type(3):not(:checked) + input + div + div + div + div + div + div .content_centerimage {-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);transition: all 0.8s 0s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(3):not(checked) + input + div + div + div + div + div .content h4, body .pages input:nth-of-type(3):not(checked) + input + div + div + div + div + div .content h6,
body .pages input:nth-of-type(3):not(:checked) + input + div + div + div + div + div + div .content h4,
body .pages input:nth-of-type(3):not(:checked) + input + div + div + div + div + div + div .content h6 {transition: all 1.5s 0.4s cubic-bezier(0.6, 0.045, 0.165, 1);-webkit-transform: translateZ(200px);transform: translateZ(200px);
}
body .pages input:nth-of-type(4):checked + div + div + div + div + div + div + div .pagenumber,
body .pages input:nth-of-type(4):checked + div + div + div + div + div + div + div + div .pagenumber {letter-spacing: 59px;transition: all 0.8s 0.7s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(4):checked + div + div + div + div + div + div + div .pagenumber:after,
body .pages input:nth-of-type(4):checked + div + div + div + div + div + div + div + div .pagenumber:after {width: 100px;transition: all 1s 0.7s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(4):checked + div + div + div + div + div + div + div .content_section,
body .pages input:nth-of-type(4):checked + div + div + div + div + div + div + div + div .content_section {transition: all 0.8s 0.7s cubic-bezier(0.6, 0.045, 0.165, 1);-webkit-filter: blur(0);filter: blur(0);opacity: 1;
}
body .pages input:nth-of-type(4):checked + div + div + div + div + div + div + div .content_section:nth-of-type(1),
body .pages input:nth-of-type(4):checked + div + div + div + div + div + div + div + div .content_section:nth-of-type(1) {left: 100px;transition: all 0.8s 0.3s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(4):checked + div + div + div + div + div + div + div .content_section:nth-of-type(2),
body .pages input:nth-of-type(4):checked + div + div + div + div + div + div + div + div .content_section:nth-of-type(2) {left: 230px;transition: all 0.8s 0.4s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(4):checked + div + div + div + div + div + div + div .content_section:nth-of-type(3),
body .pages input:nth-of-type(4):checked + div + div + div + div + div + div + div + div .content_section:nth-of-type(3) {left: 130px;transition: all 0.8s 0.5s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(4):not(checked) + div + div + div + div + div + div + div .pagenumber,
body .pages input:nth-of-type(4):not(:checked) + div + div + div + div + div + div + div + div .pagenumber {letter-spacing: 0;transition: all 0.5s 0.2s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(4):not(checked) + div + div + div + div + div + div + div .pagenumber:after,
body .pages input:nth-of-type(4):not(:checked) + div + div + div + div + div + div + div + div .pagenumber:after {width: 0px;transition: all 0.5s 0.2s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(4):not(checked) + div + div + div + div + div + div + div .content_section,
body .pages input:nth-of-type(4):not(:checked) + div + div + div + div + div + div + div + div .content_section {-webkit-filter: blur(20px);filter: blur(20px);transition: all 0.8s 0.5s cubic-bezier(0.6, 0.045, 0.165, 1);opacity: 0;
}
body .pages input:nth-of-type(4):not(checked) + div + div + div + div + div + div + div .content_section:nth-of-type(1),
body .pages input:nth-of-type(4):not(:checked) + div + div + div + div + div + div + div + div .content_section:nth-of-type(1) {left: 0;
}
body .pages input:nth-of-type(4):not(checked) + div + div + div + div + div + div + div .content_section:nth-of-type(2),
body .pages input:nth-of-type(4):not(:checked) + div + div + div + div + div + div + div + div .content_section:nth-of-type(2) {left: 0;
}
body .pages input:nth-of-type(4):not(checked) + div + div + div + div + div + div + div .content_section:nth-of-type(3),
body .pages input:nth-of-type(4):not(:checked) + div + div + div + div + div + div + div + div .content_section:nth-of-type(3) {left: 0;
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div h5 span,
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div h5 span {transition: all 1.5s 0.4s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div h5 span:nth-of-type(1),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div h5 span:nth-of-type(1) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div h5 span:nth-of-type(2),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div h5 span:nth-of-type(2) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div h5 span:nth-of-type(3),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div h5 span:nth-of-type(3) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div h5 span:nth-of-type(4),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div h5 span:nth-of-type(4) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div h5 span:nth-of-type(5),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div h5 span:nth-of-type(5) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div h5 span:nth-of-type(6),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div h5 span:nth-of-type(6) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .pagenumber,
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .pagenumber {letter-spacing: 59px;transition: all 0.8s 0.7s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .pagenumber:after,
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .pagenumber:after {width: 100px;transition: all 1s 0.7s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content,
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content {-webkit-filter: blur(0px);filter: blur(0px);opacity: 1;transition: all 1s .5s;-webkit-perspective: var(--perspective);perspective: var(--perspective);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content_picture,
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content_picture {-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);transition: all 1s 0.8s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span,
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span {transition: all 1.5s 0.4s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(1),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(1) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(2),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(2) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(3),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(3) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(4),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(4) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(5),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(5) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(6),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(6) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(7),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(7) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(8),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(8) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(9),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(9) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(10),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(10) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(11),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(11) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(12),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(12) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(13),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(13) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(14),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(14) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(15),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(15) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(16),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(16) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(17),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(17) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(18),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(18) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(19),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(19) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(20),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(20) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(21),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(21) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(22),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(22) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(23),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(23) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(24),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(24) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(25),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(25) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(26),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(26) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(27),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(27) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(28),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(28) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(29),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(29) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(30),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(30) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(31),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(31) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(32),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(32) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(33),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(33) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(34),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(34) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(35),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(35) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(36),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(36) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(37),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(37) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(38),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(38) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(39),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(39) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(40),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(40) {-webkit-transform: translateZ(0);transform: translateZ(0);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div h5 span,
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div h5 span {transition: all 1.5s 0.4s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div h5 span:nth-of-type(1),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div h5 span:nth-of-type(1) {-webkit-transform: translateZ(105px);transform: translateZ(105px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div h5 span:nth-of-type(2),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div h5 span:nth-of-type(2) {-webkit-transform: translateZ(251px);transform: translateZ(251px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div h5 span:nth-of-type(3),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div h5 span:nth-of-type(3) {-webkit-transform: translateZ(440px);transform: translateZ(440px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div h5 span:nth-of-type(4),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div h5 span:nth-of-type(4) {-webkit-transform: translateZ(328px);transform: translateZ(328px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div h5 span:nth-of-type(5),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div h5 span:nth-of-type(5) {-webkit-transform: translateZ(497px);transform: translateZ(497px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div h5 span:nth-of-type(6),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div h5 span:nth-of-type(6) {-webkit-transform: translateZ(578px);transform: translateZ(578px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .pagenumber,
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .pagenumber {letter-spacing: 0;transition: all 0.5s 0.2s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .pagenumber:after,
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .pagenumber:after {width: 0px;transition: all 0.5s 0.2s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content,
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content {-webkit-filter: blur(10px);filter: blur(10px);opacity: 0;-webkit-transform: translateZ(50px);transform: translateZ(50px);transition: all 1s .2s;
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content_picture,
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content_picture {transition: all 0.4s 0s cubic-bezier(0.6, 0.045, 0.165, 1);-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span,
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span {transition: all 1.5s 0s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(1),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(1) {-webkit-transform: translateZ(205px);transform: translateZ(205px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(2),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(2) {-webkit-transform: translateZ(607px);transform: translateZ(607px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(3),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(3) {-webkit-transform: translateZ(411px);transform: translateZ(411px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(4),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(4) {-webkit-transform: translateZ(379px);transform: translateZ(379px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(5),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(5) {-webkit-transform: translateZ(219px);transform: translateZ(219px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(6),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(6) {-webkit-transform: translateZ(369px);transform: translateZ(369px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(7),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(7) {-webkit-transform: translateZ(237px);transform: translateZ(237px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(8),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(8) {-webkit-transform: translateZ(293px);transform: translateZ(293px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(9),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(9) {-webkit-transform: translateZ(489px);transform: translateZ(489px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(10),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(10) {-webkit-transform: translateZ(629px);transform: translateZ(629px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(11),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(11) {-webkit-transform: translateZ(298px);transform: translateZ(298px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(12),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(12) {-webkit-transform: translateZ(507px);transform: translateZ(507px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(13),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(13) {-webkit-transform: translateZ(247px);transform: translateZ(247px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(14),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(14) {-webkit-transform: translateZ(355px);transform: translateZ(355px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(15),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(15) {-webkit-transform: translateZ(599px);transform: translateZ(599px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(16),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(16) {-webkit-transform: translateZ(580px);transform: translateZ(580px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(17),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(17) {-webkit-transform: translateZ(278px);transform: translateZ(278px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(18),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(18) {-webkit-transform: translateZ(600px);transform: translateZ(600px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(19),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(19) {-webkit-transform: translateZ(408px);transform: translateZ(408px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(20),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(20) {-webkit-transform: translateZ(543px);transform: translateZ(543px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(21),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(21) {-webkit-transform: translateZ(280px);transform: translateZ(280px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(22),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(22) {-webkit-transform: translateZ(649px);transform: translateZ(649px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(23),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(23) {-webkit-transform: translateZ(271px);transform: translateZ(271px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(24),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(24) {-webkit-transform: translateZ(675px);transform: translateZ(675px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(25),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(25) {-webkit-transform: translateZ(610px);transform: translateZ(610px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(26),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(26) {-webkit-transform: translateZ(721px);transform: translateZ(721px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(27),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(27) {-webkit-transform: translateZ(392px);transform: translateZ(392px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(28),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(28) {-webkit-transform: translateZ(450px);transform: translateZ(450px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(29),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(29) {-webkit-transform: translateZ(467px);transform: translateZ(467px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(30),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(30) {-webkit-transform: translateZ(400px);transform: translateZ(400px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(31),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(31) {-webkit-transform: translateZ(435px);transform: translateZ(435px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(32),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(32) {-webkit-transform: translateZ(376px);transform: translateZ(376px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(33),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(33) {-webkit-transform: translateZ(502px);transform: translateZ(502px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(34),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(34) {-webkit-transform: translateZ(294px);transform: translateZ(294px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(35),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(35) {-webkit-transform: translateZ(587px);transform: translateZ(587px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(36),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(36) {-webkit-transform: translateZ(296px);transform: translateZ(296px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(37),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(37) {-webkit-transform: translateZ(380px);transform: translateZ(380px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(38),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(38) {-webkit-transform: translateZ(544px);transform: translateZ(544px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(39),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(39) {-webkit-transform: translateZ(732px);transform: translateZ(732px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(40),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(40) {-webkit-transform: translateZ(509px);transform: translateZ(509px);
}
body .pages_page {pointer-events: none;float: right;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;
}
body .pages_page:nth-of-type(1) {z-index: 7;transition: var(--transition);
}
body .pages_page:nth-of-type(2) {z-index: 6;transition: var(--transition);
}
body .pages_page:nth-of-type(3) {z-index: 5;transition: var(--transition);
}
body .pages_page:nth-of-type(4) {z-index: 4;transition: var(--transition);
}
body .pages_page:nth-of-type(5) {z-index: 3;transition: var(--transition);
}
body .pages_page:nth-of-type(6) {z-index: 2;transition: var(--transition);
}
body .pages_page:nth-of-type(7) {z-index: 1;transition: var(--transition);
}
body .pages_page:nth-of-type(8) {z-index: 0;transition: var(--transition);
}
body .pages_page:nth-of-type(1) {left: 0;z-index: 0;-webkit-transform: rotateY(0deg) !important;transform: rotateY(0deg) !important;pointer-events: none;
}
body .pages_page:nth-of-type(1) .pages_page__inner {-webkit-transform: rotateY(0deg) !important;transform: rotateY(0deg) !important;
}
body .pages_page:nth-of-type(2) {pointer-events: all;
}
body .pages_page:nth-of-type(odd) .pages_page__inner {-webkit-transform: rotateY(180deg);transform: rotateY(180deg);
}
body .pages_page:nth-of-type(1) .pages_page__inner {background-size: 880px !important;background-position: center !important;background: url("../img/Arielle16-01_51088-3.jpg");
}
body .pages_page:nth-of-type(2) .pages_page__inner {background-size: 870px !important;background-position: center !important;/*background: url("http://cdn.lightgalleries.net/4d80d92265da9/images/CJ19-02_40732-1.jpg");*/background: url("../img/CJ19-02_40732-1.jpg");
}
body .pages_page:nth-of-type(2) .pages_page__inner h4 {color: black;z-index: 3;
}
body .pages_page:nth-of-type(3) .pages_page__inner {/*background: url("https://iso.500px.com/wp-content/uploads/2014/12/fashion_1.jpg");*/background: url("../img/fashion_1.jpg");background-position: 0 0;
}
body .pages_page:nth-of-type(3) .pages_page__inner .content {-webkit-clip-path: polygon(0% 0%, 50% 0, 50% 100%, 0% 100%);clip-path: polygon(0% 0%, 50% 0, 50% 100%, 0% 100%);height: 100%;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;width: 200%;position: absolute;
}
body .pages_page:nth-of-type(6) .pages_page__inner {background: #4a5f5c;
}
body .pages_page:nth-of-type(4) .pages_page__inner .content {-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%);clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%);height: 100%;width: 200%;position: absolute;left: -100%;
}
body .pages_page:nth-of-type(4) .pages_page__inner .bg {-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%);clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%);height: 100%;width: 200%;position: relative;/*background: url("https://iso.500px.com/wp-content/uploads/2014/12/fashion_1.jpg");*/background: url("../img/fashion_1.jpg");background-size: 1400px !important;left: -100%;
}
body .pages_page:nth-of-type(5) .pages_page__inner {/*background: url("http://cdn.lightgalleries.net/4d80d92265da9/images/Tayna16-12_90574-2.jpg");*/background: url("../img/Tayna16-12_90574-2.jpg");background-size: 870px !important;background-position: center !important;
}
body .pages_page:nth-of-type(7) .pages_page__inner {/*background: url("http://ruthrose.co.uk/wp-content/uploads/2018/04/lingerie-fashion-photographer-photography-shoot-fitness-swimwear-shoot180317_POCKET9661-f1.jpg");*/background: url("../img/lingerie-fashion-photographer-photography-shoot-fitness-swimwear-shoot180317_POCKET9661-f1.jpg");background-position: 0 0;background-size: 1400px !important;
}
body .pages_page:nth-of-type(7) .pages_page__inner .content_section {position: absolute;
}
body .pages_page:nth-of-type(7) .pages_page__inner .content_section h2 {margin: 0;
}
body .pages_page:nth-of-type(7) .pages_page__inner .content_section h2,
body .pages_page:nth-of-type(7) .pages_page__inner .content_section p {margin: 0;color: var(--yellow);
}
body .pages_page:nth-of-type(7) .pages_page__inner .content_section p {line-height: 18px;opacity: 0.95;font-size: 13px;
}
body .pages_page:nth-of-type(7) .pages_page__inner .content_section:nth-of-type(1) {top: 50px;width: 200px;
}
body .pages_page:nth-of-type(7) .pages_page__inner .content_section:nth-of-type(2) {top: 200px;width: 300px;
}
body .pages_page:nth-of-type(7) .pages_page__inner .content_section:nth-of-type(3) {top: 320px;width: 260px;
}
body .pages_page:nth-of-type(8) .pages_page__inner {/*background: url("http://ruthrose.co.uk/wp-content/uploads/2018/04/lingerie-fashion-photographer-photography-shoot-fitness-swimwear-shoot180317_POCKET9661-f1.jpg");*/background: url("../img/lingerie-fashion-photographer-photography-shoot-fitness-swimwear-shoot180317_POCKET9661-f1.jpg");background-position: 0 0;
}
body .pages_page:nth-of-type(8) .pages_page__inner .content {-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%);clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%);height: 100%;width: 200%;position: absolute;left: -100%;
}
body .pages_page:nth-of-type(8) .pages_page__inner .bg {-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%);clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%);height: 100%;width: 200%;position: relative;/*background: url("http://ruthrose.co.uk/wp-content/uploads/2018/04/lingerie-fashion-photographer-photography-shoot-fitness-swimwear-shoot180317_POCKET9661-f1.jpg");*/background: url("../img/lingerie-fashion-photographer-photography-shoot-fitness-swimwear-shoot180317_POCKET9661-f1.jpg");background-size: 1400px !important;left: -100%;
}
body .pages_page__inner {/*background: url("https://www.colorfusionstudio.com/wp-content/uploads/2015/07/cfs-models-003-683x1024.jpg");*/background: url("../img/cfs-models-003-683x1024.jpg");background-size: 1400px !important;height: 100%;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;
}
body .pages_page__inner .control {position: absolute;z-index: 1;width: 31px;height: 31px;border: 1px solid var(--yellow);border-radius: 100px;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);left: 30px;cursor: pointer;transition: all .23s;box-shadow: 0 0 0 0px #bf9726;
}
body .pages_page__inner .control:hover {box-shadow: 0 0 0 10px rgba(191, 151, 38, 0.3);left: 34px;
}
body .pages_page__inner .control:hover:before {width: 40px;left: -40px;
}
body .pages_page__inner .control.next {left: auto;right: 30px;
}
body .pages_page__inner .control.next:hover {right: 34px;
}
body .pages_page__inner .control.next:hover:before {width: 40px;right: -40px;
}
body .pages_page__inner .control.next:before {left: auto;right: -33px;
}
body .pages_page__inner .control.next:after {-webkit-transform: rotate(180deg);transform: rotate(180deg);top: 5px;left: 11px;pointer-events: none;
}
body .pages_page__inner .control label {z-index: 2;width: 100%;height: 100%;position: absolute;cursor: pointer;
}
body .pages_page__inner .control:after {content: '\f104';display: block;font-family: 'Font Awesome 5 Free';font-weight: 900;color: var(--yellow);position: absolute;left: 10px;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);transition: all .2s;
}
body .pages_page__inner .control:before {content: '';position: absolute;display: block;width: 32px;height: 1px;background: var(--yellow);top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);left: -32px;transition: all .2s;
}
body .pages_page__inner .footer {position: absolute;bottom: 26px;z-index: 2;color: var(--yellow);right: 30px;font-size: 12px;
}
body .pages_page__inner .footer i {margin: 0 10px;
}
body .pages_page__inner .content {-webkit-transform-style: preserve-3d;transform-style: preserve-3d;position: absolute;z-index: 1;pointer-events: none;top: 0;-webkit-transform: translateZ(0px);transform: translateZ(0px);width: 100%;height: 100%;
}
body .pages_page__inner .content_centerimage {position: absolute;left: 0;right: 0;margin: auto;top: 50%;text-align: center;width: 60%;-webkit-transform: translateY(-50%);transform: translateY(-50%);max-width: 300px;
}
body .pages_page__inner .content_centerimage img {width: 100%;
}
body .pages_page__inner .content_center {position: absolute;text-align: center;width: 260px;right: -130px;padding-bottom: 10px;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);-webkit-clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
}
body .pages_page__inner .content_center img {width: 300px;
}
body .pages_page__inner .content_center .logo {font-size: 30px;
}
body .pages_page__inner .content_center h4,
body .pages_page__inner .content_center h6 {color: var(--yellow);font-size: 38px;font-weight: normal;margin: 0;line-height: 38px;
}
body .pages_page__inner .content_center h4 {color: var(--yellow);font-size: 38px;font-weight: normal;margin: 0;line-height: 38px;border-top: 1px solid;border-bottom: 1px solid;padding: 15px 20px 29px;
}
body .pages_page__inner .content_center h6 {font-size: 20px;margin: 0;opacity: 0.5;
}
body .pages_page__inner .content_center h6:nth-of-type(2) {font-size: 16px;margin-top: 10px;
}
body .pages_page__inner .content_center.right {right: auto;left: -130px;-webkit-clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
}
body .pages_page__inner .content_picture {width: 220px;position: absolute;left: 50%;-webkit-transform: translateX(-40px);transform: translateX(-40px);top: 294px;
}
body .pages_page__inner .content_picture img {width: 100%;margin: 0;display: inline-block;
}
body .pages_page__inner .content_quote {position: absolute;left: calc(50% + 250px);bottom: 100px;width: 200px;
}
body .pages_page__inner .content_quote h5 span {display: block;color: var(--yellow);font-size: 34px;font-weight: normal;line-height: 42px;
}
body .pages_page__inner .content_quote h5 span.name, body .pages_page__inner .content_quote h5 span.auth {font-size: 13px;opacity: 0.7;margin: 22px 0 0 0;position: Relative;left: 140px;
}
body .pages_page__inner .content_quote h5 span.auth {margin: -7px 0;
}
body .pages_page__inner .content_quote h5 span.quo {font-family: 'Catamaran', sans-serif;font-size: 80px;position: absolute;left: 195px;top: 90px;
}
body .pages_page__inner .content_quote h5 span.quo:nth-of-type(1) i {-webkit-transform: rotate(180deg);transform: rotate(180deg);left: -226px;top: -100px;display: block;font-style: normal;position: relative;
}
body .pages_page__inner .content_offset {position: absolute;width: 280px;top: 260px;left: 50%;-webkit-transform: translateX(-350px);transform: translateX(-350px);color: var(--yellow);
}
body .pages_page__inner .content_offset h2,
body .pages_page__inner .content_offset p {margin: 0;
}
body .pages_page__inner .content_offset h2 {color: var(--yellow);font-size: 16px;text-transform: uppercase;letter-spacing: 2px;margin: 20px 0 8px 0;
}
body .pages_page__inner .content_offset p {font-size: 13px;line-height: 20px;color: var(--yellow);
}
body .pages_page__inner .content h1 {font-size: 53px;color: var(--yellow);text-transform: uppercase;padding: 120px;margin: 0;font-weight: normal;letter-spacing: -6px;line-height: 51px;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;
}
body .pages_page__inner .content h1 span {-webkit-transform-style: preserve-3d;transform-style: preserve-3d;display: inline-block;
}
body .pages input[type="radio"]:nth-of-type(2):checked + input + input + div + div {pointer-events: all;-webkit-transform: rotateY(-180deg);transform: rotateY(-180deg);z-index: 10;transition: var(--transition);
}
body .pages input[type="radio"]:nth-of-type(2):checked + input + input + div + div .control {box-shadow: 0 0 0 200px rgba(0, 0, 0, 0);
}
body .pages input[type="radio"]:nth-of-type(2):checked + input + input + div + div + div {pointer-events: all;
}
body .pages input[type="radio"]:nth-of-type(2):checked + input + input + div {pointer-events: none;z-index: 9;
}
body .pages input[type="radio"]:nth-of-type(2):checked + input + input + div + div + div {pointer-events: all;-webkit-transform: rotateY(-180deg);transform: rotateY(-180deg);z-index: 10;transition: var(--transition);
}
body .pages input[type="radio"]:nth-of-type(2):checked + input + input + div + div + div .control {box-shadow: 0 0 0 200px rgba(0, 0, 0, 0);
}
body .pages input[type="radio"]:nth-of-type(2):checked + input + input + div + div + div + div {pointer-events: all;
}
body .pages input[type="radio"]:nth-of-type(2):checked + input + input + div + div {pointer-events: none;z-index: 9;
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div {pointer-events: all;-webkit-transform: rotateY(-180deg);transform: rotateY(-180deg);z-index: 10;transition: var(--transition);
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div .control {box-shadow: 0 0 0 200px rgba(0, 0, 0, 0);
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div + div {pointer-events: all;
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div {pointer-events: none;z-index: 9;
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div + div {pointer-events: all;-webkit-transform: rotateY(-180deg);transform: rotateY(-180deg);z-index: 10;transition: var(--transition);
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div + div .control {box-shadow: 0 0 0 200px rgba(0, 0, 0, 0);
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div + div + div {pointer-events: all;
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div {pointer-events: none;z-index: 9;
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div + div + div {pointer-events: all;-webkit-transform: rotateY(-180deg);transform: rotateY(-180deg);z-index: 10;transition: var(--transition);
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div + div + div .control {box-shadow: 0 0 0 200px rgba(0, 0, 0, 0);
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div + div + div + div {pointer-events: all;
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div + div {pointer-events: none;z-index: 9;
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div + div + div + div {pointer-events: all;-webkit-transform: rotateY(-180deg);transform: rotateY(-180deg);z-index: 10;transition: var(--transition);
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div + div + div + div .control {box-shadow: 0 0 0 200px rgba(0, 0, 0, 0);
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div + div + div + div + div {pointer-events: all;
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div + div + div {pointer-events: none;z-index: 9;
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div {pointer-events: all;-webkit-transform: rotateY(-180deg);transform: rotateY(-180deg);z-index: 10;transition: var(--transition);
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div .control {box-shadow: 0 0 0 200px rgba(0, 0, 0, 0);
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div {pointer-events: all;
}
body .pages input[type="radio"]:nth-of-type(4):checked + div {pointer-events: none;z-index: 9;
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div {pointer-events: all;-webkit-transform: rotateY(-180deg);transform: rotateY(-180deg);z-index: 10;transition: var(--transition);
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div .control {box-shadow: 0 0 0 200px rgba(0, 0, 0, 0);
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div {pointer-events: all;
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div {pointer-events: none;z-index: 9;
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div {pointer-events: all;-webkit-transform: rotateY(-180deg);transform: rotateY(-180deg);z-index: 10;transition: var(--transition);
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div .control {box-shadow: 0 0 0 200px rgba(0, 0, 0, 0);
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div + div {pointer-events: all;
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div {pointer-events: none;z-index: 9;
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div + div {pointer-events: all;-webkit-transform: rotateY(-180deg);transform: rotateY(-180deg);z-index: 10;transition: var(--transition);
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div + div .control {box-shadow: 0 0 0 200px rgba(0, 0, 0, 0);
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div + div + div {pointer-events: all;
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div {pointer-events: none;z-index: 9;
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div + div + div {pointer-events: all;-webkit-transform: rotateY(-180deg);transform: rotateY(-180deg);z-index: 10;transition: var(--transition);
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div + div + div .control {box-shadow: 0 0 0 200px rgba(0, 0, 0, 0);
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div + div + div + div {pointer-events: all;
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div + div {pointer-events: none;z-index: 9;
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div + div + div + div {pointer-events: all;-webkit-transform: rotateY(-180deg);transform: rotateY(-180deg);z-index: 10;transition: var(--transition);
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div + div + div + div .control {box-shadow: 0 0 0 200px rgba(0, 0, 0, 0);
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div + div + div + div + div {pointer-events: all;
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div + div + div {pointer-events: none;z-index: 9;
}

HTML代码：

<!DOCTYPE html>
<html><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>css3电子杂志画册3D翻页切换动画特效</title><!--图标库--><link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css'/><link rel="stylesheet" href="css/style.css" /></head><body><div class='pages'><input id='one' name='trigger' type='radio'><input id='two' name='trigger' type='radio'><input id='three' name='trigger' type='radio'><input id='four' name='trigger' type='radio'><div class='pages_page'><div class='pages_page__inner'><div class='logo'>流行服饰</div><div class='pagenumber'>1 2</div><div class='content'><div class='content_center'><h4>最新时尚与时尚设计</h4></div></div></div></div><div class='pages_page'><div class='pages_page__inner'><div class='content'><div class='content_center right'><h4>最新时尚与时尚设计</h4></div><div class='overlay'></div></div><div class='control next'><label for='two'></label></div></div></div><div class='pages_page'><div class='pages_page__inner'><div class='logo'>流行服饰</div><div class='pagenumber'>2 3</div><div class='control'><label for='one'></label></div><div class='content'><div class='content_picture'> <img src='img/Bild01.jpg'> </div><div class='content_offset'><h2>简介</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a imperdiet sapien. Nunc vehicula lorem neque, eu rutrum sapien posuere ut. Nunc eget ullamcorper turpis. Sed in vehicula magna, vitae eleifend velit. Donec dui turpis, viverra vitaelobortis commodo, lobortis et ex.</p></div><h1> <span>L</span> <span>o</span><span>o</span> <span>k</span> <span>&nbsp;</span> <span>a</span> <span>t</span><span>&nbsp;</span><span>t</span> <span>h</span> <span>i</span> <span>s</span> <span>&nbsp;</span> <span>a</span> <span>w</span> <span>e</span> <span>s</span> <span>o</span> <span>m</span> <span>e</span> <br><span>h</span> <span>e</span> <span>a</span> <span>d</span> <span>l</span> <span>i</span> <span>n</span> <span>e</span> <span>&nbsp;</span> <span>r</span> <span>i</span> <span>g</span> <span>h</span> <span>t</span> <span>&nbsp;</span> <span>h</span> <span>e</span> <span>r</span> <span>e</span> </h1></div></div></div><div class='pages_page'><div class='pages_page__inner'><div class='hamburger'><div class='hamburger_part'></div><div class='hamburger_part'></div><div class='hamburger_part'></div></div><div class='control next'><label for='three'></label></div><div class='bg'></div><div class='footer'> <i class="fab fa-google-plus-g"></i> <i class="fas fa-retweet"></i> <i class="far fa-heart"></i> <i class="far fa-share-square"></i> </div><div class='content'><div class='content_quote'><h5> <span class='quo'> <i>"</i> </span> <span>一个报价单</span> <span>来自</span> <span class='name'>杰米·库尔特</span> <span class='auth'>- Design公司</span> <span class='quo'>"</span> </h5></div><div class='content_picture'> <img src='img/Bild01.jpg'> </div><h1> <span>L</span> <span>o</span> <span>o</span> <span>k</span> <span>&nbsp;</span> <span>a</span> <span>t</span> <span>&nbsp;</span> <span>t</span> <span>h</span> <span>i</span> <span>s</span> <span>&nbsp;</span> <span>a</span> <span>w</span> <span>e</span> <span>s</span> <span>o</span> <span>m</span> <span>e</span> <br><span>h</span> <span>e</span> <span>a</span> <span>d</span> <span>l</span> <span>i</span> <span>n</span> <span>e</span> <span>&nbsp;</span> <span>r</span> <span>i</span> <span>g</span> <span>h</span> <span>t</span> <span>&nbsp;</span> <span>h</span> <span>e</span> <span>r</span> <span>e</span> </h1></div></div></div><div class='pages_page'><div class='pages_page__inner'><div class='logo'>流行服饰</div><div class='pagenumber'>4 5</div><div class='content'><div class='content_center'><h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4><h6>Lorem ipsum dolor sit amet</h6></div></div><div class='control'><label for='two'></label></div></div></div><div class='pages_page'><div class='pages_page__inner'><div class='hamburger'><div class='hamburger_part'></div><div class='hamburger_part'></div><div class='hamburger_part'></div></div><div class='control next'><label for='four'></label></div><div class='bg'></div><div class='content_centerimage'> <img src='img/profoto-collapsible-reflectors-rossella-vanon-fashion-photography-img_2013-600x900.jpg'> </div><div class='content'><div class='content_center right'><h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4><h6>Lorem ipsum dolor sit amet</h6></div></div><div class='footer'> <i class="fab fa-google-plus-g"></i> <i class="fas fa-retweet"></i> <i class="far fa-heart"></i> <i class="far fa-share-square"></i> </div></div></div><div class='pages_page'><div class='pages_page__inner'><div class='logo'>流行服饰</div><div class='pagenumber'>6 7</div><div class='content'><div class='content_section'><h2>Super</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a imperdiet sapien. Nunc vehicula lorem neque, eu rutrum sapien posuere ut. Nunc eget ullamcorper turpis. Sed in vehicula magna, vitae eleifend velit.</p></div><div class='content_section'><h2>Awesome</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a imperdiet sapien. Nunc vehicula lorem neque, eu rutrum sapien posuere ut. Nunc eget ullamcorper turpis. Sed in vehicula magna, vitae eleifend velit.</p></div><div class='content_section'><h2>Great</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a imperdiet sapien. Nunc vehicula lorem neque, eu rutrum sapien posuere ut. Nunc eget ullamcorper turpis. Sed in vehicula magna.</p></div></div><div class='control'><label for='three'></label></div></div></div><div class='pages_page'><div class='pages_page__inner'><div class='hamburger'><div class='hamburger_part'></div><div class='hamburger_part'></div><div class='hamburger_part'></div></div><div class='bg'></div><div class='content'></div><div class='footer'> <i class="fab fa-google-plus-g"></i> <i class="fas fa-retweet"></i> <i class="far fa-heart"></i> <i class="far fa-share-square"></i> </div></div></div></div></body>
</html>

img文件：
Arielle16-01_51088-3.jpgBild01.jpg
cfs-models-003-683x1024.jpg
CJ19-02_40732-1.jpg
fashion_1.jpg
lingerie-fashion-photographer-photography-shoot-fitness-swimwear-shoot180317_POCKET9661-f1.jpg
profoto-collapsible-reflectors-rossella-vanon-fashion-photography-img_2013-600x900.jpg
Tayna16-12_90574-2.jpg
效果图：

HTML+CSS css3电子杂志画册3D翻页切换动画特效相关推荐

  1. 用html浮雕效果图,纯CSS3炫酷3D浮雕质感文字动画特效

    这是一款效果非常酷的纯CSS3 3D浮雕质感文字动画特效.该特效中文字被制作为浮雕文字,就像是从一块石板上将文字雕刻下来的一样.而且文字还会来回的摆动旋转,效果非常好. 制作方法 HTML结构 该CS ...

  2. [原创]纯CSS3打造的3D翻页翻转特效

    刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是 ...

  3. html图片 3d切换特效,一款基于css3的3D图片翻页切换特效

    今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 实现的代码. html代码: Bedouin Blue-green Dram ...

  4. Html5图片翻页制作,HTML5超酷名片盒风格3D翻页图片画廊

    在前面我们讲解了一个使用纯CSS制作3D百叶窗效果,今天我们要来制作一个类似名片盒的3D翻页图片画廊.在这个效果中,我们将使用一个HTML5 range输入框元素来控制图片画廊的前后翻页.这个rang ...

  5. 2.CCGridAction(3D效果)，3D反转特效，凸透镜特效，液体特效，3D翻页特效，水波纹特效，3D晃动的特效，扭曲旋转特效，波动特效，3D波动特效...

     1 类图组织 2 实例 CCSprite * spr = CCSprite::create("HelloWorld.png"); spr->setPosition(cc ...

  6. 2.CCGridAction(3D效果)，3D反转特效，凸透镜特效，液体特效，3D翻页特效，水波纹特效，3D晃动的特效，扭曲旋转特效，波动特效，3D波动特效

     1 类图组织 2 实例 CCSprite * spr = CCSprite::create("HelloWorld.png"); spr->setPosition(cc ...

  7. 简单3D翻页相册制作教程

    3D效果看起来总是要比平面的图形看起来视觉效果要好的多,今天来教大家制作简单的3D翻页效果的视频. 视频预览链接:https://v.youku.com/v_show/id_XMzgxOTY5NzQz ...

  8. html5 制作书架展示 PHP,简单做出HTML5翻页效果文字特效

    简单做出HTML5翻页效果文字特效 之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也挺简单的, ...

  9. 移动web：翻页场景动画

    在移动web,特别是在微信中,经常看到一种翻页动画效果,也称为场景动画. 一页一页的翻过,像在看书,每页的内容以各种"炫酷"的效果出现在你的眼里,配上一首动听的音乐,你有没有喜欢上 ...

最新文章

  1. 图灵1月书讯：阅新书辞旧岁，览经典迎新年
  2. ubuntu16.04 terminal无法正常运行
  3. nodejs 的序列化与反序列化
  4. 《研磨设计模式》chap15 组合模式(2)改写示例+总结
  5. 多线程（C++）临界区Critical Sections
  6. 用html和css布局如下图像,[看书][CSS精粹（第2版）]第三章 CSS和图像 HTML网页布局...
  7. 清华硕士一针见血：这些才是机器学习必备的数学基础
  8. /var/spool/postfix/maildrop小文件太多造成inode索引使用完解决
  9. 分布式缓存原理——一致性hash算法（hash环）、Hash槽
  10. 比特币在推特上的活跃度正接近2017年水平
  11. php加数据库开发案例,PHP简单数据库操作类实例【支持增删改查及链式操作】
  12. 文言文代码算什么？跟着九章算术学Python编程才厉害
  13. Axure（软件下载安装与使用）——成为产品经理的必修课
  14. 编译Openwrt（LEDE）for K3固件详细指南
  15. 高等数学——驻点，拐点，极值点
  16. 全球资本市场竞争力指数排名发布，中国跃居第五
  17. Riverbed未来要往哪里去？收购Ocedo让你一目了然
  18. HIT-哈工大数据结构-作业5（C++）
  19. rtmp/rtsp播放器
  20. 金融行业数据安全及合规使用

热门文章

  1. 记录下在线扩容服务器遇到的问题 NOCHANGE: partition 1 is size 419428319. it cannot be grown
  2. VMOS+小黄鸟无root抓包（解决抓包无网络问题）（附工具）
  3. 英语如此简单（转贴）
  4. php解决时间2038问题,PHP实例：关于PHP转换超过2038年日期出错的问题解决
  5. 为什要使用BindService?为了调用服务中的方法
  6. 6.process.nextTick()
  7. 表空间的相关查询命令
  8. web audio api 实现音频播放
  9. 中资美元债这么膨胀，个人投资者怎么买？
  10. codevs1013 求先序排列 string黑科技[三星]