ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

50 Projects(大抵会不足50个,毕竟目的是了解语法构造去制作游戏)

2022-06-16 14:05:03  阅读:185  来源: 互联网

标签:flex 大抵 search 50 width background active Projects panel


50 Projects

01 Expanding Cards(附带新手菜鸡注释)

Live Demo

HTML:

<!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">
    <title>Expanding cards</title>
    <link rel="stylesheet" href="/static/css/Expanding-cards.css">
</head>
<body>
    <div class="container">
        <div class="panel active" style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
            <h3>Explore World</h3>
        </div>
        <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
            <h3>Wild Forest</h3>
          </div>
          <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')">
            <h3>Sunny Beach</h3>
          </div>
          <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')">
            <h3>City on Winter</h3>
          </div>
          <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
            <h3>Mountains - Clouds</h3>
          </div>
    </div>
    <script type="module" src="/js/Expanding-cards.js"></script>
</body>
</html>

CSS

* {
    box-sizing: border-box;
}

body {
    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;
    /* 过渡方式,好多动画用到这个,看来着重要学一下,不过这个all好像去掉不影响大局? */
    transition: all 700ms ease-in;
    /* 时间影响展示时间,感觉调节时间匹配更好 */
}

.panel h3 {
    font-size: 24px;
    position: absolute;
    /* 定义说明文字位置 */
    bottom: 20px;
    left: 20px;
    margin: 0;
    /* 文字透明度 */
    opacity: 0;
}

.active {
    /* 这个MDN上说是增长系数,就是比值可以这样说吧,按我来讲 */
    flex: 5;
}

.active h3 {
    /* 如果有active属性,就将说明文字显现 */
    opacity: 1;
    transition: opacity 0.3s ease-in 0.4s;
}

@media (max-width: 480px) {
    /* 一般而言这种都是电脑展示吧,所以很鸡肋?当然依然不可或缺,可以不用,但不能没有 */
    .container {
        width: 100vh;
    }
}
/* 下面这个真的不知道为什么有啊 */
/* .panel:nth-of-type(4),
.panel:nth-of-type(5) {
    display: none;
} */


JS

const panels = document.querySelectorAll('.panel');
// 找到pnael标签,这应该是列;
// console.log(panels);


// 遍历所有的元素,查看谁被点击了,找到之后将其他元素的active全部清除,并为当前属性添加active
panels.forEach(function(panel) { //遍历 panels 序列
    panel.addEventListener('click', function(){
        removeActiveClasses(); //移除 active标签
        panel.classList.add('active');
    });
});

function removeActiveClasses () {
    panels.forEach(function (panel) {
        panel.classList.remove('active');
    })
}

Live Demo

HTML:

<!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">
    <title>Hidden-search</title>
    <link rel="stylesheet" href="/static/css/hidden-search.css">
    <link rel="stylesheet" href="/third-part/font-awesome-4.7.0/css/font-awesome.min.css">
    
</head>
<body>
    <div class="search">
        <input type="text" class="input" placeholder="Search...">
        <button class="btn">
            <i class="fa fa-search" aria-hidden="true"></i>
        </button>
    </div>
    <script type="module" src="/js/hidden-search.js"></script>
</body>
</html>

CSS

* {
    box-sizing: border-box;
}

 body {
     /* 背景图片为渐变色 */
    background-image: linear-gradient(90deg,#7d5fff,#7158e2);
    /* flex布局 */
    display: flex;
    /* 竖直居中 */
    align-items: center;
    /* 水平居中 */
    justify-content: center;
    /* 非常奇怪啊,有100vh可以居中,100%不成 */
    height: 100vh;
    overflow: hidden;
    margin: 0;
}  

.search {
    position: relative;
    height: 50px;
}

.search .input {
    background-color: #fff;
    border: 0;
    font-size: 18px;
    padding: 15px;
    height: 50px;
    width: 50px;
    /* 转变属性width */
    transition : width 0.3s ease;

}

.btn {
    background-color: #fff;
    border: 0;
    cursor: pointer;
    font-size: 24px;
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
    width: 50px;
    /* 平滑移动 */
    transition : transform 0.3s ease;
}
.btn:focus,
.input:focus {
    outline: none
}

.active .input {
    width: 200px;
  }

.active .btn {
    /* 向X轴偏移198px */
    transform: translateX(198px);
  }



JS

let search = document.querySelector('.search');
let btn = document.querySelector('.btn');
let input = document.querySelector('.input');

// 添加监听函数
btn.addEventListener('click',function(e) {
    // 如果active已经存在,则移除它,否则添加属性
    search.classList.toggle('active');
    // 效果:<div class="search active"></div>
    console.log(search);
    // input.focus();
});

标签:flex,大抵,search,50,width,background,active,Projects,panel
来源: https://www.cnblogs.com/Holdpark/p/16381691.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有