超酷的SVG+CSS3山水画+睡美人图

按下asdfjkl;键，可以触发更多动画。这是一幅交互式山水画，如果能结合虚拟现实的技术，可以展现更为梦幻的效果。

艺术，教程

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

第三方库
作品简介 6153
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var allP = $("svg path").not(".st14, #sides path, .st29, .st28, #b-balloon, #balburst polygon");
TweenMax.set("#lightning path", {
    visibility: "visible"
});
TweenMax.set("#balburst polygon", {
    transformStyle: "preserve-3d",
    perspective: 600
});

TweenMax.to("h1", 2, {
    opacity: 0,
    delay: 4,
    ease: Circ.easeOut
});

//ripples that continually repeat
function revolve() {
    var tl = new TimelineMax({
        repeat: -1
    });

tl.add("begin");
    tl.staggerFromTo("#hairripples ellipse", 3, {
        transformOrigin: "50% 50%",
        opacity: 1,
        scale: 0
    }, {
        scale: 2,
        opacity: 0,
        repeat: -1,
        transformOrigin: "50% 50%",
        ease: Circ.easeOut
    }, 0.7, "begin");
    tl.staggerFromTo("#legripples_1_ ellipse", 2.5, {
        transformOrigin: "50% 50%",
        opacity: 1,
        scale: 0
    }, {
        scale: 1.2,
        opacity: 0.4,
        transformOrigin: "50% 50%",
        repeat: -1,
        ease: Circ.easeOut
    }, 0.5, "begin+=0.5");
    tl.staggerFromTo("#footripples ellipse", 2, {
        transformOrigin: "50% 50%",
        opacity: 1,
        scale: 0
    }, {
        scale: 1.5,
        opacity: 0.5,
        repeat: -1,
        transformOrigin: "50% 50%",
        ease: Circ.easeOut
    }, 0.5, "begin+=1");
    tl.staggerFromTo("#handripples ellipse", 3, {
        transformOrigin: "50% 50%",
        opacity: 1,
        scale: 0
    }, {
        scale: 1,
        opacity: 0.3,
        repeat: -1,
        transformOrigin: "50% 50%",
        ease: Circ.easeOut
    }, 1, "begin+=0.2");

return tl;
};

revolve();

//her breathing and the lizard tongue
function breathe() {
    var tl = new TimelineMax({
        repeat: -1
    });

tl.add("begin");
    tl.fromTo("#arm", 1.5, {
        scaleY: 1
    }, {
        scaleY: 0.98,
        transformOrigin: "50% 100%",
        ease: Circ.easeOut
    }, "begin");
    tl.to("#arm", 1.8, {
        scaleY: 1,
        transformOrigin: "50% 100%",
        ease: Circ.easeOut
    }, "begin+=1.8");
    tl.fromTo("#leg", 1.5, {
        scaleY: 1
    }, {
        scaleY: 0.98,
        transformOrigin: "50% 100%",
        ease: Circ.easeOut
    }, "begin");
    tl.to("#leg", 1.8, {
        scaleY: 1,
        transformOrigin: "50% 100%",
        ease: Circ.easeOut
    }, "begin+=1.8");

tl.fromTo("#tongue", 0.1, {
        transformOrigin: "0% 50%",
        scale: 0
    }, {
        scale: 1,
        transformOrigin: "0% 50%",
        ease: Linear.easeNone
    }, "begin");
    tl.to("#tongue", 0.1, {
        morphSVG: {
            shape: "#tongue-flick"
        },
        ease: Elastic.easeInOut
    }, "begin+=0.1");
    tl.to("#tongue", 0.1, {
        morphSVG: {
            shape: "#tongue"
        },
        scale: 0,
        transformOrigin: "0% 50%",
        ease: Linear.easeNone
    }, "begin+=0.2");

return tl;
};
breathe();

//lightning
function strike() {
    var tl = new TimelineMax(),
        ch1 = "hsl(+=5%, -=5%, +=20%)",
        ch2 = "hsl(-=5%, +=5%, -=20%)";

tl.add("begin");
    tl.staggerFromTo("#lightning path", 0.5, {
        drawSVG: "0% 0%",
        strokeWidth: 2
    }, {
        drawSVG: true,
        strokeWidth: 10,
        ease: Bounce.easeOut
    }, 0.05, "begin");
    tl.to("#mountains path", 0.2, {
        fill: ch1,
        ease: Elastic.easeOut
    }, "begin+=0");
    tl.to("#mountains path", 0.2, {
        fill: ch2,
        ease: Elastic.easeIn
    }, "begin+=0.55");
    tl.to(".st16", 0.2, {
        fill: ch1,
        ease: Elastic.easeOut
    }, "begin+=0");
    tl.to(".st16", 0.2, {
        fill: ch2,
        ease: Elastic.easeIn
    }, "begin+=0.55");
    tl.staggerTo("#lightning path", 0.2, {
        drawSVG: "100% 100%",
        strokeWidth: 2,
        ease: Bounce.easeOut
    }, 0.05, "begin+=0.55");

return tl;
}

var lightning = new TimelineMax({
    paused: true
});
lightning.add(strike());

//yawn
function maw() {
    var tl = new TimelineMax(),
        int = 0.3,
        int2 = 0.6,
        b = "begin",
        bSec = "begin+=1.5";

tl.add("begin");
    tl.to("#mouth", 0.4, {
        morphSVG: {
            shape: "#mouth-y",
            shapeIndex: 1
        },
        opacity: 0.5,
        x: -2,
        y: 2,
        ease: SlowMo.easeOut
    }, b);
    tl.to(".head", int, {
        morphSVG: {
            shape: "#head-y"
        },
        x: -2,
        y: 1,
        ease: SlowMo.easeOut
    }, b);
    tl.to("#eye-r", 0.2, {
        morphSVG: {
            shape: "#eye-r-y"
        },
        opacity: 0.5,
        x: -1,
        ease: SlowMo.easeOut
    }, b);
    tl.to("#eye-l", 0.2, {
        morphSVG: {
            shape: "#eye-l-y"
        },
        opacity: 0.5,
        x: -1,
        ease: SlowMo.easeOut
    }, b);
    tl.to("#brow-l", int, {
        morphSVG: {
            shape: "#brow-l-y"
        },
        ease: SlowMo.easeOut
    }, b);
    tl.to("#brow-r", int, {
        morphSVG: {
            shape: "#brow-r-y"
        },
        ease: SlowMo.easeOut
    }, b);

tl.to("#mouth", int2, {
        morphSVG: {
            shape: "#mouth"
        },
        opacity: 1,
        y: 0,
        x: 0,
        ease: SlowMo.easeIn
    }, bSec);
    tl.to(".head", int2, {
        morphSVG: {
            shape: ".head"
        },
        x: 0,
        y: 0,
        ease: SlowMo.easeIn
    }, bSec);
    tl.to("#eye-r", int, {
        morphSVG: {
            shape: "#eye-r"
        },
        opacity: 1,
        x: 0,
        ease: SlowMo.easeIn
    }, bSec);
    tl.to("#eye-l", int, {
        morphSVG: {
            shape: "#eye-l"
        },
        x: 0,
        opacity: 1,
        ease: SlowMo.easeIn
    }, bSec);
    tl.to("#brow-l", int, {
        morphSVG: {
            shape: "#brow-l"
        },
        ease: SlowMo.easeIn
    }, bSec);
    tl.to("#brow-r", int, {
        morphSVG: {
            shape: "#brow-r"
        },
        ease: SlowMo.easeIn
    }, bSec);

return tl;
}

var yawn = new TimelineMax({
    paused: true
});
yawn.add(maw());

//flower
function budding() {
    var tl = new TimelineMax();

tl.add("begin");
    tl.to("#innerflower", 0.5, {
        opacity: 0.9,
        ease: Circ.easeOut
    }, "begin");
    tl.fromTo("#backflower", 1.5, {
        strokeWidth: 5,
        drawSVG: "0 0"
    }, {
        drawSVG: true,
        strokeWidth: 1,
        ease: Circ.easeOut
    }, "begin+=0.5");
    tl.staggerFromTo("#budback", 1.5, {
        scale: 0,
        opacity: 0
    }, {
        scale: 1,
        opacity: 1,
        ease: Circ.easeOut
    }, 0.4, "begin");
    tl.staggerFromTo("#budmid", 1.5, {
        scale: 0,
        opacity: 0
    }, {
        scale: 1,
        opacity: 1,
        ease: Circ.easeOut
    }, 0.4, "begin+=0.5");
    tl.staggerFromTo("#budfirst", 1.5, {
        scale: 0,
        opacity: 0
    }, {
        scale: 1,
        opacity: 1,
        ease: Circ.easeOut
    }, 0.4, "begin+=1");
    tl.fromTo("#flower", 1.5, {
        opacity: 0
    }, {
        opacity: 1,
        ease: Circ.easeOut
    }, "begin+=0.5");
    tl.to("#innerflower", 0.5, {
        opacity: 0,
        ease: Circ.easeIn
    }, "begin+=4");

tl.timeScale(1.4);

return tl;
}

var flower = new TimelineMax({
    paused: true
});
flower.add(budding());

//bugs
function bugs() {
    var tl = new TimelineMax();

tl.add("begin");
    tl.from("#bug, #bug_1_, #bug_2_, #bug_3_", 0.2, {
        opacity: 0
    }, "begin");
    tl.to($("#bug"), 2, {
        bezier: {
            type: "soft",
            values: [{
                x: 50,
                y: -22
            }, {
                x: -70,
                y: -105
            }, {
                x: 25,
                y: -275
            }, {
                x: -80,
                y: -466
            }, {
                x: 3,
                y: -760
            }]
        },
        ease: Circ.easeIn
    }, "begin+=0.3");
    tl.to($("#bug_1_"), 2.5, {
        bezier: {
            type: "soft",
            values: [{
                x: -50,
                y: -50
            }, {
                x: 20,
                y: -125
            }, {
                x: 75,
                y: -200
            }, {
                x: 0,
                y: -450
            }, {
                x: 30,
                y: -700
            }]
        },
        ease: Circ.easeIn
    }, "begin");
    tl.to($("#bug_2_"), 2.75, {
        bezier: {
            type: "soft",
            values: [{
                x: 20,
                y: -35
            }, {
                x: -50,
                y: -75
            }, {
                x: 80,
                y: -250
            }, {
                x: 0,
                y: -400
            }, {
                x: 25,
                y: -700
            }]
        },
        ease: Circ.easeIn
    }, "begin+=0.7");
    tl.to($("#bug_3_"), 1.5, {
        bezier: {
            type: "soft",
            values: [{
                x: 50,
                y: -22
            }, {
                x: -70,
                y: -105
            }, {
                x: 25,
                y: -300
            }, {
                x: -80,
                y: -500
            }, {
                x: 3,
                y: -800
            }]
        },
        ease: Circ.easeIn
    }, "begin+=1");

return tl;
}

var insect = new TimelineMax({
    paused: true
});
insect.add(bugs());

//balloon
function balloonGrow() {
    var balloon = $("#balloon")[0];
    var radius = balloon.getAttribute("r");
    var cySet = balloon.getAttribute("cy");
    balloon.setAttribute('r', parseInt(radius) + 10);
    balloon.setAttribute('cy', parseInt(cySet) - 10);
    if (parseInt(radius) > 125) {
        ion.sound.play("balloon-pop3");
        var balloonTl = new TimelineMax();
        balloonTl.add("pop");
        balloonTl.to("#balloon", 0.05, {
            scale: 5,
            opacity: 0,
            transformOrigin: "50% 50%",
            ease: Circ.easeOut
        }, "pop");
        balloonTl.fromTo("#balloon", 0.05, {
            opacity: 0,
            scale: 1
        }, {
            opacity: 1,
            scale: 1,
            transformOrigin: "50% 50%",
            ease: Circ.easeIn
        }, "pop+=0.2");
        balloonTl.fromTo("#balburst polygon", 0.6, {
            opacity: 1,
            y: 0,
            rotation: 0
        }, {
            rotation: 500,
            y: 100,
            opacity: 0,
            ease: Expo.easeOut
        }, "pop");
        setTimeout(function() {
            balloon.setAttribute("r", "45");
            balloon.setAttribute("cy", "233.5");
        }, 200);
    }
}

//colors one
function colorsOne() {
    var sceneChange = new TimelineMax();
    sceneChange.add("sch");
    sceneChange.to(allP, 1, {
        fill: "hsl(+=20%, +=5%, -=20%)",
        ease: Circ.easeOut
    }, "sch");
    sceneChange.to(allP, 1, {
        fill: "hsl(-=20%, -=5%, +=20%)",
        ease: Circ.easeIn
    }, "sch+=1.3");
    sceneChange.to(".st14", 1, {
        opacity: 0.1,
        ease: Circ.easeOut
    }, "sch");
    sceneChange.to(".st14", 1, {
        opacity: 1,
        ease: Circ.easeIn
    }, "sch+=1.3");
}

//colors two
function colorsTwo() {
    var colorChange = new TimelineMax();
    colorChange.add("col");
    colorChange.to(allP, 1.5, {
        fill: "hsl(+=50%, -=5%, -=20%)",
        ease: Circ.easeOut
    }, "col");
    colorChange.to(allP, 2, {
        fill: "hsl(-=50%, +=5%, +=20%)",
        ease: Circ.easeIn
    }, "col+=1.6");
}

// init bunch of sounds
ion.sound({
    sounds: [{
        name: "butterflies5"
    }, {
        name: "hit2"
    }, {
        name: "hit3"
    }, {
        name: "hit4"
    }, {
        name: "hit5"
    }, {
        name: "hit6"
    }, {
        name: "hit7"
    }, {
        name: "hit8"
    }, {
        name: "hit9"
    }, {
        name: "hit10"
    }, {
        name: "paperplane3"
    }, {
        name: "yawn1"
    }, {
        name: "balloon-pop3"
    }],

// main config
    path: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/",
    preload: true,
    multiplay: true,
    volume: 0.9
});

//desktop keyboard
$(document).keydown(function(e) {
    switch (e.which) {

case 65: // a
            ion.sound.play("hit2");
            lightning.restart();
            break;

case 70: // f
            //balloon
            balloonGrow();
            ion.sound.play("hit4");
            break;

case 83: // s
            colorsOne();
            ion.sound.play("hit3");
            break;

case 186: // semicolon
            colorsTwo();
            ion.sound.play("hit5");
            break;

case 75: // k
            setTimeout(function() {
                ion.sound.play("butterflies5");
            }, 100);
            insect.restart();
            break;

case 74: // j
            ion.sound.play("hit6");
            flower.restart();
            break;

case 76: // l
            ion.sound.play("paperplane3");
            TweenMax.fromTo($("#paper"), 2, {
                x: 0,
                y: 0
            }, {
                bezier: {
                    type: "soft",
                    values: [{
                        x: -300,
                        y: -35
                    }, {
                        x: -600,
                        y: -15
                    }, {
                        x: -900,
                        y: 20
                    }, {
                        x: -1200,
                        y: 0
                    }, {
                        x: -1400,
                        y: 20
                    }]
                },
                ease: Power3.easeOut
            });
            break;

case 68: // d
            ion.sound.play("yawn1");
            yawn.restart();
            break;

default:
            return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent scrolling with arrows
});

//make the keyboard visible to mobile devices through insanely long and arguably horrible regex
window.mobileAndTabletcheck = function() {
    var check = false;
    (function(a) {
        if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true
    })(navigator.userAgent || navigator.vendor || window.opera);
    return check;
}

if (window.mobileAndTabletcheck() === true) {
    $("h1").css("display", "none");
    TweenMax.to("h2", 1, {
        opacity: 0,
        delay: 4,
        ease: Circ.easeOut
    });

$("#k1").on("click", function() {
        ion.sound.play("hit2");
        lightning.restart();
    });

$("#k2").on("click", function() {
        balloonGrow();
        ion.sound.play("hit4");
    });

$("#k3").on("click", function() {
        colorsOne();
        ion.sound.play("hit3");
    });

$("#k4").on("click", function() {
        colorsTwo();
        ion.sound.play("hit5");
    });

$("#k5").on("click", function() {
        ion.sound.play("butterflies5");
        insect.restart();
    });

$("#k6").on("click", function() {
        ion.sound.play("hit6");
        flower.restart();
    });

$("#k7").on("click", function() {
        ion.sound.play("paperplane3");
        TweenMax.fromTo($("#paper"), 2, {
            x: 0,
            y: 0
        }, {
            bezier: {
                type: "soft",
                values: [{
                    x: -300,
                    y: -35
                }, {
                    x: -600,
                    y: -15
                }, {
                    x: -900,
                    y: 20
                }, {
                    x: -1200,
                    y: 0
                }, {
                    x: -1400,
                    y: 20
                }]
            },
            ease: Power3.easeOut
        });
    });

$("#k8").on("click", function() {
        ion.sound.play("yawn1");
        yawn.restart();
    });
}

编译

CSS

body {
    background: #333;
    font-family: 'Oswald', sans-serif;
}
h1 {
    position: absolute;
    width: 100%;
    text-align: center;
    margin-top: 40px;
    font-size: 35px;
    color: #5c6e55;
    opacity: 0.7;
}
h2 {
    position: absolute;
    width: 80%;
    left: 10%;
    text-align: center;
    margin-top: 5px;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: #4b5a46;
    opacity: 0.7;
    display: none;
}
.main {
    width: 85%;
    position: absolute;
    left: 7.5%;
}
.keyboard {
    display: none;
}
#innerflower,
#balburst polygon {
    opacity: 0;
}
.st0 {
    fill: #b3c3ad;
    opacity: 0.8;
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
}
.st1 {
    opacity: 0.34;
    fill: #b9e3ca;
}
.st2 {
    opacity: 0.34;
    fill: #c18aa0;
    stroke: #b9e3ca;
    stroke-miterlimit: 10;
}
.st3 {
    opacity: 0.34;
    fill: #934654;
}
.st4 {
    opacity: 0.34;
    fill: #9f5c7b;
}
.st5 {
    opacity: 0.34;
    fill: #ae8fa8;
    stroke: #a2ddd7;
    stroke-miterlimit: 10;
}
.st6 {
    opacity: 0.34;
    fill: #934654;
    stroke: #4fdbca;
    stroke-width: 2;
    stroke-miterlimit: 10;
}
.st7 {
    opacity: 0.26;
    fill: #3ba89b;
}
.st8 {
    opacity: 0.34;
    fill: #a83759;
}
.st9 {
    opacity: 0.34;
    fill: #a83759;
    stroke: #4fdbca;
    stroke-miterlimit: 10;
}
.st10 {
    opacity: 0.34;
    fill: #8d7b98;
}
.st11 {
    opacity: 0.43;
    fill: #69d0c4;
}
.st12 {
    opacity: 0.67;
    fill: #69d0c4;
}
.st13 {
    opacity: 0.29;
    fill: #69d0c4;
}
.st14 {
    fill: url(#SVGID_1_);
}
.st15 {
    opacity: 0.26;
    fill: url(#SVGID_2_);
}
.st16 {
    opacity: 0.13;
    fill: #8d7b98;
}
.st17 {
    fill: #b9e3ca;
}
.st18 {
    opacity: 0.2;
    fill: #3ba89b;
}
.st19 {
    fill: #69d0c4;
}
.st20 {
    opacity: 0.35;
    fill: url(#SVGID_3_);
}
.st21 {
    opacity: 0.35;
    fill: url(#SVGID_4_);
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
}
.st22 {
    opacity: 0.7;
    fill: #69d0c4;
}
.st23 {
    fill: #a83759;
}
.st24 {
    fill: none;
    stroke: #543934;
    stroke-miterlimit: 10;
}
.st25 {
    fill: #21887e;
}
.st26 {
    opacity: 0.52;
}
.st27 {
    fill: #3ba89b;
}
.st28 {
    opacity: 0.96;
    fill: url(#SVGID_5_);
}
.st29 {
    opacity: 0.96;
    fill: url(#SVGID_6_);
}
.st30 {
    opacity: 0.16;
}
.st31 {
    fill: #e8e6e4;
}
.st32 {
    opacity: 0.7;
}
.st33 {
    fill: #fff;
}
.st34 {
    fill: #259386;
}
.st35 {
    fill: url(#grass-shadow_1_);
}
.st36 {
    fill: #1b6b61;
}
.st37 {
    fill: #1e776c;
}
.st39 {
    display: inline;
    fill: none;
    stroke: #21887e;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}
.st40 {
    display: inline;
    fill: none;
    stroke: #b9e3ca;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}
.st41 {
    display: inline;
    fill: none;
    stroke: #c18aa0;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}
.st42 {
    display: inline;
    fill: none;
    stroke: #a83759;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}
.st43 {
    fill: url(#r-wing_4_);
}
.st44 {
    fill: url(#l-wing_4_);
}
.st45 {
    fill: url(#r-wing_5_);
}
.st46 {
    fill: url(#l-wing_5_);
}
.st47 {
    fill: url(#r-wing_6_);
}
.st48 {
    fill: url(#l-wing_6_);
}
.st49 {
    fill: url(#r-wing_7_);
}
.st50 {
    fill: url(#l-wing_7_);
}
.st51 {
    opacity: 0.79;
}
.st52 {
    opacity: 0.7;
    stroke: #60c6b7;
    fill: none;
}
.st53 {
    fill: #60c6b7;
}
.st54 {
    fill: #9dd1b6;
}
.st55 {
    fill: #d0efdc;
}
.st56 {
    opacity: 0.41;
    fill: none;
    stroke: #69d0c4;
    stroke-miterlimit: 10;
}
.st57 {
    fill: none;
    stroke: #69d0c4;
    stroke-miterlimit: 10;
}
.st58 {
    fill: #bcbfb4;
}
.st59 {
    fill: #a3645b;
}
.st60 {
    opacity: 0.75;
    fill: #ba8a7b;
}
.st61 {
    fill: #ce795b;
}
.st62 {
    fill: #b16d67;
}
.st63 {
    fill: #1f7a6f;
}
.st64 {
    fill: #ce795b;
}
.st65 {
    fill: #a3645b;
}
.st68 {
    opacity: 0.27;
    fill: #f9f9f9;
    enable-background: new;
}
.st66 {
    opacity: 0.73;
    fill: none;
    stroke: #f9f9f9;
    stroke-width: 0.75;
    stroke-miterlimit: 10;
    enable-background: new;
}
.st67 {
    fill: #dd4563;
}
.kst0 {
    fill: #fff;
}
.kst1 {
    fill: #8e2f6c;
}
.kst2 {
    fill: #a83759;
}
.kst3 {
    fill: #ce6f80;
}
.kst4 {
    fill: #bdb9b4;
}
.kst5 {
    fill: #9ca396;
}
.kst6 {
    fill: #69d0c4;
}
.kst7 {
    fill: #3ba89b;
}
.kst8 {
    fill: #21887e;
}
#yawn {
    -webkit-transform: translateX(-115px);
    -ms-transform: translateX(-115px);
    transform: translateX(-115px);
    opacity: 0;
}
#lightning path,
#tongue-flick {
    visibility: hidden;
}
#lightning path,
#lightning,
#backflower {
    fill: none;
}
@media screen and (max-device-width: 900px) {
    h1 {
        display: none;
    }
    .keyboard,
    h2 {
        display: block;
    }
}

HTML

</svg>
</div>
<h1>Press the asdf jkl; keys</h1>
<h2>Play the colored keyboard below and turn the sound on</h2>

按下asdfjkl;键，可以触发更多动画。这是一幅交互式山水画，如果能结合虚拟现实的技术，可以展现更为梦幻的效果。

艺术，教程

编辑器支持Emmet

快捷键

按下asdfjkl;键，可以触发更多动画。这是一幅交互式山水画，如果能结合虚拟现实的技术，可以展现更为梦幻的效果。

艺术，教程

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：