less封装函数动画

最新推荐文章于 2022-05-04 09:44:12 发布

大东哦哦

最新推荐文章于 2022-05-04 09:44:12 发布

阅读量467

点赞数

分类专栏： html 文章标签： css3 less

本文链接：https://blog.csdn.net/qq_36454089/article/details/107482734

版权

本文探讨如何通过Less预处理器来减少CSS3动画的代码冗余。针对每次编写动画代码量大和为多个li元素添加层次动画导致的代码重复问题，提出了通过封装less函数和利用循环的方法。现在可以使用.ani()函数，传入动画名和时长来轻松调用动画，同时展示了完整的Less代码实现。

摘要由CSDN通过智能技术生成

给若干 li 添加动画,

问题1:怎么让每次写动画代码量减少

问题2:想给多个li添加层次动画,但li过多,每个li添加 nth-child() , 代码冗余, 怎么减少代码量

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/1.css">
</head>

<body>
  <ul>
    // 给20个li添加相同的动画,添加不同延时时间,形成层次效果
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li&