CSS3+SVG 有创意的动画404页面

404 svg animated page concept for e-store @ Zajno (Illustrated by Lina)

CSS3, SVG

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.cls-1 {
    fill: #ffc541;
}
.cls-2 {
    fill: #4e4066;
}
.cls-3 {
    fill: #6f5b92;
}
.cls-4 {
    fill: #f78d5e;
}
.cls-5 {
    fill: #fa976c;
}
.cls-6,
.cls-7,
.cls-8 {
    fill: #b65c32;
}
.cls-10,
.cls-6 {
    opacity: 0.6;
}
.cls-7 {
    opacity: 0.4;
}
.cls-9 {
    fill: #f4b73b;
}
.cls-11 {
    fill: #f9c358;
}
.cls-12 {
    fill: #9b462c;
}
.cls-13 {
    fill: #aa512e;
}
.cls-14 {
    fill: #7d6aa5;
}
/* animations */

.wheel {
    animation: wheel-rotate 6s ease infinite;
    transform-origin: center;
}
@keyframes wheel-rotate {
    50% {
        transform: rotate(360deg);
        animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    }
    100% {
        transform: rotate(960deg)
    }
}
.clock-hand-1 {
    animation: clock-rotate 3s linear infinite;
    transform-origin: bottom;
}
.clock-hand-2 {
    animation: clock-rotate 6s linear infinite;
    transform-origin: bottom;
}
@keyframes clock-rotate {
    100% {
        transform: rotate(360deg)
    }
}
#box-top {
    animation: box-top-anim 2s linear infinite;
    transform-origin: right top;
}
@keyframes box-top-anim {
    50% {
        transform: rotate(-5deg)
    }
}
#umbrella {
    animation: umbrella-anim 6s linear infinite;
    transform-origin: center;
}
@keyframes umbrella-anim {
    25% {
        transform: translateY(10px) rotate(5deg);
    }
    75% {
        transform: rotate(-5deg);
    }
}
#cup {
    animation: cup-rotate 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
    transform-origin: top left;
}
@keyframes cup-rotate {
    50% {
        transform: rotate(-5deg)
    }
}
#pillow {
    animation: pillow-anim 3s linear infinite;
    transform-origin: center;
}
@keyframes pillow-anim {
    25% {
        transform: rotate(10deg) translateY(5px)
    }
    75% {
        transform: rotate(-10deg)
    }
}
#stripe {
    animation: stripe-anim 3s linear infinite;
    transform-origin: center;
}
@keyframes stripe-anim {
    25% {
        transform: translate(10px, 0) rotate(-10deg)
    }
    75% {
        transform: translateX(10px)
    }
}
#bike {
    animation: bike-anim 6s ease infinite;
}
@keyframes bike-anim {
    0% {
        transform: translateX(-1300px)
    }
    50% {
        transform: translateX(0);
        animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    }
    100% {
        transform: translateX(1300px)
    }
}
#rucksack {
    animation: ruck-anim 3s linear infinite;
    transform-origin: top;
}
@keyframes ruck-anim {
    50% {
        transform: rotate(5deg)
    }
}
.circle {
    animation: circle-anim ease infinite;
    transform-origin: center;
    perspective: 0px;
}
.circle.c1 {
    animation-duration: 2s
}
.circle.c2 {
    animation-duration: 3s
}
.circle.c3 {
    animation-duration: 1s
}
.circle.c4 {
    animation-duration: 1s
}
.circle.c5 {
    animation-duration: 2s
}
.circle.c6 {
    animation-duration: 3s
}
@keyframes circle-anim {
    50% {
        transform: scale(.2) rotateX(360deg) rotateY(360deg)
    }
}
.four,
#ou {
    animation: four-anim cubic-bezier(0.39, 0.575, 0.565, 1) infinite;
}
.four.a {
    transform-origin: bottom left;
    animation-duration: 3s;
}
.four.b {
    transform-origin: bottom right;
    animation-duration: 3s;
}
#ou {
    animation-duration: 6s;
    transform-origin: center;
}
@keyframes four-anim {
    50% {
        transform: scale(.98)
    }
}

HTML

</g>
            <g class="four b">

</g>
            <path class="cls-3" id="ou" d="M956.54,168.2c-194.34,0-351.89,157.55-351.89,351.89S762.19,872,956.54,872s351.89-157.55,351.89-351.89S1150.88,168.2,956.54,168.2Zm0,584.49c-128.46,0-232.6-104.14-232.6-232.6s104.14-232.6,232.6-232.6,232.6,104.14,232.6,232.6S1085,752.69,956.54,752.69Z"
            />
        </g>
        <g id="umbrella" data-name="Layer 3">
            <g>
                <circle class="cls-4" cx="1187.53" cy="240.3" r="7.66" transform="translate(236.36 990.8) rotate(-49.71)" />
                <g>
                    <path class="cls-5" d="M1219.56,359.67l55,100.52c32.7-48.48-6.87-142.43-91.75-214.38-84.41-71.55-183-95.33-225.81-56l114.21,44.14Z" />
                    <path class="cls-6" d="M1182.79,245.81c-84.41-71.55-183-95.33-225.81-56l114.21,44.14Z" />
                    <polygon class="cls-7" points="1182.79 245.81 1071.19 233.91 1219.56 359.67 1182.79 245.81" />
                </g>
                <polygon class="cls-8" points="1180.91 409.02 1274.54 460.19 1219.56 359.67 1071.19 233.91 956.98 189.76 1021.95 274.29 1180.91 409.02" />
                <g>
                    <rect class="cls-4" x="997.45" y="358.35" width="175.58" height="5.1" transform="translate(108.21 955.38) rotate(-49.71)" />
                    <rect class="cls-4" x="1028.09" y="399.36" width="21.46" height="32.27" rx="10.73" ry="10.73" transform="translate(515.04 -573.16) rotate(40.29)" />
                </g>
            </g>
        </g>
        <g id="pillow" data-name="Layer 4">
            <path class="cls-1" d="M754,627.07c7,.54,12.92-2.82,13.35-7.59s-4.95-9.24-12-9.87a18.55,18.55,0,0,0-2.17,0l-74.9-81.64c0-.1,0-.19,0-.29,0-7.09-4-12.83-8.8-12.81s-8.75,5.77-8.73,12.87c0,0,0,.09,0,.13l-50.21,46.07h-.09c-7.06-.63-13.14,2.77-13.57,7.59s4.87,9.16,11.85,9.84l76.08,82.92s0,0,0,.06c0,7.09,4,12.83,8.8,12.81s8.65-5.66,8.71-12.65Z"
            />
            <path class="cls-9" d="M669.46,514.82c-4.77-.83-8.75,5.77-8.73,12.87,0,0,0,.09,0,.13l-50.21,46.07h-.09c-7.06-.63-13.14,2.77-13.57,7.59s4.87,9.16,11.85,9.84l76.08,82.92s0,0,0,.06c0,7.09,4,12.83,8.8,12.81s8.65-5.66,8.71-12.65C570.55,573,702.07,520.47,669.46,514.82Z"
            />
        </g>
        <g id="cup" data-name="Layer 7">
            <polygon class="cls-1" points="1173.69 748.21 1140.52 715.42 1195.79 647.35 1241.13 692.16 1173.69 748.21" />
            <polygon class="cls-8" points="1173.69 748.21 1140.52 715.42 1143.93 711.27 1177.81 744.75 1173.69 748.21" />
            <polygon class="cls-5" points="1194.68 731.46 1157.04 694.24 1183.8 661.7 1226.91 704.32 1194.68 731.46" />
            <g class="cls-10">
                <path class="cls-8" d="M1176.32,667.78h0a4.19,4.19,0,0,1,4.19,4.19v33.54a0,0,0,0,1,0,0h-8.38a0,0,0,0,1,0,0V672a4.19,4.19,0,0,1,4.19-4.19Z" transform="translate(822.53 -628.67) rotate(44.67)" />
                <path class="cls-8" d="M1172.73,709.7l23.58-23.85a4.19,4.19,0,0,1,5.92,0h0a4.19,4.19,0,0,1,0,5.92l-23.58,23.85Z" />
                <path class="cls-8" d="M1185.11,722.09l23.58-23.85a4.19,4.19,0,0,1,5.92,0h0a4.19,4.19,0,0,1,0,5.92L1191.06,728Z" />
            </g>
            <path class="cls-5" d="M1197.85,660.5h45.69a5.7,5.7,0,0,1,5.7,5.7v8.32a0,0,0,0,1,0,0h-57.09a0,0,0,0,1,0,0v-8.32A5.7,5.7,0,0,1,1197.85,660.5Z" transform="translate(829.53 -667.66) rotate(45)" />
            <path class="cls-8" d="M1191.49,664.74h53.94a5.25,5.25,0,0,1,5.25,5.25v4.79a0,0,0,0,1,0,0h-64.44a0,0,0,0,1,0,0V670a5.25,5.25,0,0,1,5.25-5.25Z" transform="translate(822.83 -663.17) rotate(44.67)" />
        </g>
        <g id="clock" data-name="Layer 8">

</g>

404 svg animated page concept for e-store @ Zajno (Illustrated by Lina)

CSS3, SVG

编辑器支持Emmet

快捷键

404 svg animated page concept for e-store @ Zajno (Illustrated by Lina)

CSS3, SVG

SVG+CSS3 水滴/冰雪融化的动画

SVG CSS3恐怖而惊艳的脸皮融化（面膜剥落）动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：