使用CSS和SVG实现街头行走和路边开窗动画

multi-scene animation CSS and svg only without js

css3, walk, window

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    overflow: hidden;
    margin: 0;
}
.window__scene {
    position: relative;
    width: 200vw;
    height: 100vh;
    overflow: hidden;
    background: #E08183 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI3OTguNzAycHgiIGhlaWdodD0iNzk4LjcwMnB4IiB2aWV3Qm94PSIwIDAgNzk4LjcwMiA3OTguNzAyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA3OTguNzAyIDc5OC43MDIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxyZWN0IGZpbGw9IiNFMDgyODMiIHdpZHRoPSI3OTguNzAyIiBoZWlnaHQ9Ijc5OC43MDIiLz48Zz48cGF0aCBmaWxsPSIjRTY5QzlEIiBkPSJNMTcxLjMzOSwxODAuMDUxaC02OS4xODVjLTYuNjE4LDAtMTIuMDMzLDUuNDE0LTEyLjAzMywxMi4wMzJ2MjIuNTZjMCw2LjYxOCw1LjQxNSwxMi4wMzMsMTIuMDMzLDEyLjAzM2g2OS4xODVjNi42MTcsMCwxMi4wMzItNS40MTUsMTIuMDMyLTEyLjAzM3YtMjIuNTZDMTgzLjM3MiwxODUuNDY1LDE3Ny45NTcsMTgwLjA1MSwxNzEuMzM5LDE4MC4wNTF6Ii8+PHBhdGggZmlsbD0iI0U2OUM5RCIgZD0iTTIwMi44ODcsMTIzLjM3Nmg2OS4xODVjNi42MTgsMCwxMi4wMzMtNS40MTQsMTIuMDMzLTEyLjAzMnYtMjIuNTZjMC02LjYxOS01LjQxNS0xMi4wMzMtMTIuMDMzLTEyLjAzM2gtNjkuMTg1Yy02LjYxNywwLTEyLjAzMiw1LjQxNC0xMi4wMzIsMTIuMDMzdjIyLjU2QzE5MC44NTQsMTE3Ljk2MiwxOTYuMjcsMTIzLjM3NiwyMDIuODg3LDEyMy4zNzZ6Ii8+PHBhdGggZmlsbD0iI0U2OUM5RCIgZD0iTTIxNy45NjQsMTI3LjcxMmgtNjkuMTg1Yy02LjYxOCwwLTEyLjAzMyw1LjQxNS0xMi4wMzMsMTIuMDMydjIyLjU2MWMwLDYuNjE4LDUuNDE1LDEyLjAzMiwxMi4wMzMsMTIuMDMyaDY5LjE4NWM2LjYxOCwwLDEyLjAzMi01LjQxNSwxMi4wMzItMTIuMDMydi0yMi41NjFDMjI5Ljk5NiwxMzMuMTI3LDIyNC41ODIsMTI3LjcxMiwyMTcuOTY0LDEyNy43MTJ6Ii8+PHBhdGggZmlsbD0iI0U2OUM5RCIgZD0iTTEyOS43MywxNjIuMzA1di0yMi41NjFjMC02LjYxOC01LjQxNS0xMi4wMzItMTIuMDMyLTEyLjAzMkg0OC41MTNjLTYuNjE4LDAtMTIuMDMyLDUuNDE1LTEyLjAzMiwxMi4wMzJ2MjIuNTYxYzAsNi42MTgsNS40MTQsMTIuMDMyLDEyLjAzMiwxMi4wMzJoNjkuMTg2QzEyNC4zMTYsMTc0LjMzNywxMjkuNzMsMTY4LjkyMywxMjkuNzMsMTYyLjMwNXoiLz48cGF0aCBmaWxsPSIjRTY5QzlEIiBkPSJNNTE1LjYwNCwxMDcuOTIxdjIyLjU2MWMwLDYuNjE4LDUuNDE1LDEyLjAzMiwxMi4wMzIsMTIuMDMyaDY5LjE4NmM2LjYxOCwwLDEyLjAzMi01LjQxNSwxMi4wMzItMTIuMDMydi0yMi41NjFjMC02LjYxOC01LjQxNC0xMi4wMzItMTIuMDMyLTEyLjAzMmgtNjkuMTg2QzUyMS4wMTksOTUuODg5LDUxNS42MDQsMTAxLjMwMyw1MTUuNjA0LDEwNy45MjF6Ii8+PHBhdGggZmlsbD0iI0U2OUM5RCIgZD0iTTYyNy4zNjgsMTQyLjUxNGg2OS4xODVjNi42MTgsMCwxMi4wMzQtNS40MTUsMTIuMDM0LTEyLjAzMnYtMjIuNTYxYzAtNi42MTgtNS40MTYtMTIuMDMyLTEyLjAzNC0xMi4wMzJoLTY5LjE4NWMtNi42MTksMC0xMi4wMzIsNS40MTUtMTIuMDMyLDEyLjAzMnYyMi41NjFDNjE1LjMzNSwxMzcuMDk5LDYyMC43NDksMTQyLjUxNCw2MjcuMzY4LDE0Mi41MTR6Ii8+PHBhdGggZmlsbD0iI0U2OUM5RCIgZD0iTTU3NC4yNjEsMTU1LjI4NGMtNi42MTcsMC0xMi4wMzEsNS40MTUtMTIuMDMxLDEyLjAzM3YyMi41NjFjMCw2LjYxNyw1LjQxNCwxMi4wMzIsMTIuMDMxLDEyLjAzMmg2OS4xODdjNi42MTcsMCwxMi4wMzEtNS40MTUsMTIuMDMxLTEyLjAzMnYtMjIuNTYxYzAtNi42MTgtNS40MTQtMTIuMDMzLTEyLjAzMS0xMi4wMzNINTc0LjI2MXoiLz48cGF0aCBmaWxsPSIjRTY5QzlEIiBkPSJNMzU0LjIwMyw0MTMuMDR2LTIyLjU2MWMwLTYuNjE4LTUuNDE0LTEyLjAzMi0xMi4wMzItMTIuMDMyaC02OS4xODZjLTYuNjE3LDAtMTIuMDMyLDUuNDE1LTEyLjAzMiwxMi4wMzJ2MjIuNTYxYzAsNi42MTcsNS40MTUsMTIuMDMyLDEyLjAzMiwxMi4wMzJoNjkuMTg2QzM0OC43ODksNDI1LjA3MiwzNTQuMjAzLDQxOS42NTcsMzU0LjIwMyw0MTMuMDR6Ii8+PHBhdGggZmlsbD0iI0U2OUM5RCIgZD0iTTQ0MS45MDEsMzc4LjQ0N2gtNjkuMTg1Yy02LjYxOSwwLTEyLjAzMiw1LjQxNS0xMi4wMzIsMTIuMDMydjIyLjU2MWMwLDYuNjE3LDUuNDEzLDEyLjAzMiwxMi4wMzIsMTIuMDMyaDY5LjE4NWM2LjYxOCwwLDEyLjAzNC01LjQxNSwxMi4wMzQtMTIuMDMydi0yMi41NjFDNDUzLjkzNSwzODMuODYxLDQ0OC41MTksMzc4LjQ0Nyw0NDEuOTAxLDM3OC40NDd6Ii8+PHBhdGggZmlsbD0iI0U2OUM5RCIgZD0iTTM4OC43OTYsNDM3Ljg0MkgzMTkuNjFjLTYuNjE3LDAtMTIuMDMxLDUuNDE0LTEyLjAzMSwxMi4wMzN2MjIuNTYxYzAsNi42MTcsNS40MTQsMTIuMDMxLDEyLjAzMSwxMi4wMzFoNjkuMTg3YzYuNjE3LDAsMTIuMDMxLTUuNDE0LDEyLjAzMS0xMi4wMzF2LTIyLjU2MUM0MDAuODI4LDQ0My4yNTYsMzk1LjQxNCw0MzcuODQyLDM4OC43OTYsNDM3Ljg0MnoiLz48cGF0aCBmaWxsPSIjRTY5QzlEIiBkPSJNNzQzLjE3Nyw2NTYuMTg4aC02OS4xODVjLTYuNjE5LDAtMTIuMDMzLDUuNDE1LTEyLjAzMywxMi4wMzJ2MjIuNTZjMCw2LjYyLDUuNDE0LDEyLjAzMiwxMi4wMzMsMTIuMDMyaDY5LjE4NWM2LjYxNywwLDEyLjAzMy01LjQxMiwxMi4wMzMtMTIuMDMydi0yMi41NkM3NTUuMjEsNjYxLjYwMyw3NDkuNzk0LDY1Ni4xODgsNzQzLjE3Nyw2NTYuMTg4eiIvPjxwYXRoIGZpbGw9IiNFNjlDOUQiIGQ9Ik02OTYuNTUyLDcxMS4zMzNoLTY5LjE4NWMtNi42MTksMC0xMi4wMzIsNS40MTUtMTIuMDMyLDEyLjAzMnYyMi41NjFjMCw2LjYxNyw1LjQxMywxMi4wMzEsMTIuMDMyLDEyLjAzMWg2OS4xODVjNi42MTgsMCwxMi4wMzEtNS40MTQsMTIuMDMxLTEyLjAzMXYtMjIuNTYxQzcwOC41ODMsNzE2Ljc0OCw3MDMuMTcsNzExLjMzMyw2OTYuNTUyLDcxMS4zMzN6Ii8+PHBhdGggZmlsbD0iI0U2OUM5RCIgZD0iTTU5Ni44MjIsNzExLjMzM2gtNjkuMTg2Yy02LjYxNywwLTEyLjAzMiw1LjQxNS0xMi4wMzIsMTIuMDMydjIyLjU2MWMwLDYuNjE3LDUuNDE1LDEyLjAzMSwxMi4wMzIsMTIuMDMxaDY5LjE4NmM2LjYxOCwwLDEyLjAzMi01LjQxNCwxMi4wMzItMTIuMDMxdi0yMi41NjFDNjA4Ljg1NCw3MTYuNzQ4LDYwMy40NCw3MTEuMzMzLDU5Ni44MjIsNzExLjMzM3oiLz48cGF0aCBmaWxsPSIjRTY5QzlEIiBkPSJNNTU0LjkyNiw3OS41OTdWNTcuMDM2YzAtNi42MTctNS40MTUtMTIuMDMyLTEyLjAzMi0xMi4wMzJoLTY5LjE4N2MtNi42MTcsMC0xMi4wMzEsNS40MTUtMTIuMDMxLDEyLjAzMnYyMi41NjFjMCw2LjYxOCw1LjQxNCwxMi4wMzIsMTIuMDMxLDEyLjAzMmg2OS4xODdDNTQ5LjUxMSw5MS42MjksNTU0LjkyNiw4Ni4yMTUsNTU0LjkyNiw3OS41OTd6Ii8+PC9nPjwvZz48L3N2Zz4=) repeat;
    background-size: 30%;
}
.window__wrapper {
    position: absolute;
    top: 50%;
    left: 150vw;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
svg:not(:root) {
    overflow: visible;
    display: block;
    width: 200vw;
}
.btn-start {
    -webkit-transform: translateX(-100vw);
    transform: translateX(-100vw);
}
.btn-start__neon {
    -webkit-animation: btn-start__neon 1s steps(1, end) infinite;
    animation: btn-start__neon 1s steps(1, end) infinite;
}
#start:target .window__scene {
    -webkit-animation: wall 8s linear forwards 2s, wall--ease 6s ease-out forwards 6.7s;
    animation: wall 8s linear forwards 2s, wall--ease 6s ease-out forwards 6.7s;
}
#start:target .man {
    -webkit-transform: translateX(calc(-140vw));
    transform: translateX(calc(-140vw));
    -webkit-animation: man 20s linear forwards;
    animation: man 20s linear forwards;
}
#start:target .man .man__bounce {
    -webkit-animation: man--bounce .3s ease-in-out alternate infinite;
    animation: man--bounce .3s ease-in-out alternate infinite;
}
#start:target .man .eye {
    -webkit-animation: man__eye 3s steps(4, end) infinite;
    animation: man__eye 3s steps(4, end) infinite;
}
#start:target .man .arm__right {
    -webkit-transform-origin: 90px 610px;
    transform-origin: 90px 610px;
    -webkit-animation: man__arm--right .6s ease-in-out alternate infinite;
    animation: man__arm--right .6s ease-in-out alternate infinite;
}
#start:target .man .arm__left {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation: man__arm--left .6s ease-in-out alternate infinite;
    animation: man__arm--left .6s ease-in-out alternate infinite;
}
#start:target .man .leg__right {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation: man__leg--right .6s ease-out alternate infinite;
    animation: man__leg--right .6s ease-out alternate infinite;
}
#start:target .man .leg__left {
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-animation: man__leg--left .6s ease-out alternate infinite;
    animation: man__leg--left .6s ease-out alternate infinite;
}
#start:target .window--left,
#start:target .window--right {
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
#start:target .window--left {
    -webkit-transform-origin: left !important;
    transform-origin: left !important;
    -webkit-animation: window--left 1s ease forwards 12.75s;
    animation: window--left 1s ease forwards 12.75s;
}
#start:target .window--left .window__shadow {
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-animation: window__shadow 0.3s ease forwards 13.5s;
    animation: window__shadow 0.3s ease forwards 13.5s;
}
#start:target .window--right {
    -webkit-transform-origin: right !important;
    transform-origin: right !important;
    -webkit-animation: window--right 1s ease forwards 12.75s;
    animation: window--right 1s ease forwards 12.75s;
}
#start:target .window--right .window__shadow {
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-animation: window__shadow 0.3s ease forwards 13.5s;
    animation: window__shadow 0.3s ease forwards 13.5s;
}
#start:target .window__shadow {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
}
#start:target .flower1 {
    -webkit-transform: translateY(40px) scale(0.1);
    transform: translateY(40px) scale(0.1);
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-animation: flowers 0.5s ease forwards 12.55s;
    animation: flowers 0.5s ease forwards 12.55s;
}
#start:target .flower2 {
    -webkit-transform: translateY(40px) scale(0.1);
    transform: translateY(40px) scale(0.1);
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-animation: flowers 0.5s ease forwards 12.65s;
    animation: flowers 0.5s ease forwards 12.65s;
}
#start:target .flower3 {
    -webkit-transform: translateY(40px) scale(0.1);
    transform: translateY(40px) scale(0.1);
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-animation: flowers 0.5s ease forwards 12.75s;
    animation: flowers 0.5s ease forwards 12.75s;
}
#start:target .flower4 {
    -webkit-transform: translateY(40px) scale(0.1);
    transform: translateY(40px) scale(0.1);
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-animation: flowers 0.5s ease forwards 12.85s;
    animation: flowers 0.5s ease forwards 12.85s;
}
#start:target .flower5 {
    -webkit-transform: translateY(40px) scale(0.1);
    transform: translateY(40px) scale(0.1);
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-animation: flowers 0.5s ease forwards 12.95s;
    animation: flowers 0.5s ease forwards 12.95s;
}
#start:target .flower6 {
    -webkit-transform: translateY(40px) scale(0.1);
    transform: translateY(40px) scale(0.1);
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-animation: flowers 0.5s ease forwards 13.05s;
    animation: flowers 0.5s ease forwards 13.05s;
}
#start:target .flower7 {
    -webkit-transform: translateY(40px) scale(0.1);
    transform: translateY(40px) scale(0.1);
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-animation: flowers 0.5s ease forwards 13.15s;
    animation: flowers 0.5s ease forwards 13.15s;
}
#start:target .flower8 {
    -webkit-transform: translateY(40px) scale(0.1);
    transform: translateY(40px) scale(0.1);
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-animation: flowers 0.5s ease forwards 13.25s;
    animation: flowers 0.5s ease forwards 13.25s;
}
@-webkit-keyframes btn-start__neon {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}
@keyframes btn-start__neon {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}
@-webkit-keyframes flowers {
    to {
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center;
        -webkit-transform: translateY(0) scale(1);
        transform: translateY(0) scale(1);
    }
}
@keyframes flowers {
    to {
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center;
        -webkit-transform: translateY(0) scale(1);
        transform: translateY(0) scale(1);
    }
}
@-webkit-keyframes window--left {
    to {
        -webkit-transform: perspective(1000px) rotateY(-180deg);
        transform: perspective(1000px) rotateY(-180deg);
    }
}
@keyframes window--left {
    to {
        -webkit-transform: perspective(1000px) rotateY(-180deg);
        transform: perspective(1000px) rotateY(-180deg);
    }
}
@-webkit-keyframes window--right {
    to {
        -webkit-transform: perspective(1000px) rotateY(180deg);
        transform: perspective(1000px) rotateY(180deg);
    }
}
@keyframes window--right {
    to {
        -webkit-transform: perspective(1000px) rotateY(180deg);
        transform: perspective(1000px) rotateY(180deg);
    }
}
@-webkit-keyframes window__shadow {
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}
@keyframes window__shadow {
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}
@-webkit-keyframes wall {
    to {
        -webkit-transform: translateX(-100vw);
        transform: translateX(-100vw);
    }
}
@keyframes wall {
    to {
        -webkit-transform: translateX(-100vw);
        transform: translateX(-100vw);
    }
}
@-webkit-keyframes wall--ease {
    from {
        -webkit-transform: translateX(-59vw);
        transform: translateX(-59vw);
    }
    to {
        -webkit-transform: translateX(-100vw);
        transform: translateX(-100vw);
    }
}
@keyframes wall--ease {
    from {
        -webkit-transform: translateX(-59vw);
        transform: translateX(-59vw);
    }
    to {
        -webkit-transform: translateX(-100vw);
        transform: translateX(-100vw);
    }
}
@-webkit-keyframes man {
    to {
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px);
    }
}
@keyframes man {
    to {
        -webkit-transform: translateX(2000px);
        transform: translateX(2000px);
    }
}
@-webkit-keyframes man--bounce {
    to {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}
@keyframes man--bounce {
    to {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}
@-webkit-keyframes man__eye {
    0%, 4% {
        -webkit-transform: scaleY(0.2);
        transform: scaleY(0.2);
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
    }
    2%,
    6% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
    }
}
@keyframes man__eye {
    0%, 4% {
        -webkit-transform: scaleY(0.2);
        transform: scaleY(0.2);
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
    }
    2%,
    6% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
    }
}
@-webkit-keyframes man__arm--right {
    to {
        -webkit-transform: rotate(-40deg);
        transform: rotate(-40deg);
    }
}
@keyframes man__arm--right {
    to {
        -webkit-transform: rotate(-40deg);
        transform: rotate(-40deg);
    }
}
@-webkit-keyframes man__arm--left {
    to {
        -webkit-transform: rotate(40deg);
        transform: rotate(40deg);
    }
}
@keyframes man__arm--left {
    to {
        -webkit-transform: rotate(40deg);
        transform: rotate(40deg);
    }
}
@-webkit-keyframes man__leg--right {
    to {
        -webkit-transform: rotate(50deg);
        transform: rotate(50deg);
    }
}
@keyframes man__leg--right {
    to {
        -webkit-transform: rotate(50deg);
        transform: rotate(50deg);
    }
}
@-webkit-keyframes man__leg--left {
    to {
        -webkit-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }
}
@keyframes man__leg--left {
    to {
        -webkit-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }
}

HTML

multi-scene animation CSS and svg only without js

css3, walk, window

编辑器支持Emmet

快捷键

multi-scene animation CSS and svg only without js

css3, walk, window

使用SVG过滤器和CSS3动画实现的文本特效 弯弯曲曲的蚯蚓字

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

使用SVG过滤器和CSS3动画实现的文本特效弯弯曲曲的蚯蚓字