纯CSS3实现的3D风扇动画

Pure CSS Fan 可以调节风力和是否转头。

CSS3， fan

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
}
html {
    line-height: 1;
}
ol,
ul {
    list-style: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
caption,
th,
td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle;
}
q,
blockquote {
    quotes: none;
}
q:before,
q:after,
blockquote:before,
blockquote:after {
    content: "";
    content: none;
}
a img {
    border: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}
html,
body,
main {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    box-sizing: border-box;
}
body {
    background-color: #222b30;
    color: #f0f0f0;
}
.flexy__center {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.plane-background {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}
.fan {
    width: 20em;
    height: 20em;
    -webkit-transform: rotateY(40deg) rotateX(20deg);
    transform: rotateY(40deg) rotateX(20deg);
    -webkit-perspective: 500px;
    perspective: 500px;
    -webkit-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    z-index: 2;
    margin-top: -7.40741em;
    -webkit-animation: lookAround 12s ease-in-out infinite;
    animation: lookAround 12s ease-in-out infinite;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
.fan__container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.fan__blade {
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7.14286em;
    height: 4em;
    border-radius: 50% 0.4em 100% 4em;
    background-color: #eceae1;
    -webkit-transform: translate(28%, -50%) rotateZ(0) rotateX(25deg);
    transform: translate(28%, -50%) rotateZ(0) rotateX(25deg);
    -webkit-transform-origin: -28% 50%;
    transform-origin: -28% 50%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    background-image: -webkit-linear-gradient(#d8d4c2 15%, #d8d4c2 40%, transparent 60%);
    background-image: linear-gradient(#d8d4c2 15%, #d8d4c2 40%, transparent 60%);
}
.fan__blade:nth-child(1) {
    -webkit-transform: translate(28%, -50%) rotateZ(60deg) rotateX(25deg);
    transform: translate(28%, -50%) rotateZ(60deg) rotateX(25deg);
}
.fan__blade:nth-child(2) {
    -webkit-transform: translate(28%, -50%) rotateZ(120deg) rotateX(25deg);
    transform: translate(28%, -50%) rotateZ(120deg) rotateX(25deg);
}
.fan__blade:nth-child(3) {
    -webkit-transform: translate(28%, -50%) rotateZ(180deg) rotateX(25deg);
    transform: translate(28%, -50%) rotateZ(180deg) rotateX(25deg);
}
.fan__blade:nth-child(4) {
    -webkit-transform: translate(28%, -50%) rotateZ(240deg) rotateX(25deg);
    transform: translate(28%, -50%) rotateZ(240deg) rotateX(25deg);
}
.fan__blade:nth-child(5) {
    -webkit-transform: translate(28%, -50%) rotateZ(300deg) rotateX(25deg);
    transform: translate(28%, -50%) rotateZ(300deg) rotateX(25deg);
}
.fan__blade:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50% 0.4em 100% 4em;
    border: 0.5em solid transparent;
    border-top-width: 0;
    border-bottom-width: 0;
    border-right-color: #cc0000;
    border-left-width: 2em;
}
.fan__hub {
    width: 4.16667em;
    height: 4.16667em;
    border-radius: 50%;
    background-color: #cc0000;
    position: relative;
    z-index: 1;
    -webkit-perspective: 500px;
    perspective: 500px;
    -webkit-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
    -webkit-transform: rotateZ(0);
    transform: rotateZ(0);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    box-shadow: 0 0 3em 1em rgba(34, 43, 48, 0.25);
    -webkit-animation: hubRotation 1s linear infinite;
    animation: hubRotation 1s linear infinite;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
.fan__hub:after {
    content: '';
    width: 4.16667em;
    height: 4.16667em;
    border-radius: 50%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    -webkit-transform: translateZ(0.35em) rotateZ(0) scale(0.9);
    transform: translateZ(0.35em) rotateZ(0) scale(0.9);
    background-color: #eceae1;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4OTcuMTQyODgiIGhlaWdodD0iODk3LjE0Mjg4Ij4KICAgIDxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2NjMDAwMCIgc3Ryb2tlLXdpZHRoPSI1MCIgc3Ryb2tlLW1pdGVybGltaXQ9IjQiIGQ9Im04ODYuMzY2ODIxLDQ0NC41NDkxNjRhNDM4LjI5NTUzMiw0MzQuNzczMDcxIDAgMSAxIC04NzYuNTkxMDMsMGE0MzguMjk1NTMyLDQzNC43NzMwNzEgMCAxIDEgODc2LjU5MTAzLDB6IiBpZD0icGF0aDIxNjQiIC8+CiAgICA8cGF0aCBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI2NjMDAwMCIgc3Ryb2tlLXdpZHRoPSI1MCIgc3Ryb2tlLW1pdGVybGltaXQ9IjQiIGQ9Im00MzUuNDQ1NDM1LDQyOS4xNDE4NDZjLTIxLjI1MTQ2NSwwLjc1ODM5MiAtMTEuNTAxNjc4LC0yOC40MjEwODIgLTEuMjUzOTk4LC0zNS41MDQ3NjFjMjcuNzcwNzIxLC0xOS4xOTYwNzUgNjIuMjE0MTExLDUuNzg2MzE2IDcxLjg5NjYzNywzMi45ODM2NzNjMTcuMzE5NjQxLDQ4LjY0OTY1OCAtMjAuNTU0OTMyLDk3LjQxMjY4OSAtNjYuODgwNjQ2LDEwOS4wMzUxMjZjLTY3Ljk4NDY1LDE3LjA1NjMzNSAtMTMyLjIxNTkxMiwtMzUuNTg3MTU4IC0xNDUuMDQ3MjExLC0xMDEuNDcyMDE1Yy0xNy4xMDE5OSwtODcuODE0MDU2IDUwLjI0OTc4NiwtMTY4LjYyODY2MiAxMzUuMDE1MTk4LC0xODIuNTY1NDQ1YzEwNi42Njg0NTcsLTE3LjUzNzk3OSAyMDMuNDE2MTk5LDY1LjQyODQ4MiAyMTguMTk3ODc2LDE2OS45NjAxOWMxNy45MDI0NjYsMTI2LjYwMjExMiAtNzkuOTI2OTQxLDI0MC4zODI5OTYgLTIwMy4xNDk3OCwyNTYuMDk2MDA4Yy0xNDUuMjEzODM3LDE4LjUxNzIxMiAtMjc0LjkwODAzNSwtOTUuMjUyNTAyIC0yOTEuMzQ4NDk1LC0yMzguNDQ4NjA4Yy0xOC45ODEwNzksLTE2NS4zMjU1IDEwOS41OTI0MjIsLTMxMi4zMTU3ODggMjcxLjI4NDMxNywtMzI5LjYyNjM4OWMxODMuNzI0NjQsLTE5LjY2OTM1IDM0Ni41MTY2OTMsMTI1LjA2ODkyNCAzNjQuNDk5MTE1LDMwNi45MzY5NjZjMjAuMTczNTg0LDIwNC4wMjg0NzMgLTEzOS4yNTI1MDIsMzg0LjMyOTk4NyAtMzM5LjQxODgyMyw0MDMuMTU2NzY5Yy0yMjIuMjIyNTY1LDIwLjkwMTMwNiAtNDE4LjE4Mzc2NCwtMTU0Ljg4MTQ3IC00MzcuNjQ5NzI0LC0zNzUuNDI1MjkzYy0wLjY2MDA3MSwtNy40Nzg0NTUgLTEuMTIzMjk4LC0xNC45NzQzNjUgLTEuMzg5NTc1LC0yMi40Nzc0NzgiIGlkPSJwYXRoMjE2OCIgLz4KPC9zdmc+Cg==);
    background-size: cover;
}
.fan__shield,
.fan__shield:after,
.fan__shield:before,
.fan__shield__wires,
.fan__shield__wires:after,
.fan__shield__wires:before {
    width: 20em;
    height: 20em;
    z-index: 1;
    position: absolute;
    border-radius: 50%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    box-sizing: border-box;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}
.fan__shield {
    left: 0;
    top: 0;
    -webkit-transform: translateZ(0em);
    transform: translateZ(0em);
    border: 3px solid #f0f0f0;
}
.fan__shield:after {
    -webkit-transform: translateZ(-2.22222em) scale(0.5);
    transform: translateZ(-2.22222em) scale(0.5);
}
.fan__shield:before {
    -webkit-transform: translateZ(2.22222em) scale(0.5);
    transform: translateZ(2.22222em) scale(0.5);
}
.fan__shield:after,
.fan__shield:before {
    content: '';
    border: 5px solid #f0f0f0;
}
.fan__shield__wires,
.fan__shield__wires:after,
.fan__shield__wires:before {
    height: 100%;
    width: 4.44444em;
}
.fan__shield__wires {
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) rotateY(90deg);
    transform: translate(-50%, -50%) rotateY(90deg);
}
.fan__shield__wires:after,
.fan__shield__wires:before {
    content: '';
    border: 2px solid #f0f0f0;
    border-radius: 20em;
    border-left-width: .00em;
    border-right-width: .00em;
    border-left-color: transparent;
    border-right-color: transparent;
    background-image: -webkit-linear-gradient(0deg, #eceae1 2%, transparent 2%, transparent 98%, #eceae1 98%), -webkit-linear-gradient(0deg, #eceae1 2%, transparent 2%, transparent 98%, #eceae1 98%);
    background-image: linear-gradient(90deg, #eceae1 2%, transparent 2%, transparent 98%, #eceae1 98%), linear-gradient(90deg, #eceae1 2%, transparent 2%, transparent 98%, #eceae1 98%);
    background-size: 100% 28%, 100% 27%;
    background-repeat: no-repeat;
    background-position: left top, left bottom;
}
.fan__shield__wires:after {
    -webkit-transform: translateZ(2.22222em);
    transform: translateZ(2.22222em);
}
.fan__shield__wires:before {
    -webkit-transform: translateZ(-2.22222em);
    transform: translateZ(-2.22222em);
}
.fan__shield__wires:nth-child(2) {
    -webkit-transform: translate(-50%, -50%) rotateY(90deg) rotateX(90deg);
    transform: translate(-50%, -50%) rotateY(90deg) rotateX(90deg);
}
.fan__base {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1;
    margin-top: -4.44444em;
}
.fan__base__arm {
    top: 50%;
    left: 50%;
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    border-radius: 20em;
    width: 2em;
    height: 10em;
    border: 2px solid #eceae1;
    border-bottom-color: transparent;
    z-index: 2;
}
.fan__base__foot {
    width: 8em;
    height: 8em;
    position: absolute;
    top: 11.76471em;
    border-radius: 80% 50% 100% 50%;
    -webkit-transform: translate(-50%, -30%) rotate(45deg);
    transform: translate(-50%, -30%) rotate(45deg);
    background-color: #cc0000;
    box-shadow: inset -1em -1em 4em 0 rgba(0, 0, 0, 0.65), 0.5em 0.5em 2em 0 rgba(0, 0, 0, 0.25), inset -0.25em -0.25em 0 0 #eceae1, 0.45em 0.45em 1em -0.5em rgba(0, 0, 0, 0.5);
    z-index: 3;
}
.fan__actions {
    top: 50%;
    left: 50%;
    height: 2em;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    z-index: 4;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: translate(-50%, 350%) rotateX(20deg);
    transform: translate(-50%, 350%) rotateX(20deg);
    -webkit-perspective: 178.57143px;
    perspective: 178.57143px;
    -webkit-perspective-origin: 50% 100%;
    perspective-origin: 50% 100%;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    box-shadow: 0 -0.25em 0.5em -1px #b30000;
}
.fan__actions__button {
    display: inline-block;
    width: 1.19048em;
    height: 2.5em;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(40deg);
    transform: rotateX(40deg);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    background-image: -webkit-linear-gradient(#eceae1, #c4bea3);
    background-image: linear-gradient(#eceae1, #c4bea3);
    box-shadow: 0 0 1px 0 #c4bea3;
}
.fan__actions__button:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 2px;
    background-color: black;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(-30deg);
    transform: rotateX(-30deg);
    opacity: .25;
}
.fan__actions__button:nth-child(2) {
    margin: 0 1px;
}
.fan__input {
    display: none;
}
.fan__input#fan-power:checked ~ .fan .fan__hub {
    -webkit-animation-play-state: running;
    animation-play-state: running;
}
.fan__input#fan-power:checked ~ .fan__actions .fan__actions__button:nth-child(1) {
    -webkit-transform: rotateX(30deg);
    transform: rotateX(30deg);
    background-image: -webkit-linear-gradient(#eceae1, #b1a883);
    background-image: linear-gradient(#eceae1, #b1a883);
}
.fan__input#fan-power:checked ~ .fan__actions .fan__actions__button:nth-child(1):before {
    -webkit-transform: rotateX(-10deg);
    transform: rotateX(-10deg);
}
.fan__input#fan-rotate:checked ~ .fan {
    -webkit-animation-play-state: running;
    animation-play-state: running;
}
.fan__input#fan-rotate:checked ~ .fan__actions .fan__actions__button:nth-child(2) {
    -webkit-transform: rotateX(30deg);
    transform: rotateX(30deg);
    background-image: -webkit-linear-gradient(#eceae1, #b1a883);
    background-image: linear-gradient(#eceae1, #b1a883);
}
.fan__input#fan-rotate:checked ~ .fan__actions .fan__actions__button:nth-child(2):before {
    -webkit-transform: rotateX(-10deg);
    transform: rotateX(-10deg);
}
.fan__input#fan-speed:checked ~ .fan .fan__hub {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
}
.fan__input#fan-speed:checked ~ .fan__actions .fan__actions__button:nth-child(3) {
    -webkit-transform: rotateX(30deg);
    transform: rotateX(30deg);
    background-image: -webkit-linear-gradient(#eceae1, #b1a883);
    background-image: linear-gradient(#eceae1, #b1a883);
}
.fan__input#fan-speed:checked ~ .fan__actions .fan__actions__button:nth-child(3):before {
    -webkit-transform: rotateX(-10deg);
    transform: rotateX(-10deg);
}
@-webkit-keyframes hubRotation {
    100% {
        -webkit-transform: rotateZ(-360deg);
        transform: rotateZ(-360deg);
    }
}
@keyframes hubRotation {
    100% {
        -webkit-transform: rotateZ(-360deg);
        transform: rotateZ(-360deg);
    }
}
@-webkit-keyframes capRotation {
    100% {
        -webkit-transform: translateZ(0.35em) rotateZ(-360deg) scale(0.9);
        transform: translateZ(0.35em) rotateZ(-360deg) scale(0.9);
    }
}
@keyframes capRotation {
    100% {
        -webkit-transform: translateZ(0.35em) rotateZ(-360deg) scale(0.9);
        transform: translateZ(0.35em) rotateZ(-360deg) scale(0.9);
    }
}
@-webkit-keyframes lookAround {
    0%, 100% {
        -webkit-transform: rotateY(40deg) rotateX(20deg);
        transform: rotateY(40deg) rotateX(20deg);
    }
    50% {
        -webkit-transform: rotateY(-40deg) rotateX(20deg);
        transform: rotateY(-40deg) rotateX(20deg);
    }
}
@keyframes lookAround {
    0%, 100% {
        -webkit-transform: rotateY(40deg) rotateX(20deg);
        transform: rotateY(40deg) rotateX(20deg);
    }
    50% {
        -webkit-transform: rotateY(-40deg) rotateX(20deg);
        transform: rotateY(-40deg) rotateX(20deg);
    }
}

HTML

Pure CSS Fan 可以调节风力和是否转头。

CSS3， fan

编辑器支持Emmet

快捷键

Pure CSS Fan 可以调节风力和是否转头。

CSS3， fan

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：