css实现渐变三维板砖依次转动动画效果代码
代码语言:html
所属分类:三维
代码描述:css实现渐变三维板砖依次转动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --speed: 4s; } html { height: 100%; } body { margin: 0; background: radial-gradient(#607d8b 15%, #000000 100%); background: radial-gradient(#ffffff 15%, #b9b9b9 100%); font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; height: 100%; } body * { box-sizing: border-box; outline: none; } .container { display: block; width: 100%; height: 100%; overflow: hidden; filter: hue-rotate(0deg); transition: all 1s ease 0s; } .grid { background: repeating-linear-gradient( 150deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 49px, rgba(0, 0, 0, 0.1) 50px, rgba(255, 255, 255, 0) 51px ), repeating-linear-gradient( 31deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 49px, rgba(0, 0, 0, 0.1) 50px, rgba(255, 255, 255, 0) 51px ); position: fixed; width: 100vw; height: 100vh; } .item { position: relative; left: 50%; top: 50%; width: 150px; height: 150px; transform-style: preserve-3d; transform: rotateX(-35deg) rotateY(45deg); transition: transform 0.5s ease 0s; animation: spin var(--speed) 0.05s infinite; z-index: -1; transform-origin: center center; } input#wide:checked ~ .container .item { animation-name: spin-wide; } .item > div { position: absolute; width: 150px; height: 150px; background: #4b08ba; background: #ff5500; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px -3px #fff inset; border: 1px solid rgb(255 255 255 / 5%); box-shadow: 0 0 5px -3px #00000030 inset; } .item > div:nth-child(2) { transform: rotateX(90deg) translate3d(0px, 7px, 7px); background: #ffa116; height: 14px; } .item > div:nth-child(3) { transform: rotateX(0deg) translate3d(0, 0, 14px); } .item > div:nth-child(4) { transform: rotateX(270deg) translate3d(0px, -7px, 143px); background: #ffa116; height: 14px; } .item > div:nth-child(5) { transform: rotateY(90deg) translate3d(-7px, 0, 143px); background: #e04b00; width: 14px !important; } .item > div:nth-child(6) { transform: rotateY(-90deg) translate3d(7px, 0, 7px); background: #e04b00; width: 14px !important; } .item:nth-child(2) { left: calc(50% - 10px); top: calc(50% - 156px); animation-delay: 0.1s; z-index: -2; } .item:nth-child(3) { left: calc(50% - 20px); top: calc(50% - 312px); animation-delay: 0.15s; z-index: -3; } .item:nth-child(4) { left: calc(50% - 30px); top: calc(50% - 468px); animation-delay: 0.2s; z-index: -4; } .item:nth-child(5) { left: calc(50% - 40px); top: calc(50% - 624px); animation-delay: 0.25s; z-index: -5; } .item:nth-child(6) { left: calc(50% - 50px); top: calc(50% - 780px); animation-delay: 0.3s; z-index: -6; } .item:nth-child(7) { left: calc(50% - 60px); top: calc(50% - 936px); animation-delay: 0.35s; z-index: -7; } .item:nth-child(8) { left: calc(50% - 70px); top: calc(50% - 1092px); animation-delay: 0.4s; z-index: -8; } .item:nth-child(9) { left: calc(50% - 80px); top: calc(50% - 1248px); animation-delay: 0.45s; z-index: -9; } .item:nth-child(10) { left: calc(50% - 90px); top: calc(50% - 1404px); animation-delay: 0.5s; z-index: -10; } .item:nth-child(11) { left: calc(50% - 100px); top: calc(50% - 1560px); animation-delay: 0.55s; z-index: -11; } .item:nth-child(12) { left: calc(50% - 110px); top: calc(50% - 1716px); animation-delay: 0.6s; z-index: -12; } .item:nth-child(13) { left: calc(50% - 120px); top: calc(50% - 1872px); animation-delay: 0.65s; z-index: -13; } .item:nth-child(14) { left: calc(50% - 130px); top: calc(50% - 2028px); animation-delay: 0.7s; z-index: -14; } .item:nth-child(15) { left: calc(50% - 140px); top: calc(50% - 2184px); animation-delay: 0.75s; z-index: -15; } .item:nth-child(16) { left: calc(50% - 150px); top: calc(50% - 2340px); animation-delay: 0.8s; z-index: -16; } .item:nth-child(17) { left: calc(50% - 160px); top: calc(50% - 2496px); animation-delay: 0.85s; z-index: -17; } .item:nth-child(18) { left: calc(50% - 170px); top: calc(50% - 2652px); animation-delay: 0.9s; z-index: -18; } .item:nth-child(19) { left: calc(50% - 180px); top: calc(50% - 2808px); animation-delay: 0.95s; z-index: -19; } .item:nth-child(20) { left: calc(50% - 190px); top: calc(50% - 2964px); animation-delay: 1s; z-index: -20; } .item:nth-child(21) { left: calc(50% - 200px); top: calc(50% - 3120px); animation-delay: 1.05s; z-index: -21; } .item:nth-child(22) { left: calc(50% - 210px); top: calc(50% - 3276px); animation-delay: 1.1s; z-index: -22; } .item:nth-child(23) { left: calc(50% - 220px); top: calc(50% - 3432px); animation-delay: 1.15s; z-index: -23; } .item:nth-child(24) { left: calc(50% - 230px); top: calc(50% - 3588px); animation-delay: 1.2s; z-index: -24; } .item:nth-child(25) { left: calc(50% - 240px); top: calc(50% - 3744px); animation-delay: 1.25s; z-index: -25; } .item:nth-child(26) { left: calc(50% - 250px); top: calc(50% - 3900px); animation-delay: 1.3s; z-index: -26; } .item:nth-child(27) { left: calc(50% - 260px); top: calc(50% - 4056px); animation-delay: 1.35s; z-index: -27; } .item:nth-child(28) { left: calc(50% - 270px); top: calc(50% - 4212px); animation-delay: 1.4s; z-index: -28; } .item:nth-child(29) { left: calc(50% - 280px); top: calc(50% - 4368px); animation-delay: 1.45s; z-index: -29; } .item:nth-child(30) { left: calc(50% - 290px); top: calc(50% - 4524px); animation-delay: 1.5s; z-index: -30; } .item:nth-child(1) > div { filter: brightness(1.9) saturate(1.5); } .item:nth-child(2) > div { filter: brightness(1.85) saturate(1.5); } .item:nth-child(3) > div { filter: brightness(1.8) saturate(1.5); } .item:nth-child(4) > div { filter: brightness(1.75) saturate(1.5); } .item:nth-child(5) > div { filter: brightness(1.7) saturate(1.5); } .item:nth-child(6) > div { filter: brightness(1.65) saturate(1.5); } .item:nth-child(7) > div { filter: brightness(1.6) saturate(1.5); } .item:nth-child(8) > div { filter: brightness(1.55) saturate(1.5); } .item:nth-child(9) > div { filter: brightness(1.5) saturate(1.5); } .item:nth-child(10) > div { filter: brightness(1.45) saturate(1.5); } .item:nth-child(11) > div { filter: brightness(1.4) saturate(1.5); } .item:nth-child(12) > div { filter: brightness(1.35) saturate(1.5); } .item:nth-child(13) > div { filter: brightness(1.3) saturate(1.5); } .item:nth-child(14) > div { filter: brightness(1.25) saturate(1.5); } .item:nth-child(15) > div { filter: brightness(1.2) saturate(1.5); } .item:nth-child(16) > div { filter: brightness(1.15) saturate(1.5); } .item:nth-child(17) > div { filter: brightness(1.1) saturate(1.5); } .item:nth-child(18) > div { filter: brightness(1.05) saturate(1.5); } .item:nth-child(19) > div { filter: brightness(1) saturate(1.5); } .item:nth-child(20) > div { filter: brightness(0.95) saturate(1.5); } .item:nth-child(21) > div { filter: brightness(0.9) saturate(1.5); } .item:nth-child(22) > div { filter: brightness(0.85) saturate(1.5); } .item:nth-child(23) > div { filter: brightness(0.8) saturate(1.5); } .item:nth-child(24) > div { filter: brightness(0.75) saturate(1.5); } .item:nth-child(25) > div { filter: brightness(0.7) saturate(1.5); } .item:nth-child(26) > div { filter: brightness(0.65) saturate(1.5); } .item:nth-child(27) > div { filter: brightness(0.6) saturate(1.5); } .item:nth-child(28) > div { filter: brightness(0.55) saturate(1.5); } .item:nth-child(29) > div { filter: brightness(0.5) saturate(1.5); } .item:nth-child(30) > div { filter: brightness(0.45) saturate(1.5); } input#c-multi:checked ~ .container .item:nth-child(1) > div { filter: hue-rotate(0deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(2) > div { filter: hue-rotate(10deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(3) > div { filter: hue-rotate(20deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(4) > div { filter: hue-rotate(30deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(5) > div { filter: hue-rotate(40deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(6) > div { filter: hue-rotate(50deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(7) > div { filter: hue-rotate(60deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(8) > div { filter: hue-rotate(70deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(9) > div { filter: hue-rotate(80deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(10) > div { filter: hue-rotate(90deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(11) > div { filter: hue-rotate(100deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(12) > div { filter: hue-rotate(110deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(13) > div { filter: hue-rotate(120deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(14) > div { filter: hue-rotate(130deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(15) > div { filter: hue-rotate(140deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(16) > div { filter: hue-rotate(150deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(17) > div { filter: hue-rotate(160deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(18) > div { filter: hue-rotate(170deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(19) > div { filter: hue-rotate(180deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(20) > div { filter: hue-rotate(190deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(21) > div { filter: hue-rotate(200deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(22) > div { filter: hue-rotate(210deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(23) > div { filter: hue-rotate(220deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(24) > div { filter: hue-rotate(230deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(25) > div { filter: hue-rotate(240deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(26) > div { filter: hue-rotate(250deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(27) > div { filter: hue-rotate(260deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(28) > div { filter: hue-rotate(270deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(29) > div { filter: hue-rotate(280deg) saturate(1.25) brightness(1.35); } input#c-multi:checked ~ .container .item:nth-child(30) > div { filter: hue-rotate(290deg) saturate(1.25) brightness(1.35); } .shadow { position: absolute; top: calc(50% - 130px); transform-style: preserve-3d; transform: rotateX(-37deg) rotateY(45deg) rotateX(-90deg); left: calc(50% - 150px); z-index: -31; filter: blur(1px); } .shadow div { background: #00000050; width: 150px; height: 15px; animation: item-shadow var(--speed) 0.01s infinite; } input#wide:checked ~ .container .shadow div { animation-name: item-shadow-wide; } .shadow div:nth-child(1) { animation-delay: 0.05s; } .shadow div:nth-child(2) { animation-delay: 0.1s; } .shadow div:nth-child(3) { animation-delay: 0.15s; } .shadow div:nth-child(4) { animation-delay: 0.2s; } .shadow div:nth-child(5) { animation-delay: 0.25s; } .shadow div:nth-child(6) { animation-delay: 0.3s; } .shadow div:nth-child(7) { animation-delay: 0.35s; } .shadow div:nth-child(8) { animation-delay: 0.4s; } .shadow div:nth-child(9) { animation-delay: 0.45s; } .shadow div:nth-child(10) { animation-delay: 0.5s; } .shadow div:nth-child(11) { animation-delay: 0.55s; } .shadow div:nth-child(12) { animation-delay: 0.6s; } .shadow div:nth-child(13) { animation-delay: 0.65s; } .shadow div:nth-child(14) { animation-delay: 0.7s; } .shadow div:nth-child(15) { animation-delay: 0.75s; } .shadow div:nth-child(16) { animation-delay: 0.8s; } .shadow div:nth-child(17) { animation-delay: 0.85s; } .shadow div:nth-child(18) { animation-delay: 0.9s; } .shadow div:nth-child(19) { animation-delay: 0.95s; } .shadow div:nth-child(20) { animation-delay: 1s; } .shadow div:nth-child(21) { animation-delay: 1.05s; } .shadow div:nth-child(22) { animation-delay: 1.1s; } .shadow div:nth-child(23) { animation-delay: 1.15s; } .shadow div:nth-child(24) { animation-delay: 1.2s; } .shadow div:nth-child(25) { animation-delay: 1.25s; } .shadow div:nth-child(26) { animation-delay: 1.3s; } .shadow div:nth-child(27) { animation-delay: 1.35s; } .shadow div:nth-child(28) { animation-delay: 1.4s; } .shadow div:nth-child(29) { animation-delay: 1.45s; } .shadow div:nth-child(30) { animation-delay: 1.5s; } input[type="radio"], input[type="checkbox"] { display: none; } label { background: #607d8b; width: 2em; top: 1em; height: 2em; position: absolute; cursor: pointer; z-index: 1; border-radius: 100%; border: 2px solid rgba(0, 0, 0, 0.15); } input + label { opacity: 0.5; } input:checked + label, label:hover { opacity: 1; } input:checked + label { box-shadow: 0 0 10px 0px #004a6d, 1px 1px 3px 1px #a1bcca inset; } input#wide:checked + label, input#border:checked + label { box-shadow: 0 0 10px 0px #444444, 1px 1px 3px 1px #ffffffb8 inset; } input#c-orange:checked + label { box-shadow: 0 0 10px 0px #ff5500, 1px 1px 3px 1px #ffffffaa inset; } input#c-green:checked + label { box-shadow: 0 0 10px 0px #558e00, 1px 1px 3px 1px #ffffffaa inset; } input#c-blue:checked + label { box-shadow: 0 0 10px 0px #0091e6, 1px 1px 3px 1px #ffffffaa inset; } input#c-purple:checked + label { box-shadow: 0 0 10px 0px #9158ff, 1px 1px 3px 1px #ffffffaa inset; } input#c-pink:checked + label { box-shadow: 0 0 10px 0px #ff3ab3, 1px 1px 3px 1px #ffffffaa inset; } input#c-red:checked + label { box-shadow: 0 0 10px 0px #ff4155, 1px 1px 3px 1px #ffffffaa inset; } label[for="c-orange"] { left: 1em; background: #ff5500; } label[for="c-green"] { left: 4.05em; background: #558e00; } label[for="c-blue"] { left: 7.1em; background: #0091e6; } label[for="c-purple"] { left: 10.15em; background: #9158ff; } label[for="c-pink"] { left: 13.2em; background: #ff3ab3; } label[for="c-red"] { left: 16.275em; background: #ff4155; } label[for="c-multi"] { left: 19.325em; background: linear-gradient( to left, #ff5500 8%, #27dd3e 25%, #36a2ff 55%, #804eff 75%, #ff76c7 100% ); } input#c-orange:checked ~ .container { filter: hue-rotate(0deg); } input#c-green:checked ~ .container { filter: hue-rotate(60deg); } input#c-blue:checked ~ .container { filter: hue-rotate(180deg); } input#c-purple:checked ~ .container { filter: hue-rotate(240deg); } input#c-pink:checked ~ .container { filter: hue-rotate(290deg); } input#c-red:checked ~ .container { filter: hue-rotate(320deg); } label[for="border"] { left: initial; right: 19.4em; } label[for="wide"] { left: initial; right: 16.35em; } input[name="speed"] + label { left: initial; } label[for="s-slower"] { right: 13.25em; } label[for="s-slow"] { right: 10.2em; } label[for="s-medium"] { right: 7.125em; } label[for="s-fast"] { right: 4.075em; } label[for="s-faster"] { right: 1em; } input#wide:checked ~ .container .item, input#wide:checked ~ .container .item > div, input#wide:checked ~ .container .shadow div { width: 250px; } input#s-slower:che.........完整代码请登录后点击上方下载按钮下载查看
网友评论0