html5 svg图标旋转菜单特效

最新推荐文章于 2024-08-07 21:37:33 发布

zhuhongjin0610

最新推荐文章于 2024-08-07 21:37:33 发布

阅读量1.5k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lianxin19900610/article/details/82590156

版权

该博客介绍了如何使用HTML5的SVG元素配合CSS3实现动态的图标旋转菜单特效，详细解析了相关代码和实现步骤。

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

http://www.17sucai.com/pins/2991

<style>
    *, *:before, *:after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    :root {
        font-size: calc(16px + (20 - 16) * (100vw - 320px)/(980 - 320));
        --rotateTimes: 0;
    }
    .advantage  ul,.advantage  li {
        transform-style: preserve-3d;
    }

    .advantage   li {
        position: absolute;
        top: 50%;
        left: 50%;
    }

  .advantage   li a {
        border-radius: 50%;
    }

    .animation_box   ul,  .animation_box li a {
        width: 100%;
        height: 100%;
    }

    .animation_box   ul {
        list-style: none;
    }

    .animation_box li {
        animation: idle 4s ease-in-out infinite;
        text-align: center;
        transform: translate(-50%, -50%);
    }
    .animation_box  li:hover{
       animation: idle 40000s ease-in-out infinite;
        text-align: center