平滑滚动

平滑滚动，指滚动时有动画效果。

  1. scroll-behavior: smooth;

轮播效果

Scroll Snap 是 CSS中一个独立的模块，可以让网页容器滚动停止的时候，自动平滑定位到指定元素的指定位置，包含 scroll- 以及 scroll-snap- 等诸多CSS属性。

轮播的Demo：

  1. .slides {
  2.   /* We set the scroll snapping */
  3.   scroll-snap-type: x mandatory;
  4.   /* Necessary for mobile scrolling */
  5.   -webkit-overflow-scrolling: touch;
  6.   /* For layout purposes */
  7.   display: flex;
  8.   /* To allow horizontal scrolling */
  9.   overflow-x: scroll;
  10. }

手风琴效果

移动到某图上，某图展开，其他图片折起来。完整代码。

自定义输入框中的光标颜色

  1. caret-color: #f60;

资源