svg赛道数字变化动画效果代码
代码语言:html
所属分类:动画
代码描述:svg赛道数字变化动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: radial-gradient(forestgreen, darkgreen); margin: 0 auto; height: 100vh; } #racecarNumbers { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 400px; width: 400px; max-height: 100vh; max-width: 100vw; } </style> </head> <body translate="no"> <svg viewbox="0 0 100 100" preserveAspectRatio="auto" id="racecarNumbers"> <defs> <filter id="turb" x="-100%" y="-100%" width="300%" height="300%"> <feTurbulence type="turbulence" baseFrequency="0.03" numOctaves="5" result="turbulence" seed="69" /> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" /> </filter> <g id="racecar" transform="scale(0.1) rotate(-90 0 50)"> <ellipse cx="50" cy="52" rx="15" ry="46" fill="rgba(0,0,0,0.5)" filter="url(#blur5)" /> <!-- front axle --> <path.........完整代码请登录后点击上方下载按钮下载查看
网友评论0