css实现一个旋转动画以及animate.css v4的使用

2021/12/3 6:06:36

编程Tag： 动画 css animation V4 transform animate spin

本文主要是介绍css实现一个旋转动画以及animate.css v4的使用，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

animate.css官网

https://animate.style/

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">


    <title>css 转圈</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2789320_zjuxlxfgdzn.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css">
    <style>


        .spin-begin {
            animation: spin 1s linear infinite;
            animation-fill-mode: forwards;

        }

        .spin-end:hover {
            animation-play-state: paused;
        }

        /*旋转动画*/
        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }


    </style>
</head>
<body>

<h1 class="animate__animated animate__bounce">animate.css 库例子</h1>
<i style="display: inline-block" class="lu icon-huifu  spin-begin spin-end"></i>

</body>
</html>

注意

transform对行内元素不生效，如果没有动画效果，考虑添加 style="display: inline-block"
参考：
https://www.cnblogs.com/fayin/p/9755590.html

这篇关于css实现一个旋转动画以及animate.css v4的使用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

css实现一个旋转动画以及animate.css v4的使用

animate.css官网

例子

注意

相关编程文章