纯CSS3杂志动画翻页特效

创客云


这是一款纯CSS3杂志翻页动画特效。该特效使用纯CSS3杂志,可以点击前后导航按钮,来像翻阅杂志一样,前后翻看不同的页面。

使用方法

在页面中引入下面的文件。

  1. <link rel="stylesheet" type="text/css" href="./css/style.css">

HTML结构

  1. <div class='pages'>
  2.   <input id='one' name='trigger' type='radio'>
  3.   <input id='two' name='trigger' type='radio'>
  4.   <input id='three' name='trigger' type='radio'>
  5.   <input id='four' name='trigger' type='radio'>
  6.   <div class='pages_page'>
  7.     <div class='pages_page__inner'>
  8.       <div class='logo'>Fashion</div>
  9.       <div class='pagenumber'>1 2</div>
  10.       <div class='content'>
  11.         <div class='content_center'>
  12.           <h4>The latest in fashion & fashion design</h4>
  13.         </div>
  14.       </div>
  15.     </div>
  16.   </div>
  17.   <div class='pages_page'>
  18.     <div class='pages_page__inner'>
  19.       <div class='content'>
  20.         <div class='content_center right'>
  21.           <h4>The latest in fashion & fashion design</h4>
  22.         </div>
  23.         <div class='overlay'></div>
  24.       </div>
  25.       <div class='control next'>
  26.         <label for='two'></label>
  27.       </div>
  28.     </div>
  29.   </div>
  30.   <div class='pages_page'>
  31.     <div class='pages_page__inner'>
  32.       <div class='logo'>Fashion</div>
  33.       <div class='pagenumber'>2 3</div>
  34.       <div class='control'>
  35.         <label for='one'></label>
  36.       </div>
  37.       <div class='content'>
  38.         <div class='content_picture'>
  39.           <img src='https://news.broncolor.swiss/wp-content/uploads/2017/03/Bild01.jpg'>
  40.         </div>
  41.         <div class='content_offset'>
  42.           <h2>Subtitle</h2>
  43.           <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>
  44.         </div>
  45.         <h1>
  46.           <span>L</span>
  47.           <span>o</span>
  48.           <span>o</span>
  49.           <span>k</span>
  50.           <span> </span>
  51.           <span>a</span>
  52.           <span>t</span>
  53.           <span> </span>
  54.           <span>t</span>
  55.           <span>h</span>
  56.           <span>i</span>
  57.           <span>s</span>
  58.           <span> </span>
  59.           <span>a</span>
  60.           <span>w</span>
  61.           <span>e</span>
  62.           <span>s</span>
  63.           <span>o</span>
  64.           <span>m</span>
  65.           <span>e</span>
  66.           <br>
  67.           <span>h</span>
  68.           <span>e</span>
  69.           <span>a</span>
  70.           <span>d</span>
  71.           <span>l</span>
  72.           <span>i</span>
  73.           <span>n</span>
  74.           <span>e</span>
  75.           <span> </span>
  76.           <span>r</span>
  77.           <span>i</span>
  78.           <span>g</span>
  79.           <span>h</span>
  80.           <span>t</span>
  81.           <span> </span>
  82.           <span>h</span>
  83.           <span>e</span>
  84.           <span>r</span>
  85.           <span>e</span>
  86.         </h1>
  87.       </div>
  88.     </div>
  89.   </div>
  90.   <div class='pages_page'>
  91.     <div class='pages_page__inner'>
  92.       <div class='hamburger'>
  93.         <div class='hamburger_part'></div>
  94.         <div class='hamburger_part'></div>
  95.         <div class='hamburger_part'></div>
  96.       </div>
  97.       <div class='control next'>
  98.         <label for='three'></label>
  99.       </div>
  100.       <div class='bg'></div>
  101.       <div class='footer'>
  102.         <i class="fab fa-google-plus-g"></i>
  103.         <i class="fas fa-retweet"></i>
  104.         <i class="far fa-heart"></i>
  105.         <i class="far fa-share-square"></i>
  106.       </div>
  107.       <div class='content'>
  108.         <div class='content_quote'>
  109.           <h5>
  110.             <span class='quo'>
  111.               <i>"</i>
  112.             </span>
  113.             <span>This is a quote</span>
  114.             <span>from someone</span>
  115.             <span class='name'>Jamie Coulter</span>
  116.             <span class='auth'>- Jcoulterdesign</span>
  117.             <span class='quo'>"</span>
  118.           </h5>
  119.         </div>
  120.         <div class='content_picture'>
  121.           <img src='https://news.broncolor.swiss/wp-content/uploads/2017/03/Bild01.jpg'>
  122.         </div>
  123.         <h1>
  124.           <span>L</span>
  125.           <span>o</span>
  126.           <span>o</span>
  127.           <span>k</span>
  128.           <span> </span>
  129.           <span>a</span>
  130.           <span>t</span>
  131.           <span> </span>
  132.           <span>t</span>
  133.           <span>h</span>
  134.           <span>i</span>
  135.           <span>s</span>
  136.           <span> </span>
  137.           <span>a</span>
  138.           <span>w</span>
  139.           <span>e</span>
  140.           <span>s</span>
  141.           <span>o</span>
  142.           <span>m</span>
  143.           <span>e</span>
  144.           <br>
  145.           <span>h</span>
  146.           <span>e</span>
  147.           <span>a</span>
  148.           <span>d</span>
  149.           <span>l</span>
  150.           <span>i</span>
  151.           <span>n</span>
  152.           <span>e</span>
  153.           <span> </span>
  154.           <span>r</span>
  155.           <span>i</span>
  156.           <span>g</span>
  157.           <span>h</span>
  158.           <span>t</span>
  159.           <span> </span>
  160.           <span>h</span>
  161.           <span>e</span>
  162.           <span>r</span>
  163.           <span>e</span>
  164.         </h1>
  165.       </div>
  166.     </div>
  167.   </div>
  168.   <div class='pages_page'>
  169.     <div class='pages_page__inner'>
  170.       <div class='logo'>Fashion</div>
  171.       <div class='pagenumber'>4 5</div>
  172.       <div class='content'>
  173.         <div class='content_center'>
  174.           <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
  175.           <h6>Lorem ipsum dolor sit amet</h6>
  176.         </div>
  177.       </div>
  178.       <div class='control'>
  179.         <label for='two'></label>
  180.       </div>
  181.     </div>
  182.   </div>
  183.   <div class='pages_page'>
  184.     <div class='pages_page__inner'>
  185.       <div class='hamburger'>
  186.         <div class='hamburger_part'></div>
  187.         <div class='hamburger_part'></div>
  188.         <div class='hamburger_part'></div>
  189.       </div>
  190.       <div class='control next'>
  191.         <label for='four'></label>
  192.       </div>
  193.       <div class='bg'></div>
  194.       <div class='content_centerimage'>
  195.         <img src='https://profoto.azureedge.net/cdn/049e042/contentassets/f00fdbc1a7764964bd7f6c48f288cb05/profoto-collapsible-reflectors-rossella-vanon-fashion-photography-img_2013-600x900.jpg?width=1280&quality=75&format=jpg'>
  196.       </div>
  197.       <div class='content'>
  198.         <div class='content_center right'>
  199.           <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
  200.           <h6>Lorem ipsum dolor sit amet</h6>
  201.         </div>
  202.       </div>
  203.       <div class='footer'>
  204.         <i class="fab fa-google-plus-g"></i>
  205.         <i class="fas fa-retweet"></i>
  206.         <i class="far fa-heart"></i>
  207.         <i class="far fa-share-square"></i>
  208.       </div>
  209.     </div>
  210.   </div>
  211.   <div class='pages_page'>
  212.     <div class='pages_page__inner'>
  213.       <div class='logo'>Fashion</div>
  214.       <div class='pagenumber'>6 7</div>
  215.       <div class='content'>
  216.         <div class='content_section'>
  217.           <h2>Super</h2>
  218.           <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>
  219.         </div>
  220.         <div class='content_section'>
  221.           <h2>Awesome</h2>
  222.           <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>
  223.         </div>
  224.         <div class='content_section'>
  225.           <h2>Great</h2>
  226.           <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>
  227.         </div>
  228.       </div>
  229.       <div class='control'>
  230.         <label for='three'></label>
  231.       </div>
  232.     </div>
  233.   </div>
  234.   <div class='pages_page'>
  235.     <div class='pages_page__inner'>
  236.       <div class='hamburger'>
  237.         <div class='hamburger_part'></div>
  238.         <div class='hamburger_part'></div>
  239.         <div class='hamburger_part'></div>
  240.       </div>
  241.       <div class='bg'></div>
  242.       <div class='content'></div>
  243.       <div class='footer'>
  244.         <i class="fab fa-google-plus-g"></i>
  245.         <i class="fas fa-retweet"></i>
  246.         <i class="far fa-heart"></i>
  247.         <i class="far fa-share-square"></i>
  248.       </div>
  249.     </div>
  250.   </div>
  251. </div>

Codepen网址:https://codepen.io/jcoulterdesign/pen/oRRRPY

演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/50047.html
云模板

发表评论