首页 > 其他分享 >dairy-20221023

dairy-20221023

时间:2022-10-23 21:44:41浏览次数:79  
标签:flex 20221023 width dairy background active display panel

preface

今天准备开始进行有计划的代码训练,今天开始的是50projects50days计划,这个时间段肯定是不能每天做这个的,有时间就弄一弄吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>expand-cards</title>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
        * {
            box-sizing: border-box;
        }
        body {
            background-color: #000;
            font-family: 'Muli', sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            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;
            margin: 0;
            opacity: 0;
        }
        .panel.active {
            flex: 5
        }
        .panel.active h3 {
            opacity: 1;
            transition: opcity 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;
            }
        }
</style>
</head>
<body>
    <div class="container">
        <div class="panel active" style="background-image: url('/i/l/?n=22&i=blog/2154097/202210/2154097-20221023212402312-1400592522.png')">
            <h3>pic1</h3>
        </div>
        <div class="panel" style="background-image: url('/i/l/?n=22&i=blog/2154097/202210/2154097-20221023212556711-1415081451.png')">
            <h3>pic2</h3>
        </div>
        <div class="panel" style="background-image: url('/i/l/?n=22&i=blog/2154097/202210/2154097-20221023212602931-2046901331.png')">
            <h3>pic3</h3>
        </div>
        <div class="panel" style="background-image: url('/i/l/?n=22&i=blog/2154097/202210/2154097-20221023212622331-790547261.png')">
            <h3>pic4</h3>
        </div>
        <div class="panel" style="background-image: url('/i/l/?n=22&i=blog/2154097/202210/2154097-20221023212624465-242757446.png')">
            <h3>pic5</h3>
        </div>
    </div>
    <script>
        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')
            })
        }
    </script>
</body>
</html>

标签:flex,20221023,width,dairy,background,active,display,panel
From: https://www.cnblogs.com/wanderer-cjh/p/16819663.html

相关文章

  • 周总结--20221023
    代码实战篇要求.按照软件开发⽬录规范创建出完整⽬录.核⼼逻辑⽂件中编写调用⽤户注册登录功能,.注册功能要有校验⽤户是否存在和数据保存的功能.common.py⽂件中编写......