纯の前端练习

20200118: 刷到第 50 号效果，想想原来自己大部分用 js 写，判断各种边界情况，感觉好弱鸡。 突然对 css 有种领悟：css 的美是自然雕琢的美，不像 js 那样需要人工抹粉涂口红！

20200104: 刷到 999 成神，刷到 9999 超神. (有生之年系列?)

20190429: 补到今天又点感觉，简单特效，看了效果就能写~

get 新的 css-tricks

.option-input {
  -webkit-appearance: none;
  -o-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  position: relative;
  top: 13.33333px;
  right: 0;
  bottom: 0;
  left: 0;
  height: 40px;
  width: 40px;
  transition: all 0.15s ease-out 0s;
  background: deepskyblue;
  border: none;
  color: white;
  cursor: pointer;
  display: inline-block;
  margin-right: 0.5rem;
  outline: none;
  position: relative;
  z-index: 1000;
}

option-input:hover {
  background-color: white;
}

.option-input:checked::before {
  height: 40px;
  width: 40px;
  position: absolute;
  content: '✓';
  display: inline-block;
  font-size: 30.5559px;
  text-align: center;
  line-height: 40px;
}

真是感慨 css-tricks 的精髓所在！ 原来卡片叠飞的效果这样搞啊！

<div class="imgBx">
  <img src="./1.jpeg" alt="1" />
  <img src="./1.jpeg" alt="1" />
  <img src="./1.jpeg" alt="1" />
</div>

.container .imgBx:hover img:nth-child(3) {
  transform: translate(100px, -100px);
}
.container .imgBx:hover img:nth-child(2) {
  transform: translate(50px, -50px);
  opacity: 0.5;
}
.container .imgBx:hover img:nth-child(1) {
  transform: translate(0px, 0px);
  opacity: 0.1;
}

此动画很能体现 css 的 tricks 精髓所在！

• css 倒映 -webkit-box-reflect: below 1px linear-gradient(transparent, #003)
• css 滤镜调色 filter: hue-rotate(115deg);
• 按钮左上和右下原来是两个小方块！
• 该动画精髓在延迟 transition-delay

• 🎉 实现原理：
  • 一个大容器定下宽和高
  • 一个光标 div 在大容器下根据 index 算 transformY 移动即可

• text-rendering: optimizeLegibility; 浏览器在绘制文本时将着重考虑易读性，而不是渲染速度和几何精度.它会使字间距和连字有效。 (Chrome 上没效果)

get 到 css 书写规整新技能

原理是张背景图 😂

效果一般点

• 🎉 实现原理：
  • 首先 “border-radius: 0 0 50% 50%“ 画半个圆的
  • 再将 “border-radius: 0 0 50% 50%/0 0 100% 100%;” 圆的垂直方向也设，成一个椭圆。
  • ”border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px;“

• 🎉 实现原理：
  • 多个 "box-shadow" 的错位 + "border-radius" 实现小点阵效果；
  • "background-color: currentColor;" 可以实现每行第一个小圆点带色；
  • 使用 "animation-delay: -1s;" 让两个点阵有间隔；

• 🎉 实现原理：
  • .face 都设 absolute，“后”覆盖“前”
  • 对别对卡片容器.face2 和里面 h2 对 transition
  • 改变高度和设置容器字体大小
  • 这里使用 em，非常恰当，因为 em 就是根据上级父元素大小来定子元素大小
• ✅ 知识点：
  • grid 布局
    • 在.container 中设宽度 1200px，然后定义为 grid 布局，设置 grid 布局中每列的样式，最小 350px 的宽度，最大 1fr(均分)，auto-fit 表示一行能装几个装几个 card;
    • grid-gap 设置每个轨道之间的间隙，不含最左和最右；
    • 使用 margin 让其水平居中
  • 对半视差折纸展示
    • 在容器内部加个 before 的伪类，然后占位 50%和 10%的透明
  • 关于卡片内部布局
    • 先设两个展示也都 absolute，因 html 元素先后顺序，天生后面元素覆盖前面元素，则不需要设置 z-index

• ✅ 知识点：html { scroll-behavior: smooth; }

• 🎉 实现原理：
  • 外层有个 flex 容器放 N 个图片，每个图片设 flex-grow 和 transition
  • 让被聚焦时，再次设置 flex-grow 大小，这个大小得根据图片宽度来定
  • 图片容器再次 flex，因为内部描述容器需要定位
  • 外层容器聚焦时给默认所有图片容器设置透明度较黑
  • 指定给具体内层获得聚焦的图片容器设置透明度为零
• ✅ 知识点：
  • flex-grow 最佳实现之一

• 🎉 实现原理：使用帧动画将承载文本的容器宽度(width)一点一点的放大，直到所有文字全部展现。
• ✅ 知识点：
  • ch 数字 0️⃣ 的宽度，好比理解为一个等宽字体的短度，这里使用 ch 精确控制容器宽度(到底要显示几个字母)
  • white-space: nowrap; 规定段落中的文本是否换行，因为容器刚开始宽度很小，必须设置 nowarp 不换行，记得超出部分隐藏
  • steps 在 css3-animation 中，该属性表示动画分为几段。怎么理解？简单理解显示器刷新频率。