html5 svg层叠图标旋转菜单动画特效免费下载

一款十分漂亮的html5 svg层叠图标旋转菜单动画特效,默认轻轻的左右摆动,点击图标菜单时会有高亮和旋转动画特效。

JS文件

<script> 
document.addEventListener("DOMContentLoaded", function(){ 
    let rise = function(trigEl) { 
            trigEl.blur(); 
 
            let ul = document.querySelector("ul"); 
 
            ul.classList.add("rise"); 
            trigEl.classList.add("pop"); 
 
            setTimeout(function(){ 
                trigEl.focus(); 
 
                ul.classList.remove("rise"); 
                trigEl.classList.remove("pop"); 
            }, 1000); 
        }; 
 
    this.querySelectorAll("li a").forEach(function(el){ 
        let rt = document.querySelector(":root"), 
            di = +el.getAttribute("data-item"); 
 
        el.addEventListener("blur",function(){ 
            //var getRt = +window.getComputedStyle(el).getPropertyValue('--rotateTimes'); 
            //console.log(getRt); 
            //this.classList.add("current"); 
        }); 
        el.addEventListener("focus",function(){ 
            rt.style.setProperty("--rotateTimes",di); 
            //this.classList.remove("current"); 
        }); 
        el.addEventListener("dblclick",function(){ 
            rise(this); 
        }); 
        el.addEventListener("keyup",function(e){ 
            if (e.keyCode === 13) { 
                rise(this); 
            } 
        }); 
    }); 
});</script>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录