学而思css动画使用-CSDN博客

本文链接：https://blog.csdn.net/qq_35516360/article/details/122063974

本文介绍了如何利用学而思的CSS动画资源进行前端展示，并讨论了CSS在前端加密和混淆的局限性。示例代码展示了如何应用CSS动画效果，同时指出虽然可以直接使用下载的CSS文件，但加密和混淆对于CSS保护仍存在挑战。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文链接: 学而思css动画使用

上一篇: canvas 水墨画效果

这个文件有点大... 而且不知道是否侵权... 想要的自己官网下吧, 我也只是瞅瞅而已...

基本上都是帧动画的格式, 但是这种比较适合做展示, 不适合同步以及多个的先后关系, 因为依赖的接口以及浏览器执行调度可能会有一些偏差, 但是bug是真的少

前端css如何做加密和混淆呢? 看着不太可能, js动画其实也都可以用采样的方式来, css就基本上可以直接爬取了, 骨骼动画或者其他用二进制封装的, 基本上也只是提高难度, 但还是没法杜绝

下载学而思的css文件, 然后直接用就行了, 里面有很多写好的效果, 可以自定义时间

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/anime-keyframe.css" />

    <style>
      #box {
        width: 100px;
        height: 100px;
        background: yellowgreen;
      }
    </style>
  </head>

  <body>
    <div id="box"></div>

    <script>
      const box = document.getElementById("box");

      document.addEventListener("click", () => {
        box.style.animation = "wipeInDown 10s";
      });
    </script>
  </body>
</html>