div+css实现三维立体彩色冰淇淋旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现三维立体彩色冰淇淋旋转动画效果代码
代码标签: div css 三维 立体 彩色 冰淇淋 旋转 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } body { background-color: #000; color: #fff; min-height: 100vh; display: grid; place-items: center; perspective: 1000px; overflow: hidden; } body * { transform-style: preserve-3d; } .scene { position: relative; -webkit-animation: sceneY 8s infinite ease-in-out alternate, rotate 50s infinite linear; animation: sceneY 8s infinite ease-in-out alternate, rotate 50s infinite linear; } @-webkit-keyframes sceneY { from { transform: rotateY(60deg); } to { transform: rotateY(-60deg); } } @keyframes sceneY { from { transform: rotateY(60deg); } to { transform: rotateY(-60deg); } } @-webkit-keyframes rotate { to { rotate: 1turn; } } @keyframes rotate { to { rotate: 1turn; } } .shape { position: absolute; -webkit-animation: rotate 15s infinite linear; animation: rotate 15s infinite linear; } .shape i { position: absolute; inset: -128px; border-radius: 50%; background-image: radial-gradient(closest-side, #0003, #0000), radial-gradient(circle at 192px 128px, #ef8f8f 32px, transparent 0), radial-gradient(circle at 173.2548339959px 173.2548339959px, #efd78f 32px, transparent 0), radial-gradient(circle at 128px 192px, #bfef8f 32px, transparent 0), radial-gradient(circle at 82.7451660041px 173.2548339959px, #8fefa7 32px, transparent 0), radial-gradient(circle at 64px 128px, #8fefef 32px, transparent 0), radial-gradient(circle at 82.7451660041px 82.7451660041px, #8fa7ef 32px, transparent 0), radial-gradient(circle at 128px 64px, #bf8fef 32px, transparent 0), radial-gradient(circle at 173.2548339959px 82.7451660041px, #ef8fd7 32px, transparent 0); transform: translateZ(var(--tz)) rotate(var(--angle)) scale(var(--scale)); } .shape i:nth-child(1) { --tz: -144px; --angle: 0deg; --scale: 0.01; } .shape i:nth-child(2) { --tz: -142.5px; --angle: 0.5deg; --scale: 0.0263617316; } .shape i:nth-child(3) { --tz: -141px; --angle: 1deg; --scale: 0.0427190828; } .shape i:nth-child(4) { --tz: -139.5px; --angle: 1.5deg; --scale: 0.0590676743; } .shape i:nth-child(5) { --tz: -138px; --angle: 2deg; --scale: 0.0754031292; } .shape i:nth-child(6) { --tz: -136.5px; --angle: 2.5deg; --scale: 0.0917210741; } .shape i:nth-child(7) { --tz: -135px; --angle: 3deg; --scale: 0.1080171403; } .shape i:nth-child(8) { --tz: -133.5px; --angle: 3.5deg; --scale: 0.124286965; } .shape i:nth-child(9) { --tz: -132px; --angle: 4deg; --scale: 0.1405261922; } .shape i:nth-child(10) { --tz: -130.5px; --angle: 4.5deg; --scale: 0.1567304745; } .shape i:nth-child(11) { --tz: -129px; --angle: 5deg; --scale: 0.1728954734; } .shape i:nth-child(12) { --tz: -127.5px; --angle: 5.5deg; --scale: 0.1890168613; } .shape i:nth-child(13) { --tz: -126px; --angle: 6deg; --scale: 0.205090322; } .shape i:nth-child(14) { --tz: -124.5px; --angle: 6.5deg; --scale: 0.2211115524; } .shape i:nth-child(15) { --tz: -123px; --angle: 7deg; --scale: 0.237076263; } .shape i:nth-child(16) { --tz: -121.5px; --angle: 7.5deg; --scale: 0.2529801799; } .shape i:nth-child(17) { --tz: -120px; --angle: 8deg; --scale: 0.2688190451; } .shape i:nth-child(18) { --tz: -118.5px; --angle: 8.5deg; --scale: 0.2845886182; } .shape i:nth-child(19) { --tz: -117px; --angle: 9deg; --scale: 0.3002846773; } .shape i:nth-child(20) { --tz: -115.5px; --angle: 9.5deg; --scale: 0.3159030201; } .shape i:nth-child(21) { --tz: -114px; --angle: 10deg; --scale: 0.3314394653; } .shape i:nth-child(22) { --tz: -112.5px; --angle: 10.5deg; --scale: 0.3468898534; } .shape i:nth-child(23) { --tz: -111px; --angle: 11deg; --scale: 0.3622500479; } .shape i:nth-child(24) { --tz: -109.5px; --angle: 11.5deg; --scale: 0.3775159366; } .shape i:nth-child(25) { --tz: -108px; --angle: 12deg; --scale: 0.3926834324; } .shape i:nth-child(26) { --tz: -106.5px; --angle: 12.5deg; --scale: 0.4077484745; } .shape i:nth-child(27) { --tz: -105px; --angle: 13deg; --scale: 0.4227070298; } .shape i:nth-child(28) { --tz: -103.5px; --angle: 13.5deg; --scale: 0.4375550934; } .shape i:nth-child(29) { --tz: -102px; --angle: 14deg; --scale: 0.4522886902; } .shape i:nth-child(30) { --tz: -100.5px; --angle: 14.5deg; --scale: 0.4669038756; } .shape i:nth-child(31) { --tz: -99px; --angle: 15deg; --scale: 0.4813967368; } .shape i:nth-child(32) { --tz: -97.5px; --angle: 15.5deg; --scale: 0.4957633937; } .shape i:nth-child(33) { --tz: -96px; --angle: 16deg; --scale: 0.51; } .shape i:nth-child(34) { --tz: -94.5px; --angle: 16.5deg; --scale: 0.5241027442; } .shape i:nth-child(35) { --tz: -93px; --angle: 17deg; --scale: 0.5380678507; } .shape i:nth-child(36) { --tz: -91.5px; --angle: 17.5deg; --scale: 0.5518915806; } .shape i:nth-child(37) { --tz: -90px; --angle: 18deg; --scale: 0.565570233; } .shape i:nth-child(38) { --tz: -88.5px; --angle: 18.5deg; --scale: 0.5791001459; } .shape i:nth-child(39) { --tz: -87px; --angle: 19deg; --scale: 0.5924776969; } .shape i:nth-child(40) { --tz: -85.5px; --angle: 19.5deg; --scale: 0.6056993045; } .shape i:nth-child(41) { --tz: -84px; --angle: 20deg; --scale: 0.618761429; } .shape i:nth-child(42) { --tz: -82.5px; --angle: 20.5deg; --scale: 0.6316605734; } .shape i:nth-child(43) { --tz: -81px; --angle: 21deg; --scale: 0.6443932842; } .shape i:nth-child(44) { --tz: -79.5px; --angle: 21.5deg; --scale: 0.6569561525; } .shape i:nth-child(45) { --tz: -78px; --angle: 22deg; --scale: 0.6693458151; } .shape i:nth-child(46) { --tz: -76.5px; --angle: 22.5deg; --scale: 0.6815589548; } .shape i:nth-child(47) { --tz: -75px; --angle: 23deg; --scale: 0.693592302; } .shape i:nth-child(48) { --tz: -73.5px; --angle: 23.5deg; --scale: 0.705442635; } .shape i:nth-child(49) { --tz: -72px; --angle: 24deg; --scale: 0.7171067812; } .shape i:nth-child(50) { --tz: -70.5px; --angle: 24.5deg; --scale: 0.7285816178; } .shape i:nth-child(51) { --tz: -69px; --angle: 25deg; --scale: 0.7398640727; } .shape i:nth-child(52) { --tz: -67.5px; --angle: 25.5deg; --scale: 0.7509511254; } .shape i:nth-child(53) { --tz: -66px; --angle: 26deg; --scale: 0.7618398075; } .shape i:nth-child(54) { --tz: -64.5px; --angle: 26.5deg; --scale: 0.7725272039; } .shape i:nth-child(55) { --tz: -63px; --angle: 27deg; --scale: 0.7830104534; } .shape i:nth-child(56) { --tz: -61.5px; --angle: 27.5deg; --scale: 0.7932867492; } .shape i:nth-child(57) { --tz: -60px; --angle: 28deg; --scale: 0.8033533403; } .shape i:nth-child(58) { --tz: -58.5px; --angle: 28.5deg; --scale: 0.8132075315; } .shape i:nth-child(59) { --tz: -57px; --angle: 29deg; --scale: 0.8228466846; } .shape i:nth-child(60) { --tz: -55.5px; --angle: 29.5deg; --scale: 0.832268219; } .shape i:nth-child(61) { --tz: -54px; --angle: 30deg; --scale: 0.8414696123; } .shape i:nth-child(62) { --tz: -52.5px; --angle: 30.5deg; --scale: 0.8504484011; } .shape i:nth-child(63) { --tz: -51px; --angle: 31deg; --scale: 0.8592021815; } .shape i:nth-child(64) { --tz: -49.5px; --angle: 31.5deg; --scale: 0.86772861; } .shape i:nth-child(65) { --tz: -48px; --angle: 32deg; --scale: 0.8760254038; } .shape i:nth-child(66) { --tz: -46.5px; --angle: 32.5deg; --scale: 0.8840903416; } .shape i:nth-child(67) { --tz: -45px; --angle: 33deg; --scale: 0.8919212643; } .shape i:nth-child(68) { --tz: -43.5px; --angle: 33.5deg; --scale: 0.8995160754; } .shape i:nth-child(69) { --tz: -42px; --angle: 34deg; --scale: 0.9068727415; } .shape i:nth-child(70) { --tz: -40.5px; --angle: 34.5deg; --scale: 0.9139892931; } .shape i:nth-child(71) { --tz: -39px; --angle: 35deg; --scale: 0.9208638249; } .shape i:nth-child(72) { --tz: -37.5px; --angle: 35.5deg; --scale: 0.9274944964; } .shape i:nth-child(73) { --tz: -36px; --angle: 36deg; --scale: 0.9338795325; } .shape i:nth-child(74) { --tz: -34.5px; --angle: 36.5deg; --scale: 0.9400172237; } .shape i:nth-child(75) { --tz: -33px; --angle: 37deg; --scale: 0.9459059268; } .shape i:nth-child(76) { --tz: -31.5px; --angle: 37.5deg; --scale: 0.9515440652; } .shape i:nth-child(77) { --tz: -30px; --angle: 38deg; --scale: 0.9569301295; } .shape i:nth-child(78) { --tz: -28.5px; --angle: 38.5deg; --scale: 0.9620626777; } .shape i:nth-child(79) { --tz: -27px; --angle: 39deg; --scale: 0.9669403357; } .shape i:nth-child(80) { --tz: -25.5px; --angle: 39.5deg; --scale: 0.9715617977; } .shape i:nth-child(81) { --tz: -24px; --angle: 40deg; --scale: 0.9759258263; } .shape i:nth-child(82) { --tz: -22.5px; --angle: 40.5deg; --scale: 0.9800312532; } .shape i:nth-child(83) { --tz: -21px; --angle: 41deg; --scale: 0.9838769793; } .shape i:nth-child(84) { --tz: -19.5px; --angle: 41.5deg; --scale: 0.9874619749; } .shape i:nth-child(85) { --tz: -18px; --angle: 42deg; --scale: 0.9907852804; } .shape i:nth-child(86) { --tz: -16.5px; --angle: 42.5deg; --scale: 0.9938460059; } .shape i:nth-child(87) { --tz: -15px; --angle: 43deg; --scale: 0.9966433321; } .shape i:nth-child(88) { --tz: -13.5px; --angle: 43.5deg; --scale: 0.99917651; } .shape i:nth-child(89) { --tz: -12px; --angle: 44deg; --scale: 1.0014448614; } .shape i:nth-child(90) { --tz: -10.5px; --angle: 44.5deg; --scale: 1.003447779; } .shape i:nth-child(91) { --tz: -9px; --angle: 45deg; --scale: 1.0051847267; } .shape i:nth-child(92) { --tz: -7.5px; --angle: 45.5deg; --scale: 1.0066552393; } .shape i:nth-child(93) { --tz: -6px; --angle: 46deg; --scale: 1.0078589232; } .shape i:nth-child(94) { --tz: -4.5px; --angle: 46.5deg; --scale: 1.0087954562; } .shape i:nth-child(95) { --tz: -3px; --angle: 47deg; --scale: 1.0094645875; } .shape i:nth-child(96) { --tz: -1.5px; --angle: 47.5deg; --scale: 1.0098661379; } .shape i:nth-child(97) { --tz: 0px; --angle: 48deg; --scale: 1.01; } .shape i:nth-child(98) { --tz: 1.5px; --angle: 48.5deg; --scale: 1.0098661379; } .shape i:nth-child(99) { --tz: 3px; --angle: 49deg; --scale: 1.0094645875; } .shape i:nth-child(100) { --tz: 4.5px; --angle: 49.5deg; --scale: 1.0087954562; } .shape i:nth-child(101) { --tz: 6px; --angle: 50deg; --scale: 1.0078589232; } .shape i:nth-child(102) { --tz: 7.5px; --angle: 50.5deg; --scale: 1.0066552393; } .shape i:nth-child(103) { --tz: 9px; --angle: 51deg; --scale: 1.0051847267; } .shape i:nth-child(104) { --tz: 10.5px; --angle: 51.5deg; --scale: 1.003447779; } .shape i:nth-child(105) { --tz: 12px; --angle: 52deg; --scale: 1.0014448614; } .shape i:nth-child(106) { --tz: 13.5px; --angle: 52.5deg; --scale: 0.99917651; } .shape i:nth-child(107) { --tz: 15px; --angle: 53deg; --scale: 0.9966433321; } .shape i:nth-child(108) { --tz: 16.5px; --angle: 53.5deg; --scale: 0.9938460059; } .shape i:nth-child(109) { --tz: 18px; --angle: 54deg; --scale: 0.9907852804; } .shape i:nth-child(110) { --tz: 19.5px; --angle: 54.5deg; --scale: 0.9874619749; } .shape i:nth-child(111) { --tz: 21px; --angle: 55deg; --scale: 0.9838769793; } .shape i:nth-child(112) { --tz: 22.5px; --angle: 55.5deg; --scale: 0.9800312532; } .shape i:nth-child(113) { --tz: 24px; --angle: 56deg; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0