html5+css3+svg+jq音量调节ui按钮特效

1、新建html文档。

3、书写css代码。.icon > * { position: absolute; bottom: 0; top: 0; left: 0; right: 0; margin: auto; }html, body { height: 100%; background: -webkit-radial-gradient(50% 0, circle, #3c3b4d 0%, #15131a 50%); background: radial-gradient(circle at 50% 0, #3c3b4d 0%, #15131a 50%); }body { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }h1 { color: #FFF; text-align: center; margin: 50px 0 20px 0 }h4 { color: #666; text-align: center; margin: 0 0 20px 0; font-size: 14px }a, a:link { color: #666 }.icon { width: 14em; height: 14em; border-radius: 3em; position: relative; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.3), inset 0 0.2em 0.4em -0.2em rgba(255, 255, 255, 0.2), 0 0 0.2em rgba(0, 0, 0, 0.4); background: -webkit-linear-gradient(top, #3F3F4C, #191720); background: linear-gradient(to bottom, #3F3F4C, #191720); }.wheel { width: 6em; height: 6em; border-radius: 50%; box-shadow: inset 0 0.1em 0.2em rgba(255, 255, 255, 0.2), 0 1em 2em 0.4em rgba(0, 0, 0, 0.5), 0 -1em 2em 0.1em rgba(255, 255, 255, 0.1); background: -webkit-linear-gradient(top, #525161, #322E3D); background: linear-gradient(to bottom, #525161, #322E3D); }.wheel .indicator { width: 100%; height: 100%; }.wheel .indicator:after { content: ''; display: block; position: absolute; background: #3B3A46; border-radius: 50%; width: .65em; height: .65em; top: .6em; left: 0; right: 0; margin: auto; box-shadow: 0 1px 1px -1px rgba(255, 255, 255, 0.4), inset 0 1px 1px rgba(0, 0, 0, 0.4); }.outline { width: 12.5em; height: 12.5em; -webkit-transform: translateZ(0) rotateZ(90deg); transform: translateZ(0) rotateZ(90deg); }.path { stroke-dasharray: 620; stroke-dashoffset: 620; }@-webkit-keyframes path { 40% {stroke-dashoffset: 100;}100% {stroke-dashoffset: 620;}}@keyframes path { 40% {stroke-dashoffset: 100;}100% {stroke-dashoffset: 620;}}@-webkit-keyframes rotate { 40% {-webkit-transform: rotateZ(320deg);transform: rotateZ(320deg);}100% {-webkit-transform: rotateZ(0);transform: rotateZ(0);}}@keyframes rotate { 40% {-webkit-transform: rotateZ(320deg);transform: rotateZ(320deg);}100% {-webkit-transform: rotateZ(0);transform: rotateZ(0);}}.path { -webkit-animation: path 2s; animation: path 2s; }.indicator { -webkit-animation: rotate 2s; animation: rotate 2s; }

5、代码整体结构。