三角形构建的水果变形动画（西瓜变香蕉）

Fruit tranformation with triangles

svg, transform, banana, watermelon

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var bananaPaths = [
    "268,89.5 294,120.5 249,120.5",
    "305,76.5 294,120.5 268,89.5",
    "305,76.5 294,120.5 337,93.5",
    "249,157.5 294,120.5 249,120.5",
    "337,93.5 294,120.5 333,127.5",
    "249,199.5 294,120.5 249,157.5",
    "313,166.5 294,120.5 333,127.5",
    "249,199.5 313,166.5 294,120.5",
    "203,310.5 299,231.5 249,199.5",
    "313,166.5 299,231.5 249,199.5",
    "203,310.5 253,363.5 184,384.5",
    "184,431.5 230,370.5 184,384.5",
    "320,301.5 203,310.5 299,231.5",
    "230,372.5 218,524.5 184,431.5",
    "253,363.5 283.6,304.3 203,310.5",
    "371,431.5 253,363.5 320,301.5",
    "284,304.5 320,301.5 253,363.5",
    "575,763.5 531,690.5 466,736.5",
    "579,581.5 479,639.5 520,557.5",
    "529,690.5 479,639.5 466,736.5",
    "579,581.5 529,690.5 479,639.5",
    "687,763.5 659,672.5 751,717.5",
    "579,581.5 659,672.5 725,620.5",
    "531,690.5 659,672.5 579,581.5",
    "687,763.5 531,690.5 575,763.5",
    "659,672.5 687,763.5 531,690.5",
    "479,639.5 490,544.5 520,557.5",
    "417,493.5 479,639.5 490,544.5",
    "253,363.5 226.5,417 230,370.5",
    "371,431.5 227,416.5 253,363.5",
    "264,598.5 320,519.5 218,524.5",
    "227,416.5 320,519.5 218,524.5",
    "371,431.5 320,519.5 227,416.5",
    "417,493.5 320,519.5 371,431.5",
    "351,681.5 320,519.5 264,598.5",
    "479,639.5 351,681.5 417,493.5",
    "320,519.5 351,681.5 417,493.5",
    "479,639.5 466,736.5 348,681.5",
    "726,620.5 752,717.5 660,672.5",
    "725,620.5 816,672.5 751,717.5",
    "816,672.5 809,710.5 768.5,705.3",
    "687,763.5 809,710.5 769,705.5"
];

var bananaColors = [
    "#775742",
    "#D7C2AD",
    "#C5B3AF",
    "#5D4430",
    "#B08F3E",
    "#5F4632",
    "#7E6B29",
    "#717900",
    "#ECC029",
    "#ACA701",
    "#EBB701",
    "#EDB601",
    "#F2C627",
    "#F0BB0B",
    "#ECB906",
    "#FFDD62",
    "#FFD531",
    "#EEB913",
    "#FFEEAA",
    "#EAB602",
    "#FEEAAB",
    "#DFA600",
    "#FFE689",
    "#F4BF01",
    "#E4AA00",
    "#FFEA95",
    "#FFE888",
    "#F7CE1C",
    "#FFE47C",
    "#EEBD01",
    "#F1C643",
    "#FCE273",
    "#FFE996",
    "#EFBC00",
    "#F1B500",
    "#FBD42E",
    "#F5C24C",
    "#FFE074",
    "#FFE98C",
    "#725A38",
    "#EAB400"
];

var melonPaths = [
    "80,347 117,341 128,433",
    "94,450 128,433 80,347",
    "137,544 94,450 128,433",
    "193,551 128,433 137,544",
    "213,636 193,551 137,544",
    "285,628 213,636 193,551",
    "317,706 285,628 213,636",
    "416,691 317,706 285,628",
    "600,698 459,753 416,691",
    "617,742 459,753 600,698",
    "617,742 685,662 600,698",
    "722,693 685,662 617,742",
    "779,565 685,662 788,628",
    "873,514 779,565 788,628",
    "685,662 788,628 722,693",
    "924,386 854,448 873,514",
    "889,302 924,386 854,448",
    "926,240 889,302 924,386",
    "886,258 889,302 926,240",
    "886,238 926,240 886,258",
    "681,263 859.8,423.8 889,302",
    "886,238 681,263 889,302",
    "854,448 776.8,349.2 860,424",
    "128,433 465,292 115,341",
    "285,628 465,292 193,551",
    "416,691 465,292 285,628",
    "600,698 465,292 416,691",
    "854,448 713,421 777,349",
    "578,482.1 779,565 685,662",
    "821.4,500 578,482 779,565",
    "854,448 578,482 821,500",
    "713,421 578,482 854,448",
    "465,292 713,421 578,482",
    "777,349 465,292 713,421",
    "681,263 468,292 777,349",
    "534.2,500 556.6,446.1 464.5,291.5",
    "621,554.4 534.5,499.5 556.5,447.5",
    "599.5,697.5 619,551 534.5,499.5",
    "684.5,661.5 618.5,550.5 599.5,697.5",
    "128,433 193,551 468,292",
    "459,753 416,691 317,706",
    "854,448 779,565 873,514"
];

var melonColors = [
    "#F7E6BA",
    "#A9AE5E",
    "#BBC356",
    "#FDF4C9",
    "#AFB936",
    "#FFD6AC",
    "#CED756",
    "#FFE7BB",
    "#FEDCAF",
    "#A8A578",
    "#FCC6A2",
    "#C6C752",
    "#FFEBC4",
    "#E8E190",
    "#E5CA79",
    "#CBC684",
    "#FCF7BF",
    "#B8B652",
    "#FADAA7",
    "#FCF3D2",
    "#F97662",
    "#FF5E57",
    "#FF4D43",
    "#FF9287",
    "#FF5F5D",
    "#F94340",
    "#FA2521",
    "#FF6550",
    "#FF4849",
    "#F83D38",
    "#FF5C50",
    "#FF4844",
    "#EE191F",
    "#F03B34",
    "#FF3B37",
    "#FD302B",
    "#F42A26",
    "#FD3631",
    "#F55243",
    "#FF6B5D",
    "#D6D070",
    "#DBD183"
];

var iteration = 1;
var polygonNumber = 42;

var container = document.getElementById("container");

//initialDrawing
for (i = 0; i < polygonNumber; i++) {
    let polygon =
        '<polygon id="polygon' +
        (i + 1) +
        '"points="' +
        bananaPaths[i] +
        '" fill="' +
        bananaColors[i] +
        '">\n' +
        '<animate id="polygonPosAnim' +
        (i + 1) +
        '" attributeName="points" dur="1s" fill="freeze" calcMode="spline" keySplines="0.42 0.0 0.58 1.0" keyTimes="0;1"/>\n' +
        '<animate id="polygonFillAnim' +
        (i + 1) +
        '" attributeName="fill" dur="1s" fill="freeze" calcMode="spline" keySplines="1.0 0.6 0.4 0.1" keyTimes="0;1"/>\n' +
        "</polygon>";
    container.innerHTML += polygon;
}

//Position and color Switch loop
window.setInterval(function() {
    iteration++;

for (i = 0; i < polygonNumber; i++) {
        let polygon = document.getElementById("polygon" + (i + 1));
        let polygonPosAnim = document.getElementById("polygonPosAnim" + (i + 1));
        let polygonFillAnim = document.getElementById("polygonFillAnim" + (i + 1));

if (iteration % 2 === 0) {
            polygon.setAttribute("points", bananaPaths[i]);
            polygonPosAnim.setAttribute("to", melonPaths[i]);
            polygonPosAnim.beginElement();

polygon.setAttribute("fill", bananaColors[i]);
            polygonFillAnim.setAttribute("to", melonColors[i]);
            polygonFillAnim.beginElement();
        } else {
            polygon.setAttribute("points", melonPaths[i]);
            polygonPosAnim.setAttribute("to", bananaPaths[i]);
            polygonPosAnim.beginElement();

polygon.setAttribute("fill", melonColors[i]);
            polygonFillAnim.setAttribute("to", bananaColors[i]);
            polygonFillAnim.beginElement();
        }
    }
}, 3000);

编译

CSS

HTML

Fruit tranformation with triangles

svg, transform, banana, watermelon

编辑器支持Emmet

快捷键

Fruit tranformation with triangles

svg, transform, banana, watermelon

使用CSS构造三维效果（文字浮动在卡前面）的银行卡

一款经典的关闭启动切换按钮（带变形动画）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：