css实现动画的技巧

一些 css 动画技巧

如何让 css 记住鼠标的点击效果：

• 使用，可以记住点击状态
• 我们可以结合 label 元素的 for 属性 来灵活的控制 input 元素的书写位置，这一样一来就可以非常灵活的使用 css 的选择器了。

css 如何控制不固定有大小元素的展开收起动画

• 参考：http://www.manongjc.com/detail/54-dmlentlhcrowogs.html
  • 参考截图 (opens new window)

如何通过点击事件利用 css 重复执行某个动画

• **关键点：**当一个元素由 dispaly:none 到显示时，动画以及过度效果会自动启动。
• 哪些元素被点击就具有 foucs 伪类：textarea 、input、 button
  • 任意元素都有 foucs 伪类，只是触发条件不一样：https://www.cnblogs.com/defims/archive/2011/10/16/2946705.html
• 例如我们给一个按钮添加点击波纹的特效时，可以像下面这样写：

button {
  &:focus:after {
    display: block;
    opacity: 1;
    border: 1px solid red;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    border-radius: inherit;
    box-shadow: 0 0 0 0 #171436;
    opacity: 0.2;
    animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1), waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
    animation-fill-mode: forwards;
    content: "";
    pointer-events: none;
  }

  &:active:after {
    // 鼠标按下时每个元素都会触发active这个伪类，直到鼠标抬起。
    display: none; // 利用它来让上面的动画重启。
  }
}

@keyframes waveEffect {
  100% {
    box-shadow: 0 0 0 #171436;
    box-shadow: 0 0 0 6px #171436;
    box-shadow: 0 0 0 6px #171436;
  }
}

@keyframes fadeEffect {
  100% {
    opacity: 0;
  }
}

css 边框动画

• 很多原理：https://my.oschina.net/sl1673495/blog/4917295
• 渐变边框：https://codepen.io/comehope/pen/odpRKX
• 比较炫酷的边框渐变线条流动动画：参考这里 (opens new window)
  • animation-delay 负值总结：
  • 原文：https://juejin.cn/post/7036192813758808078 文章截图 (opens new window)
    • animation-delay 设置负值的动画会立即执行
    • 负值设置多少，动画跳过多少秒进入动画周期。例如，设置 -1s 时，动画就会从 1s 开始执行
• 利用 conic-gradient（圆锥渐变） 实现边框 渐变：
  • https://www.cnblogs.com/coco1s/p/7079529.html
• 利用伪类 before 实现边框渐变：
  • https://mp.weixin.qq.com/s/Kxzau7UuiU1lougwL2i6tA
    • 文章截图 (opens new window)
  • 伪类 before：必须使用 before 来完成背景的渐变，而且 z-index 为负数，否则父元素的内容显示不出来。
    • 如果伪类 before 的所有祖元素（注意是祖元素不是父元素）没有层级，那么 z-index 为负数，会让伪类下沉到 body 的下面去。但是一旦哪一级祖元素有层级，那么就下沉到这个祖元素的下面去。我们要理解这一点，否则可能因为层级关系导致伪类 before 一直被其他元素挡住而出不来效果。简而言之，伪类 before 的第一级祖元素，最好层级够高（并且没有背景色，否则背景色会挡住伪类 before），就可以避免出问题。

怎么让滚动条不占用页面空间

• overflow: overlay;
• 例如不占页面 X 轴的位置:设置元素的 min-width,然后配合 overflow-x:hidden;

css 逐帧动画

• 参考：https://juejin.cn/post/7089997204252786702

<div class="typing">
  <div class="typing-effect">Typing effect for text</div>
</div>
<style>
  .typing {
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .typing-effect {
    width: 22ch;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    font-family: monospace;
    font-size: 2em;
    // .5s：表示动画的持续时间为 0.5 秒。
    // step-end：定义了动画的计时函数为阶梯函数，并且在每个步进结束时发生跳变。这意味着动画会在每个时间间隔的末尾快速过渡到下一个状态，而不是平滑过渡。
    // infinite：使动画无限循环播放，没有次数限制。
    // alternate：让动画在奇数次正向播放，在偶数次反向播放，从而产生来回交替的效果。
    // 结合：https://www.hocode.com/orgtec/ui/0012.html#D理解
    // jump-start / jump-end：分别对应 start 和 end，但更明确地表明跳过初始/最终状态。他的值就等于下面的step-start
    // jump-none：保留所有关键帧状态，包括首尾，适用于至少两帧的动画。他的值就等于下面的 step-end
    // jump-both：同时跳过首尾状态，实际用途较少

    animation: typing 2s steps(22), effect 0.5s step-end infinite alternate;
  }

  @keyframes typing {
    from {
      width: 0;
    }
  }

  @keyframes effect {
    50% {
      border-color: transparent;
    }
  }
</style>

• https://mp.weixin.qq.com/s/Nk1-t578VXxT2SGF9W3n9g
• https://mp.weixin.qq.com/s/tm6P1xv84bi_af70e8DprA

drop-shadow 什么作用：

-你是否使用过 box-shadow 为透明的图片添加阴影，却让其看起来像添加了一个边框一样？然而解决方案是使用 drop-shadow。drop-shadow 的工作方式是，其遵循给给定图片的 Alpha 通道。因此阴影是基于图片的内部形状，而不是显示在图片外面。

• 参考：https://stackdiary.com/useful-css-tricks/