HTML5咖啡生产器小应用

Coffee Maker App，可以调整咖啡杯的尺寸和咖啡泡沫成分。

html5, food, app

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

const coffeeCupSliderSettings = Object.assign({}, baseSliderSettings, {
    connect: 'lower',
    direction: 'rtl'
});

const foamSliderSettings = Object.assign({}, baseSliderSettings, {
    connect: 'lower',
    range: {
        'min': 0,
        'max': 100
    },
});

const coffeeCupSizes = [{
    size: 's',
    threshold: {
        min: 0,
        max: 24
    }
}, {
    size: 'm',
    threshold: {
        min: 25,
        max: 49
    }
}, {
    size: 'l',
    threshold: {
        min: 50,
        max: 74
    }
}, {
    size: 'xl',
    threshold: {
        min: 75,
        max: 99
    }
}, {
    size: 'xxl',
    threshold: {
        min: 100,
        max: 100
    }
}];

const VIEW_CUP_SIZE = 'cup-size';
const VIEW_FOAM_SIZE = 'foam-size';

let activeView = VIEW_CUP_SIZE;

编译

CSS

@import url("https://fonts.googleapis.com/css?family=Roboto:100,400");
[v-cloak] {
    display: none;
}
*,
*::after,
*::before {
    box-sizing: border-box;
}
html,
body {
    height: 100%;
    min-height: 100%;
}
body {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(to bottom right, #c8c897, #902086);
    color: #4C292D;
}
[class^="icon-"],
[class*=" icon-"] {
    display: inline-block;
    width: 1em;
    height: 1em;
    fill: currentColor;
}
.hide {
    opacity: 0;
}
.card {
    position: relative;
    overflow: hidden;
    width: 95%;
    max-width: 300px;
    height: 90%;
    max-height: 550px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    background: linear-gradient(140deg, #fff 30%, #eee);
}
.card__title {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.title {
    position: absolute;
    transition: opacity .3s ease, transform .3s ease;
    will-change: transform;
}
.title--coffee {
    opacity: 0;
    transform: translate3d(-30px, 0, 0);
}
.title--coffee.active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
.title--foam {
    opacity: 0;
    transform: translate3d(50px, 0, 0);
}
.title--foam.active {
    opacity: 1;
    transform: translate3d(20px, 0, 0);
}
.card__slider {
    position: absolute !important;
    height: 60%;
    bottom: 5%;
    top: 15%;
    left: 15%;
    right: 0;
}
.card__content {
    margin-left: 25%;
    text-align: center;
    opacity: 0;
}
.card__content.active {
    opacity: 1;
}
.percentage-sign {
    font-size: 30px;
    font-weight: 300;
}
.slider-label {
    font-size: 70px;
    font-weight: 100;
    width: 100%;
    text-indent: -15px;
    text-transform: uppercase;
}
.slider-label.hide {
    display: none;
}
.coffee-size {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.coffee-size__icon {
    margin-top: 60px;
    width: 130px;
    transform-origin: bottom center;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media (min-height: 500px) {
    .coffee-size__icon {
        margin-top: 100px;
    }
}
.coffee-size__icon.s {
    transform: scale(0.7, 0.7);
}
.coffee-size__icon.m {
    transform: scale(0.7, 0.8);
}
.coffee-size__icon.l {
    transform: scale(0.7, 0.9);
}
.coffee-size__icon.xl {
    transform: scale(0.9, 1.1);
}
.coffee-size__icon.xxl {
    transform: scale(1, 1.5);
}
.card__button {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 0;
    background: #F8E43C;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 1px;
    cursor: pointer;
}
.card__button:hover {
    background: #f7e123;
}
.card__button:hover span:last-child {
    transform: translate3d(0.5rem, 0, 0);
}
.card__button span {
    display: inline-block;
    transition: transform .2s ease-in-out, opacity .2s ease-in-out;
}
.card__button span:last-child {
    margin-left: 1rem;
    color: rgba(76, 41, 45, 0.5);
}
.coffee__cup {
    fill: none;
    stroke: #231f20;
    stroke-width: 3px;
}
.coffee__fill {
    fill: #86381c;
    transform-origin: 100% 100%;
}
.coffee__top {
    fill: #fff;
    stroke: #272727;
    stroke-width: 3px;
}
.coffee__foam {
    fill: #fff;
}
.scale-enter-active,
.scale-leave-active {
    transition: transform .1s ease;
}
.scale-enter,
.scale-leave-to {
    transform: scale(1.3);
}
.button-enter-active,
.button-leave-active {
    transition: transform 0.1s cubic-bezier(0.23, 1, 0.32, 1), background 0.15s;
    transform-origin: 100% 100%;
}
.button-enter,
.button-leave-to {
    transform: scale(1, 1);
    background: #f6dd0b;
}
.button-enter:hover span:last-child,
.button-leave-to:hover span:last-child {
    transform: translate3d(1rem, 0, 0);
    opacity: 0;
}
.button-enter span:first-child,
.button-leave-to span:first-child {
    transform: translate3d(-1rem, 0, 0);
    opacity: 0;
}
.button-enter span:last-child,
.button-leave-to span:last-child {
    transform: translate3d(1rem, 0, 0);
    opacity: 0;
}
.noUi-target {
    border: none;
    background: #000;
    border-radius: 20px;
    box-shadow: none;
}
.noUi-vertical {
    width: 11px;
}
.noUi-vertical .noUi-handle {
    left: -13px;
    width: 37px;
    height: 37px;
    border: none;
    box-shadow: none;
    border-radius: 50%;
    background: #F8E43C;
    transition: transform .15s;
    cursor: pointer;
}
.noUi-vertical .noUi-handle.noUi-active {
    transform: scale(1.2);
}
.noUi-connect {
    background: #F8E43C;
    left: -5px;
    right: -5px;
    box-shadow: none;
    border-radius: 20px;
}
.noUi-origin {
    border-radius: 20px;
}

HTML

<div id="card" class="card" v-cloak>
    <div class="card__title">
        <div style="width: 25%; height: 21px;">
            <span id="title-coffee-size" class="title title--coffee" :class="{'active': activeView == 'cup-size'}">Coffee Size</span>
            <span id="title-foam" class="title title--foam" :class="{'active': activeView == 'foam-size'}">Foam</span>
        </div>
    </div>
    <div :class="{'hide': activeView == 'foam-size'}">
        <div id="cup-slider" ref="cupSlider" class="card__slider"></div>
    </div>
    <div :class="{'hide': activeView == 'cup-size'}">
        <div id="foam-slider" ref="foamSlider" class="card__slider"></div>
    </div>
    <div class="card__content coffee-size active">
        <div id="percentage-wrap" class="slider-label" :class="{'hide': activeView == 'cup-size'}">
            <span id="percentage">{{ foam }}</span><span class="percentage-sign">%</span>
        </div>
        <transition name="scale" mode="out-in">
            <div id="coffee-size" class="slider-label" :class="{'hide': activeView == 'foam-size'}" :key="coffeeCupSize">{{ coffeeCupSize }}</div>
        </transition>
        <div id="coffee-cup" class="coffee-size__icon" :class="coffeeCupSize">
            <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 64.63 50.33">
                <title>coffee-cup</title>
                <g>
                    <path class="coffee__foam" d="M3.57,13c2,7.37,44.84,6.2,47.35,0-1,16.66-2.6,23.32-8.52,31.67-4.52,2.08-7.52,2.88-15.15,3-7.64-.12-10.63-.92-15.15-3C6.46,36.3,4.8,29.65,3.57,13Z" />
                    <path :style="foamScale" class="coffee__fill" d="M3.57,13c2,7.37,44.84,6.2,47.35,0-1,16.66-2.6,23.32-8.52,31.67-4.52,2.08-7.52,2.88-15.15,3-7.64-.12-10.63-.92-15.15-3C6.46,36.3,4.8,29.65,3.57,13Z" />
                </g>
                <g>
                    <path class="coffee__cup" d="M50.92,7.94c-.33,16.68-2.17,28.37-8.52,36.71-4.52,2.08-7.52,2.88-15.15,3-7.64-.12-10.63-.92-15.15-3-6.35-8.34-8.19-20-8.52-36.71" />
                    <path class="coffee__cup" d="M50.92,13c16.7,4.08,12.08,28-5.15,26.1" />
                    <path class="coffee__top" d="M27.25,13c15.7,0,23.67-2.26,23.67-5s-8-5-23.67-5S3.57,5.15,3.57,7.94,11.54,13,27.25,13Z" />
                </g>
            </svg>
        </div>
    </div>
    <transition name="button" mode="out-in">
        <div id="next-button" class="card__button" @click="toggleView()" :key="activeView">
            <span>{{ activeView === 'cup-size' ? 'Next' : 'Prev' }}</span>
            <span>{{ activeView === 'cup-size' ? 'Foam' : 'Size' }}</span>
        </div>
    </transition>
</div>

Coffee Maker App，可以调整咖啡杯的尺寸和咖啡泡沫成分。

html5, food, app

编辑器支持Emmet

快捷键

Coffee Maker App，可以调整咖啡杯的尺寸和咖啡泡沫成分。

html5, food, app

使用HTML5和ES6（JS）实现的在线数独游戏生成器和解答

HTML5 午餐随机选择（碰运气）小应用

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：