html5+css3+svg+jq音量调节ui按钮特效
1、新建html文档。
2、书写hmtl代码。
<div id="icon" class="icon"> <svg
class="outline"
viewBox="0 0 216 216"
preserveAspectRatio="xMidYMid meet" >
<defs>
<linearGradient x1="16.291%" y1="13.917%" x2="88.893%" y2="80.425%" id="a">
<stop stop-color="#B0DBDD" offset="0%"/>
<stop stop-color="#0AA3C9" offset="100%"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M10 108c0-54.124 43.876-98 98-98s98 43.876 98 98-43.876 98-98 98-98-43.876-98-98z" stroke="rgba(0,0,0,.4)" stroke-width="6"/>
<path id="path" class="path" d="M10 108c0-54.124 43.876-98 98-98s98 43.876 98 98-43.876 98-98 98-98-43.876-98-98z" stroke="url(#a)" stroke-width="4"/>
</g>
</svg>
<div class="wheel">
<div id="indicator" class="indicator"></div>
</div>
</div>
<h1>鼠标按住中间的按钮拖动查看效果</h1>
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; }
4、书写index.js并添加js代码。
<script src='js/jquery.js'></script>
<script src='js/TweenLite.min.js'></script>
<script src='js/Draggable.min.js'></script>
<script src='js/CSSPlugin.min.js'></script>
<script src="js/index.js"></script>
<script>
var path = $('#path');
Draggable.create("#indicator", {
type: "rotation",
throwProps: true,
maxRotation: 360,
onDrag: function() {
var i = this.rotation;
path.css('stroke-dashoffset', 620*(1-i/360));
},
});</script>
5、代码整体结构。
6、 查看效果。
