使用JS和CSS3实现的窗帘式弹性菜单

Elastic menu。鼠标移动到菜单的左右下角，出现热点动画，拖住热点向左右移动，将触发菜单列表弹性摆动动画。

css3, menu, 界面组件

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2850
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/* because IE up to and including 11 */
Math.sign = Math.sign || function(x) {
    x = +x; // convert to a number
    if (x === 0 || isNaN(x)) {
        return x;
    }
    return x > 0 ? 1 : -1;
};

/* because me lazy */
Object.getOwnPropertyNames(Math).map(function(p) {
    window[p] = Math[p];
});

var nav = document.querySelector('nav'),
    r, side = null,
    dragging = false,
    sgn = 0,
    a, b, max_a,
    items = document.querySelectorAll('li'),
    links = document.querySelectorAll('a'),
    n = items.length,
    style = document.createElement('style'),
    t = 0,
    r_id = null;

var size = function() {
    r = nav.getBoundingClientRect();
};

var distortMenu = function(xo) {
    var tx = 0,
        x1, x2, y1, y2, beta;

for (var i = 0; i < n; i++) {
        x1 = xo + sgn * a * cos(asin(i / n));
        x2 = xo + sgn * a * cos(asin((i + 1) / n));
        y1 = r.top + i * b / n;
        y2 = r.top + (i + 1) * b / n;
        beta = sign(a) * sgn * (atan(abs((y2 - y1) / (x2 - x1))) - .5 * PI);

items[i].style.transform =
            'translate(' + tx + 'px)' +
            'skewX(' + beta + 'rad)';
        links[i].style.transform =
            'skewX(' + -beta + 'rad)';

tx = x2 - (r.left + side * r.width);
    }

style.textContent =
        '.hotspot{transform:translate(' + tx + 'px)}'
};

var oscillate = function() {
    var curr_xo;

a = max_a * cos(t * 2 * PI / 60);
    curr_xo = r.left + side * r.width - sgn * a;

distortMenu(curr_xo);

t++;
    max_a *= .99;

if (max_a < 1) {
        cancelAnimationFrame(r_id);
        r_id = null;
        t = 0;

for (var i = 0; i < n; i++) {
            items[i].style.transform =
                links[i].style.transform = 'none';
        }

style.textContent = '';

return;
    }

r_id = requestAnimationFrame(oscillate);
};

document.body.appendChild(style);
size();

addEventListener('resize', size, false);

addEventListener('mousedown', function(e) {console.log(e.target.classList);
    if (e.target.classList.contains('hotspot')) {
        dragging = true;
        nav.classList.add('dragged');
        side = e.target.classList.contains('l') ? 0 : 1;

if (r_id) {
            cancelAnimationFrame(r_id);
            r_id = null;
            t = 0;
        }
    }
}, false);

addEventListener('mousemove', function(e) {
    var x, y, dx1, dx2;

if (dragging) {
        x = e.clientX;
        y = e.clientY;

dx1 = r.left + r.width - x;
        dx2 = r.left - x;

a = side ? abs(dx1) : abs(dx2);
        b = r.height;

sgn = sign(side ? dx1 : dx2);

distortMenu(x);
    }
}, false);

addEventListener('mouseup', function(e) {
    if (dragging) {
        dragging = false;
        nav.classList.remove('dragged');
        max_a = a;
        oscillate();
    }
}, false);

编译

CSS

html {
    /* background lifted from http://lea.verou.me/css3patterns/#carbon-fibre */
    
    overflow-x: hidden;
    background: radial-gradient(#000 15%, rgba(0, 0, 0, 0) 16%), radial-gradient(#000 15%, rgba(0, 0, 0, 0) 16%) 8px 8px, radial-gradient(rgba(0, 0, 0, 0.1) 15%, rgba(0, 0, 0, 0) 20%) 0 1px, radial-gradient(rgba(0, 0, 0, 0.1) 15%, rgba(0, 0, 0, 0) 20%) 8px 9px #282828;
    background-size: 16px 16px;
    color: #d1d7e3;
    font: 1em/2.5 century gothic, verdana, sans-serif;
    text-align: center;
}
body {
    margin: 0;
}
nav {
    position: relative;
    margin: 0 auto;
    width: 20em;
    cursor: pointer;
}
.dragged {
    user-select: none;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
li {
    overflow: hidden;
    transform-origin: 50% 0;
    will-change: transform;
}
li:last-child {
    border-radius: 0 0 0.5em 0.5em;
}
li:not(:first-child) {
    border-top: solid 1px #1c1b20;
}
li:not(:last-child) {
    border-bottom: solid 1px #484d53;
}
a {
    display: block;
    position: relative;
    margin-left: calc(10em - 50vw);
    width: 100vw;
    /* stacking context hack */
    
    opacity: 0.999;
    background: rgba(58, 63, 69, 0.65);
    color: inherit;
    text-decoration: none;
    will-change: color, transform;
    transition: color 0.7s;
}
a:before {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.001;
    background: linear-gradient(#dee271, #b8b42c);
    will-change: opacity;
    transition: opacity 0.7s;
    content: '';
}
a:hover {
    color: black;
}
a:hover:before {
    opacity: 0.999;
}
.hotspot {
    bottom: -0.75em;
    border: solid 0.5625em transparent;
    width: 1.5em;
    height: 1.5em;
    opacity: 0.1;
    background: #f72a63;
    background-clip: content-box;
}
.hotspot,
.hotspot:before,
.hotspot:after {
    box-sizing: border-box;
    position: absolute;
    border-radius: 50%;
}
.hotspot:first-of-type {
    left: -0.75em;
}
.hotspot:last-of-type {
    right: -0.75em;
}
.hotspot:before,
.hotspot:after {
    top: 50%;
    left: 50%;
    margin: -0.1875em;
    border: solid 0.1875em #f72a63;
    width: 0.375em;
    height: 0.375em;
    content: '';
}
.hotspot:hover {
    opacity: 0.99;
}
.hotspot:hover:before,
.hotspot:hover:after {
    animation: p 1.3s ease-in-out infinite;
}
.hotspot:hover:after {
    animation-delay: -0.65s;
}
@keyframes p {
    to {
        margin: -1.5em;
        border: solid 0.375em #f72a63;
        width: 3em;
        height: 3em;
        opacity: 0.1;
        -webkit-filter: blur(2px);
        filter: blur(2px);
    }
}

HTML

Elastic menu。鼠标移动到菜单的左右下角，出现热点动画，拖住热点向左右移动，将触发菜单列表弹性摆动动画。

css3, menu, 界面组件

编辑器支持Emmet

快捷键

Elastic menu。鼠标移动到菜单的左右下角，出现热点动画，拖住热点向左右移动，将触发菜单列表弹性摆动动画。

css3, menu, 界面组件

使用CSS3 SVG和JS实现的交互式火球动画

使用CSS3线性渐变和合成模式（blend-mode）实现的5种图像特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：