html 部分:
<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>
复制代码
效果:
注意点:panel1~5 的意思是五张图片.
css:
*{padding: 0px;margin: 0px;} .panels { display: flex; } .panel {
min-height: 100vh; overflow: hidden; color: white; flex: 1; display: flex; flex-direction: column; text-align: center; line-height: 33.3vh; justify-content: center; background-position: center; 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; } .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); } .panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); } .panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); } .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); } .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } .panel>p { /*border: 2px solid red;*/ flex: 1;/*每一个p占据三分之一的panel的空间.不然的话,你删除flex:1就知道了*/ } .panel>p:first-child { transform: translateY(-100%); } .panel.open-active>p:first-child { transform: translateY(0); } .panel>p:last-child { transform: translateY(100%); } .panel.open-active>p:last-child { transform: translateY(0); } .panel p { text-transform: uppercase; font-size: 2em; } .panel p:nth-child(2) { font-size: 4em; } .panel.open { flex: 5; font-size:40px; }
复制代码
效果：
css 逻辑:
第一:先 panels 弹性布局,使得 panels 里面的 panel 水平排列,panel 也 flex 布局,使得里面的 p 垂直排列,这里面的 flex: 1;代表分别代表所有的 panel 完美适应 body,和所有的 p 完美适应 panel.
第二：点击了是 panel 里面的第一个 p 与最后一个 p 回归原位,点击之前是消失的.
第三：flex:5 我的理解是比原来扩大 5 倍.
js 部分：
const panels = document.querySelectorAll('.panel'); function toggleOpen() { this.classList.toggle("open"); } function toggleActive(e) { if(e.propertyName.includes("flex")) { this.classList.toggle("open-active"); } } panels.forEach(panel=>panel.addEventListener('click',toggleOpen)); panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
复制代码
js 实现逻辑:
第一:先获取所有的 panel
第二:当点击某一个 panel 的时候,就执行
文字(40px)与宽度扩大(5 倍).
第三：是当第二步结束之后（动画结束之后）,第一个 p 与最后一个 p 回来。（注意一下,）
注意一下；toggle 是执行完里面的东西之后比如 class 之后就会回归本来的面貌.
评论