js+svg实现胶囊开关点击切换效果代码-html代码-BFW代码库

js+svg实现胶囊开关点击切换效果代码

代码语言：html

所属分类：其他

代码描述：js+svg实现胶囊开关点击切换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
#svg{  position:absolute;  margin:auto;   top:0;bottom:0;left:0;right:0;}#pill{fill:gold;}#thePath{fill:skyBlue}.pe-n{pointer-events:none;}body{background:#1e88e5;}
</style>
</head>

<body><svg id="svg" width="100" viewBox="-10 -10 470 220"><defs><radialGradient id="rg" cx=".5" cy="0" r=".9" gradientUnits="objectBoundingBox"><stop offset="0%" stop-color="white" stop-opacity="0"></stop><stop offset="60%" stop-color="white" stop-opacity="0"></stop><stop offset="60%" stop-color="white" stop-opacity=".1"></stop><stop offset="100%" stop-color="white" stop-opacity=".3"></stop></radialGradient></defs><g id="theG"><path id="pill" d="M100.000, 200.000                    C44.771, 200.000 0.000, 155.229 0.000, 100                    C0, 44.771 44.771, 0.000 100.000, 0                    C183.333, 0.000 266.667, 0.000 350.000, 0                   C405.229, 0.000 450.000, 44.771 450.000, 100                    C450.000, 155.229 405.229, 200.000 350.000, 200                    C266.667, 200.000 183.333, 200.000 100.000, 200Z"></path><path id="thePath" d="M100.000, 200.000                    C44.771, 200.000 0.000, 155.229 0.000, 100.000                    C0.000, 44.771 44.771, 0.000 100.000, 0.000                    C141.667, 0.000 183.333, 0.000 225.000, 0.000                    C212.5,33 206.25,66.5 206.25, 100                    C206.25, 133.5 212.5, 167 225.000, 200.000                   C183.333, 200.000 141.667, 200.000 100.000, 200.000z"></path></g><path fill="url(#rg)" d="M450.000, 100                    C450.000, 155.229 405.229, 200.000 350.000, 200                    C266.667, 200.000 183.333, 200.000 100.000, 200                   C44.771, 200.000 0.000, 155.229 0.000, 100.000" class="pe-n"></path><path d="M60.000,50.000 Q60,40 70.000,40.000L380.000,40.000 Q390,40 390.000,50.000L390.000,60.000 Q390,70 380.000,70.000L70.000,70.000 Q60,70 60.000,60.000Z" fill="white" fill-opacity=".3" class="pe-n"></path&g.........完整代码请登录后点击上方下载按钮下载查看