欢迎光临
我的个人博客网站

JS30 – 05 Flex Panel Gallery


相关效果

JS30 - 05 Flex Panel Gallery

代码展示

index.html

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <title>Flex Panels 💪</title>     <link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'> </head>  <body>     <style>         html {             box-sizing: border-box;             background: #ffc600;             font-family: 'helvetica neue';             font-size: 20px;             font-weight: 200;         }          body {             margin: 0;         }          *,         *:before,         *:after {             box-sizing: inherit;         }          .panels {             display: flex;             min-height: 100vh;             overflow: hidden;         }          .panel {             display: flex;             flex-direction: column;             flex: 1;             justify-content: center;             align-items: center;             background: #6B0F9C;             box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);             color: white;             text-align: center;             /* Safari transitionend event.propertyName === flex */             /* Chrome + FF transitionend event.propertyName === flex-grow */             transition:                 font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),                 flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),                 background 0.2s;             font-size: 20px;             background-size: cover;             background-position: center;         }          .panel1 {             background: url(img/haiou.jpg);         }          .panel2 {             background: url(img/d.jpg);         }          .panel3 {             background: url(img/stars.jpg);         }          .panel4 {             background: url(img/e.jpg);         }          .panel5 {             background: url(img/f.jpg);         }          /* Flex Children */         .panel>* {             display: flex;             flex: 1 0 auto;             justify-content: center;             align-items: center;             width: 100%;             margin: 0;             transition: transform 0.5s;         }          .panel>*:first-child {             transform: translateY(-100%);         }          .panel>*:last-child {             transform: translateY(100%);         }          .panel.open-active>*:first-child {             transform: translateY(0);         }          .panel.open-active>*:last-child {             transform: translateY(0);         }          .panel p {             text-transform: uppercase;             font-family: 'Amatic SC', cursive;             text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);             font-size: 2em;         }          .panel p:nth-child(2) {             font-size: 4em;         }          .panel.open {             flex: 5;             font-size: 40px;         }     </style>      <div class="panels">         <div class="panel panel1">             <p>Hey</p>             <p>Let's</p>             <p>Dance</p>         </div>         <div class="panel panel2">             <p>Give</p>             <p>Take</p>             <p>Receive</p>         </div>         <div class="panel panel3">             <p>Experience</p>             <p>It</p>             <p>Today</p>         </div>         <div class="panel panel4">             <p>Give</p>             <p>All</p>             <p>You can</p>         </div>         <div class="panel panel5">             <p>Life</p>             <p>In</p>             <p>Motion</p>         </div>     </div>      <script>          ; (function () {             let panels = document.querySelectorAll('.panel');              function clickHandler() {                 this.classList.toggle('open'); // 无 open 则 add,有 open 则 remove              }              function transitionHandler(e) {                 console.log(e.propertyName);                 if (e.propertyName.indexOf('flex') !== -1)                     this.classList.toggle('open-active');             }              panels.forEach((panel) => {                 panel.addEventListener('click', clickHandler);                 panel.addEventListener('transitionend', transitionHandler);             })         })()      </script>  </body>  </html> 

参考

赞(0) 打赏
未经允许不得转载:张拓的天空 » JS30 – 05 Flex Panel Gallery
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏