细小功能收纳盒

简单的

猜想-网站迁移提示

给点信息提示，然后条性重定向一下↓

1
2
3
4
5
6
7
<html>
	....
    <script>
        ....
    	setTimeout(() => location.replace('新网页'), 1000)
    </script>
</html>

简易悼念模式-filter: grayscale(100%);

悼念模式 是指在某些特殊场合下，例如国家哀悼、重大灾难等，为了表达对逝者的哀悼和敬意，网站或应用程序会采用特定的方式展示，例如改变网站或应用程序的主题色、添加悼念标志等。

实现哀悼模式的方式可以因具体情况而异，但通常可以通过以下方法之一来实现：

  1. CSS样式变更：使用CSS样式来改变网站或应用程序的主题色、字体颜色、背景图像等，以呈现悼念的氛围。
  2. 图像或标志添加：在网站或应用程序中添加悼念标志或图像，例如黑色绸带、蜡烛等，以表达对逝者的哀悼和敬意。
  3. 功能限制：在某些场合下，为了避免影响哀悼活动的进行，网站或应用程序会限制一些功能，例如禁止发布带有娱乐性质的内容。

以上方法可以单独使用，也可以组合使用，根据具体情况来选择合适的方式来实现哀悼模式。

但最为简易的悼念模式当属找个办法给网页蒙一层灰↓

效果

image-20230510104845170

实现

1
2
3
body {
    filter: grayscale(100%);
}

filter：用于对元素应用图形效果，比如模糊、饱和等。

grayscale: 将元素变为灰度图像。

选中内容色彩-::selection {}

当我们访问一个极具特色的网站，选中网站中一些文本内容时往往会发现：被选中后的部分色调非常符合该网站特色（语言艺术hhh）

其实就是diy了一下选中后文本的颜色和背景色等。我们不妨拿自己的项目试试手。

效果

image-20230508160842545

实现

1
2
3
4
::selection {
    color: white;
    background-color: brown;
}

::selection 是一个 CSS 伪元素，用于设置文本选中时的样式。

自定义滚动条-::-webkit-scrollbar

为了确保浏览器的兼容性，在使用 ::-webkit-scrollbar 属性时，建议同时提供一个标准的 CSS 属性作为备选方案，例如 scrollbar-width 属性和 scrollbar-color 属性。

效果

image-20230508165539768

实现

1
2
3
4
5
6
7
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background: pink;
}

毛玻璃-backdrop-filter

就是一个块块，模模糊糊透透明明（要是讲这种需求会不会被追着打）。

实现毛玻璃特效可以使用CSS的backdrop-filter属性，该属性可以为元素添加一个背景过滤器，可以实现模糊、灰度、透明度等效果。

效果

image-20230508164110933

实现

1
2
3
4
5
<div class="under">
  <div class="glass">
    <p>这是一个带毛玻璃特效的块</p>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.glass {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border-radius: 1rem;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
}
.under {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
}

较为复杂的

来搭建一个轮播图吧！！

第一步：先来一个不加空间的简单实现。

实现了最基本图片无限循环播放

1
2
3
4
5
6
7
<body>
    <div class="slideshow">
        <img class="slide active" src="https://w.wallhaven.cc/full/1p/wallhaven-1ppld1.jpg" alt="Image 1">
        <img class="slide" src="https://w.wallhaven.cc/full/j3/wallhaven-j3m8y5.png" alt="Image 2">
        <img class="slide" src="https://w.wallhaven.cc/full/kx/wallhaven-kx82d6.png" alt="Image 3">
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.slideshow {
    margin: auto;
    width: 400px;
    height: 300px;
    display: flex;
    overflow: hidden;
    position: relative;
}

.slideshow img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.slideshow .slide {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .5s ease-in-out;
}

.slideshow .slide.active {
    opacity: 1;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
window.addEventListener('DOMContentLoaded', function() {
  var slides = document.querySelectorAll('.slideshow .slide');
  var currentSlide = 0;

  function showSlide(index) {            
    slides[currentSlide].classList.remove('active');
    slides[index].classList.add('active');
    currentSlide = index;
  }

  function nextSlide() {
      let nextIndex = currentSlide + 1;
      if (nextIndex >= slides.length) {
          nextIndex = 0;
      }
      showSlide(nextIndex);
  }

  setInterval(nextSlide, 3000);
});

第二步：初次完善功能，我见到最多的是有左右两箭头来手动控制上下页。

完善了前后页手动切换功能，维护了一下样式和逻辑。

1
2
3
4
5
6
7
8
9
<div class="slideshow">
    <div class="controls">
        <button id="prevBtn">←</button>
        <button id="nextBtn">→</button>
    </div>
    <img class="slide active" src="https://w.wallhaven.cc/full/1p/wallhaven-1ppld1.jpg" alt="Image 1">
    <img class="slide" src="https://w.wallhaven.cc/full/j3/wallhaven-j3m8y5.png" alt="Image 2">
    <img class="slide" src="https://w.wallhaven.cc/full/kx/wallhaven-kx82d6.png" alt="Image 3">
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
.slideshow {
    margin: auto;
    width: 400px;
    height: 300px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 首先是一个典型的图片在盒子中的自适应 */
.slideshow img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
.slideshow .slide {
    /* 相对于父元素绝对定位 */
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    /* 专门添加了一个透明度过渡，其实不添加也没啥问题，而且一般轮播图似乎是左右衔接切换的.... */
    transition: opacity .5s ease-in-out;
}

.slideshow .slide.active {
    opacity: 1;
}

.slideshow .controls {
    display: flex;
    /* 左右按键展到两侧 */
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.slideshow .controls button {
    background-color: rgba(105, 105, 105, .5);
    border: none;
    border-radius: 5px;
    height: 20%;
    color: white;
    font-size: 25px;
    padding: 10px;
    cursor: pointer;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
let slides = document.querySelectorAll('.slideshow .slide');
let currentSlide = 0;
let prevBtn = document.getElementById('prevBtn');
let nextBtn = document.getElementById('nextBtn');
let timer = null

// 控制轮播图展示，删除旧一个active，添加新一个active
function showSlide(index) {
    slides[currentSlide].classList.remove('active');
    slides[index].classList.add('active');
    currentSlide = index;
}

// 一下两个函数主要实现前后一页的切换，第一个函数要被用到自动轮播中
function nextSlide() {
    // 当前索引+1（存储到新的参数中，方便控制轮播展示）
    let nextIndex = currentSlide + 1;
    // 若到底则回到首个
    if (nextIndex >= slides.length) {
        nextIndex = 0;
    }
    // 给轮播控制函数传参操作
    showSlide(nextIndex);
}

function prevSlide() {
    let prevIndex = currentSlide - 1;
    if (prevIndex < 0) {
        prevIndex = slides.length - 1;
    }
    showSlide(prevIndex);
}

// 按钮监听
nextBtn.addEventListener('click', function () {
    // 清空计时器
    clearInterval(timer)
    // 执行一次按键对应操作
    nextSlide()
    // 继续自动轮播
    timer = setInterval(nextSlide, 3000)
});
prevBtn.addEventListener('click', function () {
    clearInterval(timer)
    prevSlide()
    timer = setInterval(nextSlide, 3000)
});
timer = setInterval(nextSlide, 3000)

第三步：图片怼到顶上太难看了，还是居中展示吧，这里修改了一下布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.slideshow .slide {
    ....
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.slideshow .controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 20%;
    z-index: 1;
}

第四步：我想加一个鼠标滑动切换。