搜索 登录注册
×

热门关键词：Web前端|前端开发|HTML5|CSS3|jQuery|CSS3动画

在没有JavaScript的情况下创建强大的CSS动画效果

作者：Terry2021.02.05来源：Web前端之家浏览：5934评论:0
关键词：htmlcss

在本文中，我们将仅使用CSS探索Web上的动画世界。我们将首先使用SVG和CSS组合创建一个简单的动画。然后，我们将仅使用HTML和CSS创建另外两个动画。我们还将讨论何时需要将JavaScript付诸行动以及CSS的局限性。

到本文结尾，您将能够使用CSS来创建动画，从而支持使用JavaScript。您还可以识别何时需要使用JavaScript创建动画。

为了充分利用本文，假定您至少具有CSS和HTML的核心知识。

绘画效果动画

这是令人印象深刻的动画，看似易于创建。下面是我们的目标的屏幕截图。

1610725258powerful-css-svg-animation.gif

我们首先需要为徽标创建SVG： 

<svg xmlns="http://www.w3.org/2000/svg" width="279.15" height="343.95" overflow="visible" stroke="#000" stroke-width="1">
 <path d="M110.57 248.64c-22.7-21.25-45.06-42.09-67.31-63.06-11.73-11.06-23.32-22.26-34.87-33.51C-2.6 141.35-2.86 128 8.02 117.42 47.67 78.82 87.46 40.35 127.21 1.84c.46-.44 1.03-.77 2.47-1.84 12.52 13.66 25.06 27.34 37.1 40.47-4.44 4.76-10.06 11.31-16.21 17.33-22.69 22.2-45.56 44.22-68.34 66.32-7.89 7.66-7.97 13.48.11 21.07 19.38 18.19 38.85 36.29 58.37 54.33 7.53 6.96 7.75 12.42.32 19.64-10.01 9.72-20.05 19.4-30.46 29.48z"/>
 <path d="M150.02 343.95c-13.41-13.03-26.71-25.97-40.2-39.08 1.23-1.32 2.19-2.44 3.24-3.46 27.8-26.95 55.61-53.89 83.42-80.83 8.32-8.05 8.41-13.92-.01-21.79-19.54-18.27-39.14-36.47-58.77-54.63-6.52-6.04-6.76-12.11-.37-18.33 10.24-9.96 20.52-19.87 31.15-30.16 6.33 5.89 12.53 11.58 18.65 17.37 27.53 26.03 55.07 52.05 82.52 78.16 12.57 11.96 12.66 24.78.33 36.75-38.99 37.85-78.04 75.64-117.07 113.45-.82.79-1.71 1.51-2.89 2.55z"/>
</svg>

这是设置了SVG的笔。随意分叉它，以便您可以按照以下步骤进行操作。

设置好SVG后，我们现在将设置fill-opacity为0。我们稍后将对此进行动画处理： 

svg {
  fill-opacity: 0;
}

现在，我们可以集中精力绘制SVG。我们将通过使用CSSstroke-dashoffset和stroke-dasharray属性来实现。

该stroke-dasharray属性控制用于使笔划成为路径的间隙和破折号的模式。例如，stroke-dasharray: 10将其应用于SVG中的路径会产生虚线效果，其笔划和间隙长度为十个像素： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘制</title>
    <style>
        svg {
            fill-opacity: 0;
        }

        svg path {
            stroke-dasharray: 10;
        }
    </style>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" width="279.15" height="343.95" overflow="visible" stroke="#000" stroke-width="1">
        <path d="M110.57 248.64c-22.7-21.25-45.06-42.09-67.31-63.06-11.73-11.06-23.32-22.26-34.87-33.51C-2.6 141.35-2.86 128 8.02 117.42 47.67 78.82 87.46 40.35 127.21 1.84c.46-.44 1.03-.77 2.47-1.84 12.52 13.66 25.06 27.34 37.1 40.47-4.44 4.76-10.06 11.31-16.21 17.33-22.69 22.2-45.56 44.22-68.34 66.32-7.89 7.66-7.97 13.48.11 21.07 19.38 18.19 38.85 36.29 58.37 54.33 7.53 6.96 7.75 12.42.32 19.64-10.01 9.72-20.05 19.4-30.46 29.48z"/>
        <path d="M150.02 343.95c-13.41-13.03-26.71-25.97-40.2-39.08 1.23-1.32 2.19-2.44 3.24-3.46 27.8-26.95 55.61-53.89 83.42-80.83 8.32-8.05 8.41-13.92-.01-21.79-19.54-18.27-39.14-36.47-58.77-54.63-6.52-6.04-6.76-12.11-.37-18.33 10.24-9.96 20.52-19.87 31.15-30.16 6.33 5.89 12.53 11.58 18.65 17.37 27.53 26.03 55.07 52.05 82.52 78.16 12.57 11.96 12.66 24.78.33 36.75-38.99 37.85-78.04 75.64-117.07 113.45-.82.79-1.71 1.51-2.89 2.55z"/>
     </svg>
</body>
</html>

现在，对于我们在此处创建的动画，我们希望间隙和破折号的长度与相同path。也就是说，徽标轮廓的整个长度可以被认为是“一个破折号”，并且间隙也将是轮廓的整个长度。这个想法是，我们将从徽标轮廓作为间隙开始，然后在轮廓中以破折号进行动画处理。

但是徽标的轮廓多长时间？解决此问题的一种简单方法是设置长度。让我们通过添加pathLength="1"到每个路径来编辑SVG代码： 

 …
 <path pathLength="1" d="M110.57 … >
 …

这使绘制动画更加容易。现在我们已经设置了pathLength，我们还stroke-dasharray可以1在CSS中将设置为：

svg path {
  stroke-dasharray: 1;
}

现在，这里似乎没有任何变化，但这没关系。徽标各部分的整个路径现在只是一个很大的破折号。（您可以通过pathLength="1"从其中一条路径中删除来进行试验。它会突然变成1px虚线和间隙的虚线。）

现在stroke-dashoffset，我们可以使用，它指定我们应该开始到破折号模式的距离。在我们的例子中，我们要设置stroke-dashoffset到1，所以我们开始一个gap，而不是一个dash。由于每个间隙的长度都是的整个长度path，因此我们现在将看到一个空白屏幕： 

svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;  
}

现在，我们可以有生stroke-dashoffset回0，这将给绘图效果：

svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;  
  animation: draw 2s forwards;
}

@keyframes draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

有了这个，我们现在有了这个：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        svg {
        fill-opacity: 0;
        }

        svg path {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;  
        animation: draw 2s forwards;
        }

        @keyframes draw {
        from {
            stroke-dashoffset: 1;
        }
        to {
            stroke-dashoffset: 0;
        }
        }
    </style>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" width="279.15" height="343.95" overflow="visible" stroke="#000" stroke-width="1">
        <path pathLength="1" d="M110.57 248.64c-22.7-21.25-45.06-42.09-67.31-63.06-11.73-11.06-23.32-22.26-34.87-33.51C-2.6 141.35-2.86 128 8.02 117.42 47.67 78.82 87.46 40.35 127.21 1.84c.46-.44 1.03-.77 2.47-1.84 12.52 13.66 25.06 27.34 37.1 40.47-4.44 4.76-10.06 11.31-16.21 17.33-22.69 22.2-45.56 44.22-68.34 66.32-7.89 7.66-7.97 13.48.11 21.07 19.38 18.19 38.85 36.29 58.37 54.33 7.53 6.96 7.75 12.42.32 19.64-10.01 9.72-20.05 19.4-30.46 29.48z" />
        <path pathLength="1" d="M150.02 343.95c-13.41-13.03-26.71-25.97-40.2-39.08 1.23-1.32 2.19-2.44 3.24-3.46 27.8-26.95 55.61-53.89 83.42-80.83 8.32-8.05 8.41-13.92-.01-21.79-19.54-18.27-39.14-36.47-58.77-54.63-6.52-6.04-6.76-12.11-.37-18.33 10.24-9.96 20.52-19.87 31.15-30.16 6.33 5.89 12.53 11.58 18.65 17.37 27.53 26.03 55.07 52.05 82.52 78.16 12.57 11.96 12.66 24.78.33 36.75-38.99 37.85-78.04 75.64-117.07 113.45-.82.79-1.71 1.51-2.89 2.55z" />
      </svg>
</body>
</html>

要完成动画，我们只需要对我们的动画fill-opacity： 

svg {
  width: 40%;
  fill-opacity: 0;
  // we set a delay of 2s so it won't start until our drawing is finished
  animation: fadeOpacity 2s forwards 2s;
}

@keyframes fadeOpacity {
  from {
    fill-opacity: 0;
  }
  to {
    fill-opacity: 1;
  }
}

现在，我们有了最终的动画：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        svg {
        width: 40%;
        fill-opacity: 0;
        animation: fadeOpacity 2s forwards 2s;
        }

        svg path {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: draw 2s forwards;
        }

        @keyframes draw {
        from {
            stroke-dashoffset: 1;
        }
        to {
            stroke-dashoffset: 0;
        }
        }

        @keyframes fadeOpacity {
        from {
            fill-opacity: 0;
        }
        to {
            fill-opacity: 1;
        }
        }

    </style>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" width="279.15" height="343.95" overflow="visible" stroke="#000" stroke-width="1">
        <path pathLength="1" d="M110.57 248.64c-22.7-21.25-45.06-42.09-67.31-63.06-11.73-11.06-23.32-22.26-34.87-33.51C-2.6 141.35-2.86 128 8.02 117.42 47.67 78.82 87.46 40.35 127.21 1.84c.46-.44 1.03-.77 2.47-1.84 12.52 13.66 25.06 27.34 37.1 40.47-4.44 4.76-10.06 11.31-16.21 17.33-22.69 22.2-45.56 44.22-68.34 66.32-7.89 7.66-7.97 13.48.11 21.07 19.38 18.19 38.85 36.29 58.37 54.33 7.53 6.96 7.75 12.42.32 19.64-10.01 9.72-20.05 19.4-30.46 29.48z" />
        <path pathLength="1" d="M150.02 343.95c-13.41-13.03-26.71-25.97-40.2-39.08 1.23-1.32 2.19-2.44 3.24-3.46 27.8-26.95 55.61-53.89 83.42-80.83 8.32-8.05 8.41-13.92-.01-21.79-19.54-18.27-39.14-36.47-58.77-54.63-6.52-6.04-6.76-12.11-.37-18.33 10.24-9.96 20.52-19.87 31.15-30.16 6.33 5.89 12.53 11.58 18.65 17.37 27.53 26.03 55.07 52.05 82.52 78.16 12.57 11.96 12.66 24.78.33 36.75-38.99 37.85-78.04 75.64-117.07 113.45-.82.79-1.71 1.51-2.89 2.55z" />
      </svg>
</body>
</html>

我敢打赌，这比您想象的要容易得多！我知道stroke-dashoffset和stroke-dasharray属性可能会有些混乱，但是当您将path长度设置为时1，使用它们会容易得多。

这是CSS与SVG结合的强大功能的简单示例。现在，让我们在下一个示例中进一步进行介绍。

CSS蜡烛动画

因此，在最后一个示例中，我们使用SVG时有点作弊。在下一个示例中，我们将仅使用CSS（当然还有HTML）。

通过此动画，我们将使用一些基本的CSS绘图。然后，我们将使用CSS创建触发事件。最后，我们将模拟火焰（尽我们所能！）。

赏您的支持是我们创作的动力！
温馨提示：本文作者系Terry ，经Web前端之家编辑修改或补充，转载请注明出处和本文链接：
https://jiangweishan.com/article/htmlcss20210205a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

相关文章