dtcms插件 金融信贷 date node ansible jtable Modernizr ACE vue开发文档 photoshop视频教程全集下载 ai视频教程下载 java设计模式视频 sql视频教程 python计算器 pythonassert函数 安装python教程 python基础练习 java开发教程 java类的继承 java环境变量配置 java如何使用 html实例教程 ntscan 幽城幻剑录五内 计算机操作系统第四版 骁龙435 php抓取网页数据 emit js小数点保留2位 fireworks下载 ie拒绝访问 战法装备 微信昵称特殊字符保存 ipad内存怎么清理 淘新闻下载 脚本怎么用 layout软件 autoit教程 qq三国辅助 ap天赋
当前位置: 首页 > 学习教程  > 编程语言

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

2020/8/31 14:49:44 文章标签:

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 vitae
								lobortis 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.jpg在这里插入图片描述Bild01.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
在这里插入图片描述效果图:
在这里插入图片描述


本文链接: http://www.dtmao.cc/news_show_150292.shtml

附件下载

上一篇:赫夫曼树

下一篇:mc100配合按钮使用

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?