html网页制作-百叶窗

本文主要是介绍html网页制作-百叶窗，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

网页制作-百叶窗

效果图

在这里插入图片描述

html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>拓展卡片|百叶窗</title><link rel="stylesheet" type="text/css" href="byc.css"></head>
<body><div class="container"><!-- https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQd9&auto=format&fit=crop&w=1350&q=80 --><div class="panel active" style="background-image: url('images/0.jpg');"><h3>111</h3></div><div class="panel" style="background-image: url('images/1.jpg');"><h3>222</h3></div><div class="panel" style="background-image: url('images/2.jpg');"><h3>333</h3></div><div class="panel" style="background-image: url('images/3.jpg');"><h3>444</h3></div><div class="panel" style="background-image: url('images/4.jpg');"><h3>555</h3></div></div><script src="byc.js"></script></body>
</html>

css代码

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
/* 字体库 *//* 初始化 */
*
{box-sizing: border-box;/* 盒子 */
}body
{/* 引入字体 */font-family: "Muli",sans-serif;/* 弹性布局  水平加垂直居中*/display: flex;align-items: center;justify-content: center;/* 100%的窗口高度 */height: 100vh;/* 溢出隐藏 */overflow: hidden;margin: 0;
}.container
{display: flex;width: 90vw;
}.panel
{/* 跟封面一样大 */background-size: cover;/* 把图片居中 */background-position: center;background-repeat: no-repeat;/* 高度 */height: 80vh;/* 圆角边框 */border-radius: 50px;color: #fff;/* 鼠标放上变小手 */cursor: pointer;flex: 0.5;margin: 10px;/* 相对定位 */position: relative;/* 加载 */-webkit-transition: all 700ms ease-in;
}.panel h3
{font-size: 24px;/* 绝对定位 */position: absolute;bottom: 20px;left: 20px;/* 距离上面0 */margin: 0;/* 隐藏 */opacity: 0;
}.panel.active
{/* 图片展开 5 */flex: 5;}.panel.active h3
{opacity: 1;/* 字展开 */transition: opacity 0.3s ease-in 0.4s;
}@media (max-width:480px)
{.container{width: 100vw;}.panel:nth-of-type(4),.panel:nth-of-type(5){display: none;}
}

js代码

const panels = document.querySelectorAll('.panel');panels.forEach(panel =>{panel.addEventListener('click',()=>{removeActiveClasses()panel.classList.add('active')})
})function removeActiveClasses(){panels.forEach(panel =>{panel.classList.remove('active')})
}