一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第 7 天，点击查看活动详情。
如何实现打字机效果
之前在做 ppt 的时候，发现里面有一种打字机效果，效果就如同正在手动敲代码，然后就搜了下 CSS 怎么去实现这个功能，来学习学习。
首先创建一个容器来承载文字，里面主要分为两个部分，一个是需要展示的文字，另一个则是闪烁的打字光标。
给两个部分分别设置 typing 和 blink 动画，其中的steps可以让动画断断续续，而非连续执行（具体可参见张鑫旭大佬的《CSS3 animation属性中的steps功能符深入介绍》），通过配合改变容器的宽度，从而创造了打字的效果。
<div class="typewriter-effect">
<div class="text" id="typewriter-text"></div>
</div>
.typewriter-effect {
display: flex;
justify-content: center;
font-family: monospace;
}
.typewriter-effect > .text {
max-width: 0;
animation: typing 3s steps(var(--characters)) infinite;
white-space: nowrap;
overflow: hidden;
}
.typewriter-effect:after {
content: " |";
animation: blink 1s infinite;
animation-timing-function: step-end;
}
@keyframes typing {
75%,
100% {
max-width: calc(var(--characters) * 1ch);
}
}
@keyframes blink {
0%,
75%,
100% {
opacity: 1;
}
25% {
opacity: 0;
}
}
const typeWriter = document.getElementById('typewriter-text');
const text = 'Lorem ipsum dolor sit amet.';
typeWriter.innerHTML = text;
typeWriter.style.setProperty('--characters', text.length);
这里可能有个单位比较陌生 ,那就是 ch, 这是代表一个数字 0 的宽度。1ch = 1 个英文 = 1 个数字，2ch = 1 个中文，并且 ch 是一个相对单位，会随着当前容器的 font-size变化而变化。
在线示例戳这里：打字机效果
自定义滚动条
滚动条是个很常见的东西，但是有些浏览器自带的滚动条确实不好看，又或者是滚动条的样式不符合 UI 设计，无法满足样式需求，毕竟这玩意也影响美观。但是我们也可以自己定义滚动条的样式来满足需求。
首先使用 overflow-y: scroll来使内容超过容器高度时滚动
然后可以使用以下伪元素选择器去修改基于 webkit 的浏览器的滚动条样式，不过此技术仅适用于基于 webkit 的浏览器。
::-webkit-scrollbar —— 整个滚动条。
::-webkit-scrollbar-button —— 滚动条上的按钮（上下箭头）。
::-webkit-scrollbar-thumb —— 滚动条上的滚动滑块。
::-webkit-scrollbar-track —— 滚动条轨道。
::-webkit-scrollbar-track-piece —— 滚动条没有滑块的轨道部分。
::-webkit-scrollbar-corner —— 当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角。
::-webkit-resizer —— 出现在某些元素底角的可拖动调整大小的滑块。
<div class="custom-scrollbar">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
Iure id exercitationem nulla qui repellat laborum vitae, <br />
molestias tempora velit natus. Quas, assumenda nisi. <br />
Quisquam enim qui iure, consequatur velit sit?
</p>
</div>
.custom-scrollbar {
height: 70px;
overflow-y: scroll;
}
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #1E3F20;
border-radius: 12px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #4A7856;
border-radius: 12px;
}
在线示例：自定义滚动条
滚动进度条
当页面过长的时候，如果用户想知道自己处在文档中的某个位置，那进度条就发挥了大作用。
- 我们可以先获取整个文档的高度
- 再监听滚动事件，获取到
scrollTop，这样我们就知道滚动了多少 - 在根据比例，去设置滚动条宽度的样式
<div id="scroll-progress"></div>
body {
min-height: 200vh;
}
#scroll-progress {
position: fixed;
top: 0;
width: 0%;
height: 4px;
background: #7983ff;
z-index: 10000;
}
const scrollProgress = document.getElementById('scroll-progress');
const height =
document.documentElement.scrollHeight - document.documentElement.clientHeight;
window.addEventListener('scroll', () => {
const scrollTop =
document.body.scrollTop || document.documentElement.scrollTop;
scrollProgress.style.width = `${(scrollTop / height) * 100}%`;
});
在线案例戳这里：滚动进度条
PS：但是后面又发现了一个滚动条实现的技巧，只用 CSS 就能完成了，就是这篇文章《不可思议的纯 CSS 滚动进度条效果》，简直是拓展了新思路。
focus-within 实现表单输入勿扰模式
说起 :focus伪类，大家都很熟悉，可以表示获得焦点的那个元素，但是这个伪类只能作用于焦点元素的本身，比如在表单输入的时候，当鼠标点击 input 输入框，获取的就是 input 元素，不能作用于其他元素。
而 :focus-within 则是如果任何子元素获得焦点，则这个伪类都会作用于该父元素。
form:focus-within {
background: cyan;
}
对于这个样式来说，如果表单中的某个 input 框获取焦点时，整个表单的 form 元素都被高亮。
那这个可操作性就强了，只要子元素获焦，那么父元素就可以对包含的任意元素进行样式控制。
还是以表单作为例子，当我们在表单上的进行输入，选择或者进行交互的时候，我们可以让页面上除表单以外的元素全部不可见，达到一个让用户专注输入的效果。CSS 核心代码如下：
form:focus-within {
outline: 2000px solid hsla(0,0%,100%,1);
}
当 form 的子元素聚焦时，设置一个 2000px，100%亮度的 outline，将其他元素隐藏起来。
在线案例可以戳这里：focus-within 实现专注输入
带前缀的输入框
我们经常可以在组件库中看到输入框带上前缀，在输入电话号码时尤为常见。
实现原理也很简单：
- 创建一个总体的父容器，用来包裹前缀和输入框，并且做好布局和排列。
- 删除
input的边框和轮廓，将它们作用于父容器上，使父容器看起来像一个整体上的输入框。 - 当用户与页面交互时，使用上面讲到的
:focus-within来设置父元素的样式，来增强用户体验。
<div class="input-box">
<span class="prefix">+86</span>
<input type="tel" placeholder="123 456 789"/>
</div>
.input-box {
display: flex;
align-items: center;
max-width: 300px;
background: #fff;
border: 1px solid #a0a0a0;
border-radius: 4px;
padding-left: 0.5rem;
overflow: hidden;
font-family: sans-serif;
}
.input-box .prefix {
font-weight: 300;
font-size: 14px;
color: #999;
}
.input-box input {
flex-grow: 1;
font-size: 14px;
background: #fff;
border: none;
outline: none;
padding: 0.5rem;
}
.input-box:focus-within {
border-color: #777;
}
在线案例戳这里：带前缀的输入框
