纯css实现带摇头控制按钮的电风扇效果
代码语言:html
所属分类:动画
代码描述:纯css实现带摇头控制按钮的电风扇效果,可以按下开关进行摇头设置、风力设置
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> 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: flex; -webkit-box-align: center; align-items: center; -webkit-box-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: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-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-gradient(linear, left top, left bottom, color-stop(15%, #d8d4c2), color-stop(40%, #d8d4c2), color-stop(60%, transparent)); 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__wi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0