张拓的天空相关效果
代码展示
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> 
最新评论
我这边UI界面用React重写了，地址是 https://vps.kkwen.cn，有需要可以提供给你
Thankfulness to my father who told me concerning this webpage, this web site is genuinely remarkable