TweenMax+svg+Draggable实现拖拽刻度试管温度滑块效果代码
代码语言:html
所属分类:拖放
代码描述:TweenMax+svg+Draggable实现拖拽刻度试管温度滑块效果代码
代码标签: TweenMax svg Draggable 拖拽 刻度 温度 试管 滑块
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://use.typekit.net/rid3oni.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { background-color: #FCEFD6; overflow: hidden; text-align:center; } body, html { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; } svg { width: 100%; height: 100%; } .label{ fill:#FFFCF9; font-size:1.8em; font-family: "din-condensed-web", sans-serif; /* font-family: "filson-soft", sans-serif; */ text-anchor:middle; letter-spacing:1.2px; } .tubeLabel{ fill:#FCEFD6; font-size:1.4em; font-family: "din-condensed-web", sans-serif; /* font-family: "filson-soft", sans-serif; */ text-anchor:middle; } .dragger{ -webkit-tap-highlight-color:transparent; } </style> </head> <body > <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600"> <defs> <linearGradient id="liquidGrad" x1="557" y1="150" x2="557" y2="546" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#FF0909"/> <stop offset="0.2" stop-color="#F3481A&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0