SVG爱心水杯滑块进度条控件 - 踏得网

Love Water Slider

svg, slider, heart

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1961
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var App = /** @class */ (function() {
    function App() {
        var _this = this;
        this.select = function(e) {
            return document.querySelector(e);
        };
        this.selectAll = function(e) {
            return document.querySelectorAll(e);
        };
        this.mainTl = new TimelineMax();
        this.follower = this.select('.follower');
        this.liquidFollower = this.select('.liquidFollower');
        this.track = this.select('.track');
        this.dragger = this.select('.dragger');
        this.boxFill = this.select('.boxFill');
        this.maxDrag = 705;
        this.boxFillMaxPosY = -106;
        this.heartChat = this.select('.heartChat');
        this.boxFill = this.select('.boxFill');
        this.mainHeart = this.select('.mainHeart');
        var followerVX = 0,
            liquidFollowerY = 0;
        TweenMax.set(this.heartChat, {
            transformOrigin: '50% 100%'
        });
        TweenMax.set(this.boxFill, {
            transformOrigin: '50% 0%'
        });
        TweenMax.set(this.mainHeart, {
            transformOrigin: '50% 50%'
        });
        this.myDragger = Draggable.create(this.dragger, {
            type: 'x, y',
            bounds: {
                minX: 0,
                maxX: this.maxDrag,
                minY: 0,
                maxY: 0
            },
            onDrag: this.onDrag,
            onThrowUpdate: this.onDrag,
            throwProps: true,
            callbackScope: this,
            overshootTolerance: 0,
            throwResistance: 8000,
            cursor: 'ew-resize'
        });
        TweenMax.to(this.follower, 1, {
            x: '+=0',
            repeat: -1,
            modifiers: {
                x: function(x, target) {
                    followerVX += (_this.dragger._gsTransform.x - _this.follower._gsTransform.x) * 0.08;
                    followerVX *= 0.79;
                    return _this.follower._gsTransform.x + followerVX;
                }
            }
        });
        TweenMax.to(this.liquidFollower, 1, {
            x: '+=0',
            repeat: -1,
            modifiers: {
                x: function(x, target) {
                    liquidFollowerY += (_this.dragger._gsTransform.x - _this.liquidFollower._gsTransform.x) * 0.8;
                    liquidFollowerY *= 0.7;
                    return _this.follower._gsTransform.x + liquidFollowerY;
                }
            }
        });
        TweenMax.to(this.heartChat, 1, {
            rotation: '+=0',
            repeat: -1,
            ease: Linear.easeNone,
            modifiers: {
                rotation: function(rotation, target) {
                    var val = rotation + followerVX * 0.95;
                    return (-val);
                }
            }
        });
        TweenMax.to(this.boxFill, 1, {
            rotation: '+=0',
            repeat: -1,
            ease: Linear.easeNone,
            modifiers: {
                rotation: function(rotation, target) {
                    var val = rotation + liquidFollowerY * 0.5;
                    return (val);
                }
            }
        });
        this.onDrag();
    }
    App.prototype.onDrag = function() {
        var progress = this.dragger._gsTransform.x / this.maxDrag;
        TweenMax.to(this.heartChat, 0.1, {
            x: this.dragger._gsTransform.x
        });
        var percent = progress * 100;
        var percentY = progress * this.boxFillMaxPosY;
        TweenMax.to('.track', 0.1, {
            drawSVG: "100% " + percent + "%"
        });
        TweenMax.to(this.boxFill, 0.1, {
            y: percentY
        });
    };
    App.prototype.randomBetween = function(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    };
    return App;
}());
TweenMax.set('svg', {
    visibility: 'visible'
});
new App();

编译

CSS

HTML

<svg viewBox="0 0 800 600" xmlns="https://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
    <defs>

<g class="mainHeart" id="mainHeart" opacity="1">
            <path class="pinkHeart" d="M76.16,23a13.23,13.23,0,0,0-10.83,5.63,13.24,13.24,0,0,0-24.08,7.62c0,18.06,24.08,34.92,24.08,34.92S89.41,54.33,89.41,36.27A13.25,13.25,0,0,0,76.16,23Z" fill="#ff595e" />
            <g id="shineGroup">
                <path d="M89.34,37.92c-1.39,17.42-24,33.26-24,33.26s-1.8-1.26-4.42-3.46C66.39,64.18,83.07,52.53,89.34,37.92Z" fill="#7f474b" opacity="0.32" />
                <path d="M60.15,26a14.06,14.06,0,0,0-1.72-.1c-7.33,0-13.48,5.38-15.1,12.63,0-.43-.06-.86-.06-1.3,0-6.88,5.27-12.46,11.77-12.46A11.2,11.2,0,0,1,60.15,26Z" fill="#fff" opacity="0.5" />
                <path d="M81,26.29c-.39-.12-.79-.22-1.2-.31-5.22-1.1-10.21.87-12.18,4.51a5.62,5.62,0,0,1,.1-.7c.78-3.7,5.17-5.9,9.79-4.92A10.26,10.26,0,0,1,81,26.29Z" fill="#fff" opacity="0.5" />
            </g>
        </g>
        <circle class="particle" cx="0" cy="0" r="2" fill="#62B6CB" stroke-width="0" />
        <g id="heartChat" class="heartChat">
            <mask id="heartShapeMask">
                <path id="whiteBoxMaskBg" d="M115.44,92H81.15a8.32,8.32,0,0,0-5.9,2.45l-9.9,9.9a1,1,0,0,1-1.34,0l-9.9-9.9A8.35,8.35,0,0,0,48.2,92H13.91A10.44,10.44,0,0,1,3.5,81.6V13.91A10.45,10.45,0,0,1,13.91,3.5H115.44a10.44,10.44,0,0,1,10.41,10.41V81.6A10.43,10.43,0,0,1,115.44,92Z"
                fill="#FFF" />
                <path id="blackHeart" d="M76.16,23a13.23,13.23,0,0,0-10.83,5.63,13.24,13.24,0,0,0-24.08,7.62c0,18.06,24.08,34.92,24.08,34.92S89.41,54.33,89.41,36.27A13.25,13.25,0,0,0,76.16,23Z" fill="#000" />
            </mask>
            <mask id="boxShapeMask">
                <use xlink:href="#whiteBoxMaskBg" />
            </mask>

<mask id="boxFillMask">
                <rect class="boxFill" x="-54" y="106" width="237" height="106" fill="#FFF" />
                <g mask="url(#heartShapeMask)">
                </g>
            </mask>
            <g mask="url(#boxFillMask)">
                <path id="liquid" d="M115.44,92H81.15a8.32,8.32,0,0,0-5.9,2.45l-9.9,9.9a1,1,0,0,1-1.34,0l-9.9-9.9A8.35,8.35,0,0,0,48.2,92H13.91A10.44,10.44,0,0,1,3.5,81.6V13.91A10.45,10.45,0,0,1,13.91,3.5H115.44a10.44,10.44,0,0,1,10.41,10.41V81.6A10.43,10.43,0,0,1,115.44,92Z"
                fill="#3FA9F5" />
            </g>
            <g mask="url(#boxShapeMask)">
                <use xlink:href="#mainHeart" y="0" />
            </g>
            <path class="outlineBg" transform="translate(1, 2)" d="M115.44,92H81.15a8.32,8.32,0,0,0-5.9,2.45l-9.9,9.9a1,1,0,0,1-1.34,0l-9.9-9.9A8.35,8.35,0,0,0,48.2,92H13.91A10.44,10.44,0,0,1,3.5,81.6V13.91A10.45,10.45,0,0,1,13.91,3.5H115.44a10.44,10.44,0,0,1,10.41,10.41V81.6A10.43,10.43,0,0,1,115.44,92Z"
            fill="none" stroke="#847C71" stroke-miterlimit="10" stroke-width="7" opacity="0.3" />
            <path class="outline" d="M115.44,92H81.15a8.32,8.32,0,0,0-5.9,2.45l-9.9,9.9a1,1,0,0,1-1.34,0l-9.9-9.9A8.35,8.35,0,0,0,48.2,92H13.91A10.44,10.44,0,0,1,3.5,81.6V13.91A10.45,10.45,0,0,1,13.91,3.5H115.44a10.44,10.44,0,0,1,10.41,10.41V81.6A10.43,10.43,0,0,1,115.44,92Z"
            fill="none" stroke="#f6f7f8" stroke-miterlimit="10" stroke-width="7" />

</g>
    </defs>
    <line class="trackBg" x1="50" x2="750" y1="365" y2="365" stroke="#f6f7f8" stroke-linecap="round" stroke-linejoin="round" stroke-width="15" />
    <line class="track" x1="50" x2="750" y1="366" y2="366" stroke="#847C71" stroke-linecap="round" stroke-linejoin="round" stroke-width="6" opacity="0.83" />
    <line class="track" x1="50" x2="750" y1="365" y2="365" stroke="#3FA9F5" stroke-linecap="round" stroke-linejoin="round" stroke-width="6" />

<use xlink:href="#heartChat" x="-18" y="235" />

<circle class="follower" cx="0" cy="0" r="0" fill="green" fill-opacity="1" stroke="#FFFCF9" stroke-width="0" />
    <circle class="liquidFollower" cx="0" cy="50" r="0" fill="red" fill-opacity="1" stroke="#FFFCF9" stroke-width="0" />
    <circle class="dragger" cx="50" cy="305" r="100" fill="#62B6CB" fill-opacity="0" stroke="#FFFCF9" stroke-width="0" />

</svg>

<script src='//cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/utils/Draggable.min.js'></script>
<script src='/uploads/150601/ThrowPropsPlugin.min.js'></script>
<script src='/uploads/1903/DrawSVGPlugin.js?r=12'></script>