div+css实现可爱卡通土星摇摆运动动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现可爱卡通土星摇摆运动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body .scene_saturn__ring .layer_part, body .scene_saturn__ring .small_part, body .scene_saturn__ring .small, body .scene_saturn__ring, body .scene_saturn__sparks .spark, body .scene_saturn__sparks, body .scene_saturn__face .face_clip .mouth, body .scene_saturn__face, body .scene_saturn__shadowRing, body .scene_saturn__shadow, body .scene_saturn, body .scene_titan, body .scene_titanShadow, body .scene, body .scene_saturn__face .face_clip .eye, body .scene_titan .eyes .eye { position: absolute; left: 0; right: 0; margin: auto; top: 50%; transform: translateY(-50%); } body .scene_saturn__face .face_clip .eye, body .scene_titan .eyes .eye { width: 6px; height: 6px; background: #53487a; border-radius: 10px; bottom: 34px; -webkit-animation: blink 1s 0s infinite linear; animation: blink 1s 0s infinite linear; } body .scene_saturn__face .face_clip .eye--left.eye, body .scene_titan .eyes .eye--left.eye { left: -80px; } body .scene_saturn__face .face_clip .eye--right.eye, body .scene_titan .eyes .eye--right.eye { left: 80px; } body { background: #38216b; } body .scene { perspective: 2600px; width: 500px; height: 500px; } body .scene_titanShadow { width: 84px; height: 21px; border-radius: 100%; transform-style: preserve-3d; box-shadow: 0px 200px 20px #291863; -webkit-animation: titan 6s infinite ease; animation: titan 6s infinite ease; bottom: 400px; } body .scene .t_wrap { -webkit-animation: titanWrap 6s infinite ease; animation: titanWrap 6s infinite ease; } body .scene_titan { width: 84px; height: 84px; border-radius: 42px; background: #a5c6ff; transform-style: preserve-3d; box-shadow: 0px 0px 0px 4px rgba(169, 187, 236, 0.3882352941) inset, -30px -20px 50px #637bff inset; -webkit-animation: titan 6s infinite ease; animation: titan 6s infinite ease; top: -220px; } body .scene_titan .eyes { -webkit-animation: titan_eye 6s infinite ease; animation: titan_eye 6s infinite ease; } body .scene_titan .eyes .eye.eye--left { left: -34px; bottom: -120px; } body .scene_titan .eyes .eye.eye--right { left: 34px; bottom: -120px; } body .scene_saturn { width: 152px; height: 152px; border-radius: 76px; background: white; transform-style: preserve-3d; box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.3294117647) inset, -30px -20px 50px #a5adff inset; -webkit-animation: saturn 0.6s infinite linear; animation: saturn 0.6s infinite linear; } body .scene_saturn__shadow { width: 152px; height: 38px; border-radius: 100%; box-shadow: 0 150px 40px #291863; } body .scene_saturn__shadowRing { width: 330px; height: 19px; border-radius: 100%; box-shadow: 0 150px 40px #291863; left: -100px; -webkit-animation: ringShadow 0.6s infinite linear; animation: ringShadow 0.6s infinite linear; } body .scene_saturn__face { width: 152px; height: 152px; border-radius: 76px; overflow: hidden; } body .scene_saturn__face .face_clip { position: relative; top: 95px; left: 14px; transform: rotate(8deg); -webkit-animation: face 3.6s infinite linear, faceTilt 0.9s infinite linear; animation: face 3.6s infinite linear, faceTilt 0.9s infinite linear; } body .scene_saturn__face .face_clip .mouth { width: 15px; height: 10px; top: -5px; background: #ea0e61; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; box-shadow: 0 6px 0px #53487a inset; } body .scene_saturn__sparks { transform: translateZ(-100px); } body .scene_saturn__sparks .spark { width: 20px; height: 20px; border-radius: 10px; background: #00f7ff; } body .scene_saturn__sparks .spark:nth-of-type(odd) { background: white; } @-webkit-keyframes spark--1 { from { transform: scale(1); } to { left: 180px; top: 47px; transform: scale(0); } } @keyframes spark--1 { from { transform: scale(1); } to { left: 180px; top: 47px; transform: scale(0); } } body .scene_saturn__sparks .spark:nth-of-type(1) { -webkit-animation: spark--1 1s 0.1s infinite; animation: spark--1 1s 0.1s infinite; } @-webkit-keyframes spark--2 { from { transform: scale(1); } to { left: -83px; top: 156px; transform: scale(0); } } @keyframes spark--2 { from { transform: scale(1); } to { left: -83px; top: 156px; transform: scale(0); } } body .scene_saturn__sparks .spark:nth-of-type(2) { -webkit-animation: spark--2 1s 0.2s infinite; animation: spark--2 1s 0.2s infinite; } @-webkit-keyframes spark--3 { from { transform: scale(1); } to { left: -175px; top: 137px; transform: scale(0); } } @keyframes spark--3 { from { transform: scale(1); } to { left: -175px; top: 137px; transform: scale(0); } } body .scene_saturn__sparks .spark:nth-of-type(3) { -webkit-animation: spark--3 1s 0.3s infinite; animation: spark--3 1s 0.3s infinite; } @-webkit-keyframes spark--4 { from { transform: scale(1); } to { left: -21px; top: 101px; transform: scale(0); } } @keyframes spark--4 { from { transform: scale(1); } to { left: -21px; top: 101px; transform: scale(0); } } body .scene_saturn__sparks .spark:nth-of-type(4) { -webkit-animation: spark--4 1s 0.4s infinite; animation: spark--4 1s 0.4s infinite; } @-webkit-keyframes spark--5 { from { transform: scale(1); } to { left: -93px; top: -173px; transform: scale(0); } } @keyframes spark--5 { from { transform: scale(1); } to { left: -93px; top: -173px; transform: scale(0); } } body .scene_saturn__sparks .spark:nth-of-type(5) { -webkit-animation: spark--5 1s 0.5s infinite; animation: spark--5 1s 0.5s infinite; } @-webkit-keyframes spark--6 { from { transform: scale(1); } to { left: -36px; top: 57px; transform: scale(0); } } @keyframes spark--6 { from { transform: scale(1); } to { left: -36px; top: 57px; transform: scale(0); } } body .scene_saturn__sparks .spark:nth-of-type(6) { -webkit-animation: spark--6 1s 0.6s infinite; animation: spark--6 1s 0.6s infinite; } @-webkit-keyframes spark--7 { from { transform: scale(1); } to { left: 175px; top: 15px; transform: scale(0); } } @keyframes spark--7 { from { transform: scale(1); } to { left: 175px; top: 15px; transform: scale(0); } } body .scene_saturn__sparks .spark:nth-of-type(7) { -webkit-animation: spark--7 1s 0.7s infinite; animation: spark--7 1s 0.7s infinite; } @-webkit-keyframes spark--8 { from { transform: scale(1); } to { left: 16px; top: 55px; transform: scale(0); } } @keyframes spark--8 { from { transform: scale(1); } to { left: 16px; top: 55px; transform: scale(0); } } body .scene_saturn__sparks .spark:nth-of-type(8) { -webkit-animation: spark--8 1s 0.8s infinite; animation: spark--8 1s 0.8s infinite; } @-webkit-keyframes spark--9 { from { transform: scale(1); } to { left: -99px; top: 72px; transform: scale(0); } } @keyframes spark--9 { from { transform: scale(1); } to { left: -99px; top: 72px; transform: scale(0); } } body .scene_saturn__sparks .spark:nth-of-type(9) { -webkit-animation: spark--9 1s 0.9s infinite; animation: spark--9 1s 0.9s infinite; } @-webkit-keyframes spark--10 { from { transform: scale(1); } to { left: -153px; top: 17px; transform: scale(0); } } @keyframes spark--10 { from { transform: scale(1); } to { left: -153px; top: 17px; transform: scale(0); } } body .scene_saturn__sparks .spark:nth-of-type(10) { -webkit-animation: spark--10 1s 1s infinite; animation: spark--10 1s 1s infinite; } @-webkit-keyframes spark--11 { from { transform: scale(1); } to { left: 177px; top: 61px; transform: scale(0); } } @keyframes spark--11 { from { transform: scale(1); } to { left: 177px; top: 61px; transform: scale(0); } } body .scene_saturn__sparks .spark:nth-of-type(11) { -webkit-animation: spark--11 1s 1.1s infinite; animation: spark--11 1s 1.1s infinite; } @-webkit-keyframes spark--12 { from { transform: scale(1); } to { left: 30px; top: 27px; transform: scale(0); } } @keyframes spark--12 { from { transform: scale(1); } to { left: 30px; top: 27px; transform: scale(0); } } body .scene_saturn__sparks .spark:nth-of-type(12) { -webkit-animation: spark--12 1s 1.2s infinite; animation: spark--12 1s 1.2s infinite; } @-webkit-keyframes spark--13 { from { transform: scale(1); } to { left: -97px; top: -116px; transform: scale(0); } } @keyframes spark--13 { from { transform: scale(1); } to { left: -97px; top: -116px; transform: scale(0); } } body .scene_saturn__sparks .spark:nth-of-type(13) { -webkit-animation: spark--13 1s 1.3s infinite; animation: spark--13 1s 1.3s infinite; } @-webkit-keyframes spark--14 { from { transform: scale(1); } to { left: 11px; top: 42px; transform: scale(0); } } @keyframes spark--14 { from { transform: scale(1); } to { left: 11px; top: 42px; transform: scale(0); } } body .scene_saturn__sparks .spark:nth-of-type(14) { -webkit-animation: spark--14 1s 1.4s infinite; animation: spark--14 1s 1.4s infinite; } @-webkit-keyframes spark--15 { from { transform: scale(1); } to { left: 119px; top: -50px; transform: scale(0); } } @keyframes spark--15 { from { transform: scale(1); } to { left: 119px; top: -50px; transform: scale(0); } } body .scene_saturn__sparks .spark:nth-of-type(15) { -webkit-animation: spark--15 1s 1.5s infinite; animation: spark--15 1s 1.5s infinite; } @-webkit-keyframes spark--16 { from { transform: scale(1); } to { left: 148px; top: 131px; transform: scale(0); } } @keyframes spark--16 { from { transform: scale(1); } to { left: 148px; top: 131px; transform: scale(0); } } body .scene_saturn__sparks .spark:nth-of-type(16) { -webkit-animation: spark--16 1s 1.6s infinite; animation: spark--16 1s 1.6s infinite; } @-webkit-keyframes spark--17 { from { transform: scale(1); } to { left: -14px; top: 139px; transform: scale(0); } } @keyframes spark--17 { from { transform: scale(1); } to { left: -14px; top: 139px; transform: scale(0); } } body .scene_saturn__sparks .spark:nth-of-type(17) { -webkit-animation: spark--17 1s 1.7s infinite; animation: spark--17 1s 1.7s infinite; } @-webkit-keyframes spark--18 { from { transform: scale(1); } to { left: -111px; top: -87px; transform: scale(0); } } @keyframes spark--18 { from { transform: scale(1); } to { left: -111px; top: -87px; transform: scale(0); } } body .scene_saturn__sparks .spark:nth-of-type(18) { -webkit-animation: spark--18 1s 1.8s infinite; animation: spark--18 1s 1.8s infinite; } @-webkit-keyframes spark--19 { from { transform: scale(1); } to { left: -153px; top: 95px; transform: scale(0); } } @keyframes spark--19 { from { transform: scale(1); } to { left: -153px; top: 95px; transform: scale(0); } } body .scene_saturn__sparks .spark:nth-of-type(19) { -webkit-animation: spark--19 1s 1.9s infinite; animation: spark--19 1s 1.9s infinite; } @-webkit-keyframes spark--20 { from { transform: scale(1); } to { left: 168px; top: -37px; transform: scale(0); } } @keyframes spark--20 { from { transform: scale(1); } to { left: 168px; top: -37px; transform: scale(0); } } body .scene_saturn__sparks .spark:nth-of-type(20) { -webkit-animation: spark--20 1s 2s infinite; animation: spark--20 1s 2s infinite; } body .scene_saturn__ring { transform: rotateX(84deg) rotateY(8deg); transform-origin: 50% 165px; -webkit-animation: ring 0.6s infinite linear; animation: ring 0.6s infinite linear; top: -80px; } body .scene_saturn__ring .small { -webkit-animation: spin 0.6s infinite linear; animation: spin 0.6s infinite linear; transform-origin: 50% 195px; top: -50px; } body .scene_saturn__ring .small_part { width: 30px; background: #08f7ff; transform-origin: 50% 195px; } body .scene_saturn__ring .small_part:nth-of-type(1) { transform: rotate(2deg); height: 9.75px; } body .scene_saturn__ring .small_part:nth-of-type(2) { transform: rotate(4deg); height: 9.5px; } body .scene_saturn__ring .small_part:nth-of-type(3) { transform: rotate(6deg); height: 9.25px; } body .scene_saturn__ring .small_part:nth-of-type(4) { transform: rotate(8deg); height: 9px; } body .scene_saturn__ring .small_part:nth-of-type(5) { transform: rotate(10deg); height: 8.75px; } body .scene_saturn__ring .small_part:nth-of-type(6) { transform: rotate(12deg); height: 8.5px; } body .scene_saturn__ring .small_part:nth-of-type(7) { transform: rotate(14deg); height: 8.25px; } body .scene_saturn__ring .small_part:nth-of-type(8) { transform: rotate(16deg); height: 8px; } body .scene_saturn__ring .small_part:nth-of-type(9) { transform: rotate(18deg); height: 7.75px; } body .scene_saturn__ring .small_part:nth-of-type(10) { transform: rotate(20deg); height: 7.5px; } body .scene_saturn__ring .small_part:nth-of-type(11) { transform: rotate(22deg); height: 7.25px; } body .scene_saturn__ring .small_part:nth-of-type(12) { transform: rotate(24deg); height: 7px; } body .scene_saturn__ring .small_part:nth-of-type(13) { transform: rotate(26deg); height: 6.75px; } body .scene_saturn__ring .small_part:nth-of-type(14) { transform: rotate(28deg); height: 6.5px; } body .scene_saturn__ring .small_part:nth-of-type(15) { transform: rotate(30deg); height: 6.25px; } body .scene_saturn__ring .small_part:nth-of-type(16) { transform: rotate(32deg); height: 6px; } body .scene_saturn__ring .small_part:nth-of-type(17) { transform: rotate(34deg); height: 5.75px; } body .scene_saturn__ring .small_part:nth-of-type(18) { transform: rotate(36deg); height: 5.5px; } body .scene_saturn__ring .small_part:nth-of-type(19) { transform: rotate(38deg); height: 5.25px; } body .scene_saturn__ring .small_part:nth-of-type(20) { transform: rotate(40deg); height: 5px; } body .scene_saturn__ring .small_part:nth-of-type(21) { transform: rotate(42deg); height: 4.75px; } body .scene_saturn__ring .small_part:nth-of-type(22) { transform: rotate(44deg); height: 4.5px; } body .scene_saturn__ring .small_part:nth-of-type(23) { transform: rotate(46deg); height: 4.25px; } body .scene_saturn__ring .small_part:nth-of-type(24) { transform: rotate(48deg); height: 4px; } body .scene_saturn__ring .small_part:nth-of-type(25) { transform: rotate(50deg); height: 3.75px; } body .scene_saturn__ring .small_part:nth-of-type(26) { transform: rotate(52deg); height: 3.5px; } body .scene_saturn__ring .small_part:nth-of-type(27) { transform: rotate(54deg); height: 3.25px; } body .scene_saturn__ring .small_part:nth-of-type(28) { transform: rotate(56deg); height: 3px; } body .scene_saturn__ring .small_part:nth-of-type(29) { transform: rotate(58deg); height: 2.75px; } body .scene_saturn__ring .small_part:nth-of-type(30) { transform: rotate(60deg); height: 2.5px; } body .scene_saturn__ring .small_part:nth-of-type(31) { transform: rotate(62deg); height: 2.25px; } body .scene_saturn__ring .small_part:nth-of-type(32) { transform: rotate(64deg); height: 2px; } body .scene_saturn__ring .small_part:nth-of-type(33) { transform: rotate(66deg); height: 1.75px; } body .scene_saturn__ring .small_part:nth-of-type(34) { transform: rotate(68deg); height: 1.5px; } body .scene_saturn__ring .small_part:nth-of-type(35) { transform: rotate(70deg); height: 1.25px; } body .scene_saturn__ring .small_part:nth-of-type(36) { transform: rotate(72deg); height: 1px; } body .scene_saturn__ring .small_part:nth-of-type(37) { transform: rotate(74deg); height: 0.75px; } body .scene_saturn__ring .small_part:nth-of-type(38) { transform: rotate(76deg); height: 0.5px; } body .scene_saturn__ring .small_part:nth-of-type(39) { transform: rotate(78deg); height: 0.25px; } body .scene_saturn__ring .small_part:nth-of-type(40) { transform: rotate(80deg); height: 0px; } body .scene_saturn__ring .layer { position: relative; } body .scene_saturn__ring .layer:nth-of-type(1) .layer_part { background: #08ffff; } body .scene_saturn__ring .layer:nth-of-type(2) .layer_part { background: #08ffff; } body .scene_saturn__ring .layer:nth-of-type(2) { top: 6px; } body .scene_saturn__ring .layer:nth-of-type(3) { top: -6px; } body .scene_saturn__ring .layer:nth-of-type(4) { top: -18px; } body .scene_saturn__ring .layer_part { width: 20px; height: 50px; background: #21ced2; transform-origin: 50% 165px; } body .scene_saturn__ring .layer_part:nth-of-type(1) { transform: translateY(-50%) rotate(7.2deg); } body .scene_saturn__ring .layer_part:nth-of-type(2) { transform: translateY(-50%) rotate(14.4deg); } body .scene_saturn__ring .layer_part:nth-of-type(3) { transform: translateY(-50%) rotate(21.6deg); } body .scene_saturn__ring .layer_part:nth-of-type(4) { transform: translateY(-50%) rotate(28.8deg); } body .scene_saturn__ring .layer_part:nth-of-type(5) { transform: translateY(-50%) rotate(36deg); } body .scene_saturn__ring .layer_part:nth-of-type(6) { transform: translateY(-50%) rotate(43.2deg); } body .scene_saturn__ring .layer_part:nth-of-type(7) { transform: translateY(-50%) rotate(50.4deg); } body .scene_saturn__ring .layer_part:nth-of-type(8) { transform: translateY(-50%) rotate(57.6deg); } body .scene_saturn__ring .layer_part:nth-of-type(9) { transform: translateY(-50%) rotate(64.8deg); } body .scene_saturn__ring .layer_part:nth-of-type(10) { transform: translateY(-50%) rotate(72deg); } body .scene_saturn__ring .layer_part:nth-of-type(11) { transform: translateY(-50%) rotate(79.2deg); } body .scene_saturn__ring .layer_part:nth-of-type(12) { transform: translateY(-50%) rotate(86.4deg); } body .scene_saturn__ring .layer_part:nth-of-type(13) { transform: translateY(-50%) rotate(93.6deg); } body .scene_saturn__ring .layer_part:nth-of-type(14) { transform: translateY(-50%) rotate(100.8deg); } body .scene_saturn__ring .layer_part:nth-of-type(15) { transform: translateY(-50%) rotate(108deg); } body .scene_saturn__ring .layer_part:nth-of-type(16) { transform: translateY(-50%) rotate(115.2deg); } body .scene_saturn__ring .layer_part:nth-of-type(17) { transform: translateY(-50%) rotate(122.4deg); } body .scene_saturn__ring .layer_part:nth-of-type(18) { transform: translateY(-50%) rotate(129.6deg); } body .scene_saturn__ring .layer_part:nth-of-type(19) { transform: translateY(-50%) rotate(136.8deg); } body .scene_saturn__ring .layer_part:nth-of-type(20) { transform: translateY(-50%) rotate(144deg); } body .scene_saturn__ring .layer_part:nth-of-type(21) { transform: translateY(-50%) rotate(151.2deg); } body .scene_saturn__ring .layer_part:nth-of-type(22) { transform: translateY(-50%) rotate(158.4deg); } body .scene_saturn__ring .layer_part:nth-of-type(23) { transform: translateY(-50%) rotate(165.6deg); } body .scene_saturn__ring .layer_part:nth-of-type(24) { transform: translateY(-50%) rotate(172.8deg); } body .scene_saturn__ring .layer_part:nth-of-type(25) { transform: translateY(-50%) rotate(180deg); } body .scene_saturn__ring .layer_part:nth-of-type(26) { transform: translateY(-50%) rotate(187.2deg); } body .scene_saturn__ring .layer_part:nth-of-type(27) { transform: translateY(-50%) rotate(194.4deg); } body .scene_saturn__ring .layer_part:nth-of-type(28) { transform: translateY(-50%) rotate(201.6deg); } body .scene_saturn__ring .layer_part:nth-of-type(29) { transform: translateY(-50%) rotate(208.8deg); } body .scene_saturn__ring .layer_part:nth-of-type(30) { transform: translateY(-50%) rotate(216deg); } body .scene_saturn__ring .layer_part:nth-of-type(31) { transform: translateY(-50%) rotate(223.2deg); } body .scene_saturn__ring .layer_part:nth-of-type(32) { transform: translateY(-50%) rotate(230.4deg); } body .scene_saturn__ring .layer_part:nth-of-type(33) { transform: translateY(-50%) rotate(237.6deg); } body .scene_saturn__ring .layer_part:nth-of-type(34) { transform: translateY(-50%) rotate(244.8deg); } body .scene_saturn__ring .layer_part:nth-of-type(35) { transform: translateY(-50%) rotate(252deg); } body .scene_saturn__ring .layer_part:nth-of-type(36) { transform: translateY(-50%) rotate(259.2deg); } body .scene_saturn__ring .layer_part:nth-of-type(37) { transform: translateY(-50%) rotate(266.4deg); } body .scene_saturn__ring .layer_part:nth-of-type(38) { transform: translateY(-50%) rotate(273.6deg); } body .scene_saturn__ring .layer_part:nth-of-type(39) { transform: translateY(-50%) rotate(280.8deg); } body .scene_saturn__ring .layer_part:nth-of-type(40) { transform: translateY(-50%) rotate(288deg); } body .scene_saturn__ring .layer_part:nth-of-type(41) { transform: translateY(-50%) rotate(295.2deg); } body .scene_saturn__ring .layer_part:nth-of-type(42) { transform: translateY(-50%) rotate(302.4deg); } body .scene_saturn__ring .layer_part:nth-of-type(43) { transform: translateY(-50%) rotate(309.6deg); } body .scene_saturn__ring .layer_part:nth-of-type(44) .........完整代码请登录后点击上方下载按钮下载查看
网友评论0