svg实现骷颅鬼魂动画效果代码
代码语言:html
所属分类:布局界面
代码描述:svg实现骷颅鬼魂动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body, html { height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; background-color: #2b1f47; } svg { height: 50vh; max-height: 100vh; } #skull{ animation-name: bobbin; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; transform-origin: center; transform-box: fill-box; } #ghost1, #ghost2, #ghost3{ animation-name: opacity; animation-duration: 3s; animation-timing-function: ease-out; animation-iteration-count: infinite; animation-direction: alternate; transform-origin: center; transform-box: fill-box; } #ghost2 { animation-delay: 0.25s; } #ghost3 { animation-delay: 0.5s; } @keyframes bobbin{ 0%, 100%{ transform:translateY(0px); } 50%{ transform:translateY(10px); } } @keyframes opacity{ 0%, 75%{ opacity:0; transform:translateY(15px); } 90%, 100%{ opacity:1; transform:translateY(-15px); } } </style> </head> <body > <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 1080"> <g id="background"> <circle fill="#FF0065" cx="1102.68" cy="230.8" r="111.16"/> <circle fill="#FF0065" cx="968.82" cy="681.71" r="68.07"/> <circle fill="#FF0065" cx="916.13" cy="136.83" r="41.38"/> <circle fill="#FF0065" cx="833.54" cy="497.07" r="186.93"/> </g> <g id="skull"> <g> <path opacity="0.75" fill="#FFF6E6" d="M901.5,553.66c-1.05,0.02-2.02-0.55-2.53-1.47c-3.26-5.89-7.52-12.22-15.54-12.44 l-0.38-0.01c-8.11,0-12.63,6.33-16.22,11.67c-0.91,0.44-1.64,0.8-2.56,1.24l-13.13-0.99c-0.95-0.07-1.8-0.63-2.26-1.46 c-3.34-6.03-7.63-11.8-14.63-12.77l-0.88-0.12l-1.03-0.01c-6.33,0-10.39,3.78-13.25,8c-0.68,1.01-1.98,1.42-3.14,1.07 c-0.94-0.28-1.74-0.54-2.43-0.78c-1.18-0.41-1.94-1.54-1.89-2.79c0.04-1.02,0.1-2.06,0.14-2.99c0.45-9.25,0.68-16.2-0.56-21.34 c-1.17-4.88-3.53-9.31-6.81-12.83c-18.13-19.37-30.57-53.75-33.26-91.97c-2.28-32.28,1.16-82.47,30.45-138.2 c10.89-20.71,91.29-60.51,172.67-60.51c46.02,0,107.42,13.21,138.59,76.15c25.64,51.76,34.26,99.77,24.94,138.82 c-7.75,32.46-25.55,49.87-34.85,55.03c-19.18,10.66-23.91,28.94-27.36,42.3c-0.01,0.02-0.01,0.04-0.02,0.06 c-0.65,2.5-4.02,2.9-5.23,0.62c-1.02-1.93-2.04-4.25-2.93-6.99c-7.86-23.99-23.83-37.19-44.98-37.19l-1.02,0.01 c-38.41,0.78-46.36,23.86-52.17,40.72c-3.99,11.59-6.9,18.99-15.25,23.62c-0.17,0.1-0.35,0.18-0.54,0.24 c-0.86,0.29-3.29,1.01-8.85,2.09c-1.1,0.21-2.24-0.22-2.86-1.15c-2.72-4.04-7.21-8.82-14.2-8.82h-0.45l-0.53,0.03 c-7.36,0.52-11.33,6.35-13.96,11.51c-0.47,0.92-1.42,1.49-2.45,1.5L901.5,553.66z"/> <path fill="#FFF6E6" d="M1128.31,289.39c-73.98-149.37-310.29-61.16-334.07-15.91c-53.19,101.18-33.45,204.01,4.8,244.88 c1.85,1.98,3.08,4.43,3.71,7.06c1.59,6.64-0.78,24.96,0.17,28.62c1.1,4.27,6.7,7.05,19.9,10.34c4.22,1.05,6.15,0.81,7.58-1.99 c1.8-3.52,4.16-8.59,6.07-8.32c1.79,0.25,4.52,4.89,6.47,8.7c1.59,3.09,4.65,5.13,8.12,5.39l19.52,1.46 c3.48,0.26,6.82-1.32,8.85-4.15c2.47-3.45,5.65-9.01,7.63-8.95c1.75,0.05,4.43,5.38,6.31,8.84c1.76,3.24,5.2,5.21,8.89,5.14 l15.56-0.27c3.79-0.07,7.22-2.27,8.83-5.71c1.61-3.43,3.62-7.19,4.76-7.27c1.59-0.11,3.69,3,5.37,6.04 c1.86,3.39,5.65,5.24,9.46,4.57c6.05-1.06,14.43-2.73,17.24-4.21c32.44-17.14,11.33-62.08,62.17-63.11 c20.14-0.41,29.32,15.37,33.58,28.37c7.68,23.45,25.01,31.51,30.79,12.67c4.02-13.07,5.78-31.82,23.14-41.46 C1139.59,485.43,1191.2,416.38,1128.31,289.39z M1102.95,484.95c-19.18,10.66-23.91,28.94-27.36,42.3 c-0.01,0.02-0.01,0.04-0.02,0.06c-0.65,2.5-4.02,2.9-5.23,0.62c-1.02-1.93-2.04-4.25-2.93-6.99 c-7.86-23.99-23.83-37.19-44.98-37.19l-1.02,0.01c-38.41,0.78-46.36,23.86-52.17,40.72c-3.99,11.59-6.9,18.99-15.25,23.62 c-0.17,0.1-0.35,0.18-0.54,0.24c-0.86,0.29-3.29,1.01-8.85,2.09c-1.1,0.21-2.24-0.22-2.86-1.15c-2.72-4.04-7.21-8.82-14.2-8.82 h-0.45l-0.53,0.03c-7.36,0.52-11.33,6.35-13.96,11.51c-0.47,0.92-1.42,1.49-2.45,1.5l-8.62,0.15c-1.05,0.02-2.02-0.55-2.53-1.47 c-3.26-5.89-7.52-12.22-15.54-12.44l-0.38-0.01c-8.11,0-12.63,6.33-16.22,11.67c-0.91,0.44-1.64,0.8-2.56,1.24l-13.13-0.99 c-0.95-0.07-1.8-0.63-2.26-1.46c-3.34-6.03-7.63-11.8-14.63-12.77l-0.88-0.12l-1.03-0.01c-6.33,0-10.39,3.78-13.25,8 c-0.68,1.01-1.98,1.42-3.14,1.07c-0.94-0.28-1.74-0.54-2.43-0.78c-1.18-0.41-1.94-1.54-1.89-2.79c0.04-1.02,0.1-2.06,0.14-2.99 c0.45-9.25,0.68-16.2-0.56-21.34c-1.17-4.88-3.53-9.31-6.81-12.83c-18.13-19.37-30.57-53.75-33.26-91.97 c-2.28-32.28,1.16-82.47,30.45-138.2c10.89-20.71,91.29-60.51,172.67-60.51c46.02,0,107.42,13.21,138.59,76.15 c25.64,51.77,34.26,99.77,24.94,138.82C1130.05,462.38,1112.24,479.79,1102.95,484.95z"/> </g> <g> <path opacity="0.25" fill="#2B1F47" d="M879.7,488.92c-8.32-0.24-9.04,13.74-17.23,12.17c-10.46-2,7.71-54.96,17.35-54.96 c16.15,0,39.29,54.7,20.79,54.7C888.07,500.84,885.73,489.09,879.7,488.92z"/> <path fill="#2B1F47" d="M882.33,449.2c-7.82,9.12-17.1,36.18-15.7,47.19c0.2,1.59,2.22,2.13,3.16,0.83 c2.51-3.48,4.33-8.01,9.01-9.39c3.68-1.08,6.71,0.25,8.06,1.08c4.94,3.06,7.15,7.75,13.6,10.4c2.33,0.96,5.16-0.12,6.11-2.45 c4.32-10.61-8.12-39..........完整代码请登录后点击上方下载按钮下载查看
网友评论0