纯CSS构建3D旗子波动动画

pure css flag waving，旗杆和飘扬的旗帜，带阴影。

css, flag

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url("https://fonts.googleapis.com/css2?family=Orelega+One&display=swap");
*,
*::before,
*::after {
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}
body {
    font-family: "Orelega One", cursive;
    background-image: linear-gradient(#ccc, #999);
    color: #fffc;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    perspective: 20em;
}
.flag {
    position: relative;
    width: 0;
    height: 16em;
    background-color: #fff;
    transform: translateX(-6em) rotateX(-30deg) rotateY(15deg);
    transform-style: preserve-3d;
}
.flap {
    position: absolute;
    top: 0;
    left: calc(100% - 1px);
    width: calc(1em + 1px);
    height: 9em;
    box-shadow: 0px 0px 1em #0003 inset;
    transform-style: preserve-3d;
    transform-origin: left;
    -webkit-animation: flap 3s infinite ease-in-out;
    animation: flap 3s infinite ease-in-out;
}
.flap {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    background-image: linear-gradient(90deg, #2d862d, #2d863c);
    --v: 0deg;
}
.flap .content::before {
    left: 0em;
}
.flap .content::after {
    left: 0em;
}
.flap > .flap {
    -webkit-animation-delay: -0.375s;
    animation-delay: -0.375s;
    background-image: linear-gradient(90deg, #2d863c, #2d864a);
    --v: 2.5deg;
}
.flap > .flap .content::before {
    left: -0.25em;
}
.flap > .flap .content::after {
    left: -0.5em;
}
.flap > .flap > .flap {
    -webkit-animation-delay: -0.75s;
    animation-delay: -0.75s;
    background-image: linear-gradient(90deg, #2d864a, #2d8659);
    --v: 5deg;
}
.flap > .flap > .flap .content::before {
    left: -0.5em;
}
.flap > .flap > .flap .content::after {
    left: -1em;
}
.flap > .flap > .flap > .flap {
    -webkit-animation-delay: -1.125s;
    animation-delay: -1.125s;
    background-image: linear-gradient(90deg, #2d8659, #2d8668);
    --v: 7.5deg;
}
.flap > .flap > .flap > .flap .content::before {
    left: -0.75em;
}
.flap > .flap > .flap > .flap .content::after {
    left: -1.5em;
}
.flap > .flap > .flap > .flap > .flap {
    -webkit-animation-delay: -1.5s;
    animation-delay: -1.5s;
    background-image: linear-gradient(90deg, #2d8668, #2d8677);
    --v: 10deg;
}
.flap > .flap > .flap > .flap > .flap .content::before {
    left: -1em;
}
.flap > .flap > .flap > .flap > .flap .content::after {
    left: -2em;
}
.flap > .flap > .flap > .flap > .flap > .flap {
    -webkit-animation-delay: -1.875s;
    animation-delay: -1.875s;
    background-image: linear-gradient(90deg, #2d8677, #2d8686);
    --v: 12.5deg;
}
.flap > .flap > .flap > .flap > .flap > .flap .content::before {
    left: -1.25em;
}
.flap > .flap > .flap > .flap > .flap > .flap .content::after {
    left: -2.5em;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap {
    -webkit-animation-delay: -2.25s;
    animation-delay: -2.25s;
    background-image: linear-gradient(90deg, #2d8686, #2d7786);
    --v: 15deg;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before {
    left: -1.5em;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after {
    left: -3em;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap {
    -webkit-animation-delay: -2.625s;
    animation-delay: -2.625s;
    background-image: linear-gradient(90deg, #2d7786, #2d6886);
    --v: 17.5deg;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before {
    left: -1.75em;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after {
    left: -3.5em;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap {
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
    background-image: linear-gradient(90deg, #2d6886, #2d5986);
    --v: 20deg;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before {
    left: -2em;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after {
    left: -4em;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap {
    -webkit-animation-delay: -3.375s;
    animation-delay: -3.375s;
    background-image: linear-gradient(90deg, #2d5986, #2d4a86);
    --v: 22.5deg;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before {
    left: -2.25em;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after {
    left: -4.5em;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap {
    -webkit-animation-delay: -3.75s;
    animation-delay: -3.75s;
    background-image: linear-gradient(90deg, #2d4a86, #2d3c86);
    --v: 25deg;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before {
    left: -2.5em;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after {
    left: -5em;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap {
    -webkit-animation-delay: -4.125s;
    animation-delay: -4.125s;
    background-image: linear-gradient(90deg, #2d3c86, #2d2d86);
    --v: 27.5deg;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before {
    left: -2.75em;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after {
    left: -5.5em;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap {
    -webkit-animation-delay: -4.5s;
    animation-delay: -4.5s;
    background-image: linear-gradient(90deg, #2d2d86, #3c2d86);
    --v: 30deg;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before {
    left: -3em;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after {
    left: -6em;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap {
    -webkit-animation-delay: -4.875s;
    animation-delay: -4.875s;
    background-image: linear-gradient(90deg, #3c2d86, #4a2d86);
    --v: 32.5deg;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before {
    left: -3.25em;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after {
    left: -6.5em;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap {
    -webkit-animation-delay: -5.25s;
    animation-delay: -5.25s;
    background-image: linear-gradient(90deg, #4a2d86, #592d86);
    --v: 35deg;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before {
    left: -3.5em;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after {
    left: -7em;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap {
    -webkit-animation-delay: -5.625s;
    animation-delay: -5.625s;
    background-image: linear-gradient(90deg, #592d86, #682d86);
    --v: 37.5deg;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before {
    left: -3.75em;
}
.flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after {
    left: -7.5em;
}
.flap::after {
    content: "";
    position: absolute;
    top: 16em;
    left: 50%;
    width: 200%;
    height: 1em;
    background-color: #999;
    transform: translate(-50%, -50%) rotateX(90deg);
    border-radius: 0.5em;
    filter: blur(0.6em);
}
.content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: translateZ(0.5px);
    text-shadow: 0 0 0.5em #000;
}
.content::before {
    content: "CSS";
    position: absolute;
    bottom: 40%;
    left: 0;
    width: 4em;
    text-align: center;
    font-size: 4em;
}
.content::after {
    content: "flag";
    position: absolute;
    top: 50%;
    left: 0;
    width: 8em;
    text-align: center;
    font-size: 2em;
    white-space: pre;
    line-height: 0.8;
    -webkit-animation: afterText 6.6s infinite step-end;
    animation: afterText 6.6s infinite step-end;
}
@-webkit-keyframes afterText {
    0% {
        content: "flag";
    }
    50% {
        content: "flag";
    }
}
@keyframes afterText {
    0% {
        content: "flag";
    }
    50% {
        content: "flag";
    }
}
@-webkit-keyframes flap {
    0%, 100% {
        transform: rotateY(calc(var(--v) * -1));
    }
    50% {
        transform: rotateY(var(--v));
    }
}
@keyframes flap {
    0%, 100% {
        transform: rotateY(calc(var(--v) * -1));
    }
    50% {
        transform: rotateY(var(--v));
    }
}
.pole {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1em;
    height: 100%;
    border-radius: 0 0 0.5em 0.5em/0 0 0.3em 0.3em;
    background-image: linear-gradient(#7777, #6660, #555), linear-gradient(90deg, #777, #fff, #555);
}
.pole::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 4em;
    height: 4em;
    transform: translate(-50%, -50%) rotateX(90deg);
    background-image: radial-gradient(#0004, #0000 60%);
}
.pole::after {
    content: "";
    position: absolute;
    top: 0%;
    left: 50%;
    width: 1em;
    height: 0.4em;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background-image: radial-gradient(circle at top, #aaa, #333);
}

HTML

pure css flag waving，旗杆和飘扬的旗帜，带阴影。

css, flag

编辑器支持Emmet

快捷键

pure css flag waving，旗杆和飘扬的旗帜，带阴影。

css, flag

使用纯CSS3构建的3D卷轴动画特效

纯CSS构建的3D网格平面延伸动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：