css实现三维旋转的寿司动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现三维旋转的寿司动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /***********************/ /***********************/ /***********************/ *, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; transform-style: preserve-3d; user-select: none; -webkit-tap-highlight-color: transparent; appearance: none; } /***********************/ /***********************/ body { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100%; overflow: hidden; cursor: pointer; background-color: #FCE36F; } .face { position: absolute; } .flex { display: flex; justify-content: center; align-items: center; } /***********************/ /***********************/ .c { position: absolute; width: 30vw; height: 30vw; } .shadow { position: absolute; width: 20vw; height: 20vw; border-radius: 50%; background-color: #FFC557; transform: translateY(11vw) rotateX(80deg); animation: shadow 3000ms linear infinite; } .main { position: absolute; width: 30vw; height: 30vw; animation: main 3000ms linear infinite; transform: rotateX(90deg); } .sushi { position: absolute; width: 100%; height: 100%; transform: translateY(-3.5vw) rotateX(-95deg); } .circle { border-radius: 50%; position: absolute; } .circle-a { position: absolute; width: 7vw; height: 20vw; transform: rotateY(90deg) translateX(-50%); display: flex; justify-content: center; align-items: center; position: absolute; } .circle-a__side { position: absolute; height: 1.9444444444vw; width: 7vw; background-color: #070606; } .circle-a__side:nth-of-type(1) { transform: rotateX(10deg) translateZ(10vw); } .circle-a__side:nth-of-type(2) { transform: rotateX(20deg) translateZ(10vw); } .circle-a__side:nth-of-type(3) { transform: rotateX(30deg) translateZ(10vw); } .circle-a__side:nth-of-type(4) { transform: rotateX(40deg) translateZ(10vw); } .circle-a__side:nth-of-type(5) { transform: rotateX(50deg) translateZ(10vw); } .circle-a__side:nth-of-type(6) { transform: rotateX(60deg) translateZ(10vw); } .circle-a__side:nth-of-type(7) { transform: rotateX(70deg) translateZ(10vw); } .circle-a__side:nth-of-type(8) { transform: rotateX(80deg) translateZ(10vw); } .circle-a__side:nth-of-type(9) { transform: rotateX(90deg) translateZ(10vw); } .circle-a__side:nth-of-type(10) { transform: rotateX(100deg) translateZ(10vw); } .circle-a__side:nth-of-type(11) { transform: rotateX(110deg) translateZ(10vw); } .circle-a__side:nth-of-type(12) { transform: rotateX(120deg) translateZ(10vw); } .circle-a__side:nth-of-type(13) { transform: rotateX(130deg) translateZ(10vw); } .circle-a__side:nth-of-type(14) { transform: rotateX(140deg) translateZ(10vw); } .circle-a__side:nth-of-type(15) { transform: rotateX(150deg) translateZ(10vw); } .circle-a__side:nth-of-type(16) { transform: rotateX(160deg) translateZ(10vw); } .circle-a__side:nth-of-type(17) { transform: rotateX(170deg) translateZ(10vw); } .circle-a__side:nth-of-type(18) { transform: rotateX(180deg) translateZ(10vw); } .circle-a__side:nth-of-type(19) { transform: rotateX(190deg) translateZ(10vw); } .circle-a__side:nth-of-type(20) { transform: rotateX(200deg) translateZ(10vw); } .circle-a__side:nth-of-type(21) { transform: rotateX(210deg) translateZ(10vw); } .circle-a__side:nth-of-type(22) { transform: rotateX(220deg) translateZ(10vw); } .circle-a__side:nth-of-type(23) { transform: rotateX(230deg) translateZ(10vw); } .circle-a__side:nth-of-type(24) { transform: rotateX(240deg) translateZ(10vw); } .circle-a__side:nth-of-type(25) { transform: rotateX(250deg) translateZ(10vw); } .circle-a__side:nth-of-type(26) { transform: rotateX(260deg) translateZ(10vw); } .circle-a__side:nth-of-type(27) { transform: rotateX(270deg) translateZ(10vw); } .circle-a__side:nth-of-type(28) { transform: rotateX(280deg) translateZ(10vw); } .circle-a__side:nth-of-type(29) { transform: rotateX(290deg) translateZ(10vw); } .circle-a__side:nth-of-type(30) { transform: rotateX(300deg) translateZ(10vw); } .circle-a__side:nth-of-type(31) { transform: rotateX(310deg) translateZ(10vw); } .circle-a__side:nth-of-type(32) { transform: rotateX(320deg) translateZ(10vw); } .circle-a__side:nth-of-type(33) { transform: rotateX(330deg) translateZ(10vw); } .circle-a__side:nth-of-type(34) { transform: rotateX(340deg) translateZ(10vw); } .circle-a__side:nth-of-type(35) { transform: rotateX(350deg) translateZ(10vw); } .circle-a__side:nth-of-type(36) { transform: rotateX(360deg) translateZ(10vw); } .circle-a__top, .circle-a__bottom { position: absolute; width: 20vw; height: 20vw; border-radius: 50%; transform: rotateY(90deg) translateZ(3.5vw); } .circle-a__bottom { transform: rotateY(90deg) translateZ(-3.5vw); } .circle-a__bottom, .circle-a__top { border: 0.75vw solid #2F2E2A; } .circle-b { position: absolute; width: 7vw; height: 18.5vw; transform: rotateY(90deg) translateX(-50%); display: flex; justify-content: center; align-items: center; position: absolute; } .circle-b__side { position: absolute; height: 1.6701388889vw; width: 7vw; background-color: #070606; } .circle-b__side:nth-of-type(1) { transform: rotateX(10deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(2) { transform: rotateX(20deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(3) { transform: rotateX(30deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(4) { transform: rotateX(40deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(5) { transform: rotateX(50deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(6) { transform: rotateX(60deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(7) { transform: rotateX(70deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(8) { transform: rotateX(80deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(9) { transform: rotateX(90deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(10) { transform: rotateX(100deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(11) { transform: rotateX(110deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(12) { transform: rotateX(120deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(13) { transform: rotateX(130deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(14) { transform: rotateX(140deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(15) { transform: rotateX(150deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(16) { transform: rotateX(160deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(17) { transform: rotateX(170deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(18) { transform: rotateX(180deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(19) { transform: rotateX(190deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(20) { transform: rotateX(200deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(21) { transform: rotateX(210deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(22) { transform: rotateX(220deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(23) { transform: rotateX(230deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(24) { transform: rotateX(240deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(25) { transform: rotateX(250deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(26) { transform: rotateX(260deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(27) { transform: rotateX(270deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(28) { transform: rotateX(280deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(29) { transform: rotateX(290deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(30) { transform: rotateX(300deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(31) { transform: rotateX(310deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(32) { transform: rotateX(320deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(33) { transform: rotateX(330deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(34) { transform: rotateX(340deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(35) { transform: rotateX(350deg) translateZ(9.25vw); } .circle-b__side:nth-of-type(36) { transform: rotateX(360deg) translateZ(9.25vw); } .circle-b__top, .circle-b__bottom { position: abso.........完整代码请登录后点击上方下载按钮下载查看
网友评论0