悬停效果

下载代码

html

css

分享到微信朋友圈

html

</svg>

<div class="info">
    <span>Hover Element</span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.7 81.3">
        <path fill="#fff" d="M18.2,0C14.5.4,1.9,1.1.1,4.9s10.6,15.5,11.3,15S4.3,8.7,3.3,7C19,15,39.5,28.4,39.7,48.4c.1,8.9-4.6,17.1-11.2,22.9C26.4,73.1,5.4,81.9,5.6,80.2c-.6,4.7,20.3-3.6,22.3-5.1,7.8-5.6,13.7-14.7,14.6-24.4C44.1,31.6,23.1,10.4,6,5.1c2.4-.3,6.3-.4,8.3-1.3C14.3,3.8,22.8-.4,18.2,0Z"/>
        </svg>
  </div>

css

JavaScript

var base = document.getElementById("base")
var clip = document.getElementById("clip")
var bg = document.getElementById("bg");
var feFlood = document.getElementById("feFlood");

var mouseHover;
var raf;
var j = 0;
var opacityValue = 1;
var opacityStop;

base.addEventListener("mouseenter", function () {
    mouseHover = true;
    opacityStop = false;
}, false);

base.addEventListener("mouseleave", function () {
    mouseHover = false;
    window.setTimeout(function () {
        cancelAnimationFrame(raf);
        j = 0;
    }, 600);
}, false);

clip.addEventListener('transitionstart', function () {
    if (mouseHover) {
        solidColorOpacity(); 
        raf = window.requestAnimationFrame(bgAnimate);
    }
}, false);

clip.addEventListener('transitionend', function () {
    if (!mouseHover) {
        opacityValue = 1;
        feFlood.setAttribute("flood-opacity", 1);
        opacityStop = true;
    }
}, false);

function bgAnimate() {
    j = j - .2;
    if (j < -200) j = 0;
    bg.setAttribute("x", j + "%");
    raf = window.requestAnimationFrame(bgAnimate);
}

function solidColorOpacity() {
    opacityValue = opacityValue - 0.015;
    if (opacityValue < 0) return;
    if(opacityStop) return;
    feFlood.setAttribute("flood-opacity", opacityValue);
    window.requestAnimationFrame(solidColorOpacity);
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg