用户体验

鼠标光标 cursor

自定义复选框

html
1<input type="checkbox" id="awesome" autofocus /> <label for="awesome">Awesome!</label>

css
1input[type='checkbox'] {
2  position: absolute;
3  clip: rect(0, 0, 0, 0);
4}
5
6input[type='checkbox'] + label::before {
7  content: '\a0';
8  display: inline-block;
9  vertical-align: 0.2em;
10  width: 0.8em;
11  height: 0.8em;
12  margin-right: 0.2em;
13  border-radius: 0.2em;
14  background: silver;
15  text-indent: 0.15em;
16  line-height: 0.65;
17}
18
19input[type='checkbox']:checked + label::before {
20  content: '\2713';
21  background: yellowgreen;
22}
23
24input[type='checkbox']:focus + label::before {
25  box-shadow: 0 0 0.1em 0.1em #58a;
26}
27
28input[type='checkbox']:disabled + label::before {
29  background: gray;
30  box-shadow: none;
31  color: #555;
32  cursor: not-allowed;
33}

原生遮罩效果

html
1<button>点击此处出遮罩</button>
2<dialog>
3  <div class="child">这里面是内容</div>
4</dialog>

css
1dialog {
2  width: 100px;
3  height: 100px;
4  border: 1px solid transparent;
5}
6dialog .child {
7  width: 100%;
8  height: 100%;
9  border: 1px solid red;
10}
11dialog::backdrop {
12  background: rgba(0, 0, 0, 0.6);
13}

javascript
1    <script>
2      const modalDom = document.querySelector("dialog");
3      const buttonDom = document.querySelector("button");
4      buttonDom.addEventListener("click", () => {
5        modalDom.showModal();
6      });
7      window.addEventListener("click", (e) => {
8        if (e.target.tagName.toLowerCase() === "dialog") {
9          modalDom.close();
10        }
11      });
12    </script>

模糊背景的遮罩效果

模糊背景的遮罩效果需要用到额外的 html，下面采用 main 标签这个额外的元素，在点击标签后，使 main 标签添加上 filter 属性来达到模糊的效果。

html
1<main>
2  此处忽略很多文字...
3  <button>点击此处出遮罩</button>
4</main>
5<dialog>
6  <div class="child">这里面是遮罩内容</div>
7</dialog>

css
1dialog {
2  width: 100px;
3  height: 100px;
4  border: 1px solid transparent;
5  box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.5), 0 0 0 100vmax rgba(0, 0, 0, 0.2);
6}
7dialog .child {
8  width: 100%;
9  height: 100%;
10  border: 1px solid red;
11}
12/* 遮罩样式 */
13dialog::backdrop {
14  background: rgba(0, 0, 0, 0.6);
15}
16/* transiton 让模糊有缓动效果 */
17main {
18  transition: 0.6s filter;
19}
20/* 遮罩效果后的 main 标签添加filter 属性 */
21main.de-emphasized {
22  filter: blur(2px);
23}

js
1const modalDom = document.querySelector('dialog')
2const buttonDom = document.querySelector('button')
3const mainDom = document.querySelector('main')
4buttonDom.addEventListener('click', () => {
5  modalDom.showModal()
6  //给 main 加上类名
7  mainDom.className = 'de-emphasized'
8})
9window.addEventListener('click', (e) => {
10  if (e.target.tagName.toLowerCase() === 'dialog') {
11    // 删除类的名字
12    mainDom.removeAttribute('class', 'de-emphasized')
13    modalDom.close()
14  }
15})

滚动条控制图片放大效果

html
1<div class="img-slider">
2  <div>
3    <img src="./avatar.jpeg" alt="before" />
4  </div>
5</div>
6<input type="range" />

css
1img {
2  max-width: 100%;
3}
4.img-slider {
5  position: relative;
6  height: 200px;
7  width: 200px;
8  border: 1px solid red;
9  overflow: hidden;
10}
11.img-slider > div {
12  width: 100%;
13  position: absolute;
14  left: 50%;
15  top: 50%;
16  transform: translate(-50%, -50%);
17}

javascript
1const sliderDom = document.querySelector('.img-slider')
2const div = sliderDom.querySelector('div')
3const range = document.querySelector('input')
4range.value = 0
5range.oninput = function () {
6  div.style.width = Number(this.value) + 100 + '%'
7}