HTML5 GSAP 发货处理后点赞的动效

Flash Message 包含星光迸射和竖大拇指的动画。

GSAP, svg, like

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";
console.clear();
var debug = 0;

var button = $("#button"),
    bg = $("#bg"),
    clip = $("#clip circle"),
    modal = $("#modal"),
    imageWrap = $("#image-wrap"),
    repeat = $("#repeat"),
    thumb = $("#thumb"),
    numConfetti = 17,
    confettiOuter,
    confettiInner,
    isGridView = !!window.location.pathname.match(/fullcpgrid/),
    tl = new TimelineLite({
        paused: true
    });

function createConfetti(opts) {
    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    var use = document.createElementNS("http://www.w3.org/2000/svg", "use");
    svg.setAttribute("viewBox", "0 0 50 50");
    use.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#" + opts.shape);
    use = $(use);
    svg = $(svg);
    use.css("transform", "translateX(" + opts.offset + ")")
    svg.append(use);
    svg.addClass("confetti");
    svg.css("fill", opts.color);
    svg.css("width", opts.size + "px");
    svg.css("transform", "translate(-50%, -50%) rotate(" + opts.rotation + "deg)");
    return svg;
}

function randBetween(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

buildConfettiElements();
confettiOuter = $(".confetti");
confettiInner = confettiOuter.find("use");

tl.to(button, .12, {
    scale: 0,
    onComplete: function() {
        button.addClass("loading");
    }
});

tl.to(button, 1.25, {
    scale: 1,
    force3D: true,
    ease: Elastic.easeOut
});

tl.to(button, 1.95, {
    rotation: 1930,
    ease: Linear.easeNone
}, "-=1.25");

tl.to(button, .2, {
    scale: 0,
    onComplete: function() {
        modal.addClass("active");
        button.addClass("hidden");
        var size = Math.max(window.innerHeight, window.innerWidth);
        bg.width(size * 1.25);
        bg.height(size * 1.25);
    }
}, "-=.1");

tl.set(bg, {
    display: "block",
    x: "-50%",
    y: "-50%",
    force3D: true,
    scale: 0
});
tl.addLabel("debug");
tl.to(bg, .4, {
    scale: (isGridView ? 1.2 : 1),
    onComplete: function() {
        bg.removeAttr("style");
        bg.addClass("active");
    }
});

tl.to(modal, 1, {
    opacity: 1
}, "-=.25");

tl.to(modal, .75, {
    y: 0,
    ease: Elastic.easeOut,
}, "-=1");

tl.to(thumb, 1, {
    scale: 1,
    y: 0,
    ease: Elastic.easeOut
}, "-=1");

tl.to(confettiInner, .85, {
    x: "+=550",
    ease: Power4.easeOut
}, "-=1.05");

tl.to(confettiOuter, .45, {
    y: 10,
}, "-=.65");

tl.to(confettiInner, .45, {
    scale: 0
}, "-=.6");

tl.to(repeat, 1, {
    scale: 1,
    clearProps: "all",
    ease: Elastic.easeOut,
    onComplete: function() {
        repeat.addClass("active");
    }
}, "-=.3");

if (debug) {
    (function() {
        tl.seek("debug", false);
        tl.play();
    })();
}

button.click(function() {
    tl.resume();
});

repeat.click(function() {
    $(".active").removeClass("active");
    button.removeClass("loading hidden");
    tl.restart().pause();
});

if (isGridView) {
    setTimeout(function() {
        button.click();
    }, 500);
    $("html").addClass("gridView");
}

编译

CSS

html {
    box-sizing: border-box;
}
html.gridView {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
}
*,
*:after,
*:before {
    box-sizing: inherit;
}
body,
html {
    min-height: 100vh;
}
body {
    font-size: 16px;
    background: #e3eff5;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
}
.bg {
    display: none;
    background: #755ca8;
    position: fixed;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.bg.active {
    display: block;
    width: 100vw;
    height: 100vh;
    -webkit-transform: none;
    transform: none;
    left: 0;
    top: 0;
    border-radius: 0;
}
.gridView .bg.active {
    -webkit-transform: scale(1.25);
    transform: scale(1.25);
}
.dope-af {
    font-size: 1.65em;
    font-family: Knewave;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.button {
    white-space: nowrap;
    outline: none;
    text-align: center;
    margin: auto;
    border: none;
    padding: 10px 25px;
    border-radius: 4px;
    background: white;
    color: #f34940;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    -webkit-transition: background .15s ease-out;
    transition: background .15s ease-out;
}
.button:hover:not(:active) {
    background: #fecb36;
}
.button.loading {
    cursor: auto;
    font-size: 0;
    border-radius: 50%;
    padding: 0;
    line-height: 0;
    border: 20px solid #f34940;
    border-top-color: #f88e88;
    box-shadow: none;
}
.button.loading:hover {
    box-shadow: none;
}
.button.hidden {
    display: none;
}
.modal {
    display: none;
    width: 360px;
    margin: auto;
    opacity: 0;
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
    max-width: 75%;
    min-width: 230px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    border-radius: 8px;
}
.modal.active {
    display: block;
}
.modal__img-wrap {
    background-color: #e3eff5;
    padding: 30px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.modal__img-wrap:before {
    content: '';
    top: 0;
    left: 0;
    position: absolute;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/186499/bg.svg");
    height: 100%;
    width: 100%;
    background-size: 63%;
    z-index: 0;
    opacity: .08;
}
.modal__img {
    width: 80%;
    height: auto;
    margin: 0 auto;
    display: block;
    margin-top: -50px;
    -webkit-transform: translateY(30%) scale(0.75);
    transform: translateY(30%) scale(0.75);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.modal__text-wrap {
    background: white;
    padding: 30px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    text-align: center;
    position: relative;
}
.modal__header {
    margin: 0;
    padding-bottom: 10px;
    margin-bottom: 10px;
    color: #f34940;
    display: inline-block;
    position: relative;
}
.modal__header__underline {
    width: 140%;
    position: absolute;
    left: -35%;
    height: 15px;
    bottom: 0;
    fill: #f34940;
}
.modal__repeat {
    display: block;
    position: absolute;
    right: 15px;
    bottom: 15px;
    height: 30px;
    width: 30px;
    fill: #bddae8;
    cursor: pointer;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.modal__repeat.active {
    -webkit-transform: none;
    transform: none;
    -webkit-transition: all .1s ease-out;
    transition: all .1s ease-out;
}
.modal__repeat:hover {
    fill: #98c4da;
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);
}
svg:not(:root) {
    overflow: visible;
}
.confetti {
    overflow: visible;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -62.5px;
    z-index: 99;
}

HTML

<svg style="display:none;">
    <defs>
        <g id="star">
            <path d="M27.5 1.5l7.3 13.3c.1.2.3.3.4.4l13.3 7.3c1.9 1.1 1.9 3.9 0 4.9l-13.3 7.3c-.2.1-.3.3-.4.4l-7.3 13.3c-1.1 1.9-3.9 1.9-4.9 0l-7.3-13.3c-.1-.2-.3-.3-.4-.4L1.5 27.5c-1.9-1.1-1.9-3.9 0-4.9l13.3-7.3c.2-.1.3-.3.4-.4l7.3-13.3c1.1-2.1 3.9-2.1 5-.1z" />
        </g>
        <g id="circle">
            <path d="M25 50C11.2 50 0 38.8 0 25S11.2 0 25 0s25 11.2 25 25-11.2 25-25 25zm0-38.7c-7.5 0-13.7 6.1-13.7 13.7S17.5 38.7 25 38.7 38.7 32.5 38.7 25 32.5 11.3 25 11.3z" />
        </g>
        <g id="cross">
            <path d="M43.2 18.5h-7.1c-2.5 0-4.6-2.1-4.6-4.6V6.8c0-3.4-2.5-6.5-5.9-6.8-3.9-.4-7.2 2.7-7.2 6.5v7.3c0 2.5-2.1 4.6-4.6 4.6H6.7c-3.4 0-6.5 2.5-6.8 5.9-.4 3.9 2.7 7.2 6.5 7.2h7.3c2.5 0 4.6 2.1 4.6 4.6v7.1c0 3.4 2.5 6.5 5.9 6.8 3.9.4 7.2-2.7 7.2-6.5v-7.3c0-2.5 2.1-4.6 4.6-4.6h7.3c3.8 0 6.9-3.3 6.5-7.2-.1-3.4-3.2-5.9-6.6-5.9z"
            />
        </g>
        <g id="triangle">
            <path d="M38.9 46.2H11.1c-4 0-7.6-2.1-9.6-5.5-2-3.5-2-7.6 0-11.1L15.4 5.5C17.4 2.1 21 0 25 0s7.6 2.1 9.6 5.5l13.9 24.1c2 3.5 2 7.6 0 11.1s-5.6 5.5-9.6 5.5zM25 10.5c-.3 0-.5.2-.5.3L10.6 34.9c-.1.1-.2.3 0 .6s.4.3.5.3h27.8c.1 0 .3 0 .5-.3s.1-.5 0-.6L25.5 10.8c0-.1-.2-.3-.5-.3z"
            />
        </g>
    </defs>
</svg>

Flash Message 包含星光迸射和竖大拇指的动画。

GSAP, svg, like

编辑器支持Emmet

快捷键

Flash Message 包含星光迸射和竖大拇指的动画。

GSAP, svg, like

HTML5 GSAP 在手机上展示地图位置的动画效果

HTML5 GSAP一款很棒的竖向动画广告条模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：