一款很棒的粘稠按钮上中下三选开关

UP Center DOWN triple toggle

svg, toggle, button

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/*path middle*/
var m = [
    ["M", -36.911, 0],
    ["C", -36.911, -19.833, -19.833, -35.911, 0, -35.911],
    ["C", 19.833, -35.911, 35.911, -19.833, 35.911, 0],
    ["C", 35.911, 19.833, 19.833, 35.911, 0, 35.911],
    ["C", -19.833, 35.911, -36.911, 19.833, -36.911, 0],
    ["z"]
];

var t = [
    /*path top*/
    ["M", -44.2932, -50],
    ["C", -44.293, -73.8, -23.8, -93.093, 0, -93.093],
    ["C", 23.8, -93.093, 43.093, -73.8, 43.0932, -50],
    ["C", 43.093, -26.2, 23.2, -50, -0.6, -50],
    ["C", -24.4, -50, -44.293, -26.2, -44.2932, -50],
    ["z"]
];

var b = [
    /*path bottom*/
    ["M", -44.2932, 50],
    ["C", -44.2932, 26.2, -24.4, 50, -0.6, 50],
    ["C", 23.2, 50, 43.0932, 26.2, 43.093, 50],
    ["C", 43.093, 73.8, 23.8, 93.093, 0, 93.093],
    ["C", -23.8, 93.0932, -44.2932, 73.8, -44.2932, 50],
    ["z"]
];

let flag = true;
let rid = null; // the request animation id
let shapes = ["t", "m", "b"]; // the array of the shapes names

let actualShape = shapes[0];
let nextShape = shapes[1];

let target;
let vals;

function morph() {
    //the value of the new d attribute for the path
    let newD = "";

vals.map((v, vi) => {
        let newStr = v[0];
        for (let i = 1; i < v.length; i++) {
            updateProp(vi, i);

newStr += v[i].toFixed(3) + " ";
        }
        newD += newStr + " ";
    });
    thePath.setAttributeNS(null, "d", newD);
}

function updateProp(vi, i) {
    let dist = target[vi][i] - vals[vi][i];
    let vel = dist / 10;
    vals[vi][i] += vel;

// if the distance in y is less than 1 stop the animation
    let dist_y = target[0][2] - vals[0][2];
    if (Math.abs(dist_y) < 1) {
        if (rid) {
            window.cancelAnimationFrame(rid);
            rid = null;
            // if the flag is true a new animation can begin
            flag = true;
        }
    }
}

let i = 0; // a counter to be increased with every clock
svg.addEventListener("click", () => {

//if flag is true set the vals and the target and call the function Frame
    if (flag == true) {

//--------------
        //decide the next shape
        i++;

nextShape = shapes[i % 3];

if (i % 2 == 0) {
            shapes.reverse();
            i = 0;
        }
        //-------------

vals = window[actualShape].map(function(arr) {
            return arr.slice();
        });

target = window[nextShape].map(function(arr) {
            return arr.slice();
        });

Frame();
        flag = false;

actualShape = nextShape;
    }
});

function Frame() {
    rid = window.requestAnimationFrame(Frame);
    morph();

/*---Text color-----*/
    if (nextShape == "t") {
        up.style.fill = "SeaShell";
        down.style.fill = "#808080"
    }
    if (nextShape == "m") {
        up.style.fill = "#808080";
        down.style.fill = "#808080"
    }
    if (nextShape == "b") {
        up.style.fill = "#808080";
        down.style.fill = "SeaShell"
    }
    /*------------------*/
}

编译

CSS

HTML

UP Center DOWN triple toggle

svg, toggle, button

编辑器支持Emmet

快捷键

UP Center DOWN triple toggle

svg, toggle, button

一款很棒的材料化设计中的行动按钮（Action Button）界面动效设计

CSS3一款很棒的渐变黄金色填充按钮动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：