CSS3 线性渐变函数效果的动画演示

`linear` timing function Illustration 左边显示其工作原理，右边是带渐变效果的目标元素：小方块。

css3, linear

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var form = document.querySelector('form'),
    toggle = form.querySelector('button'),
    auto = document.getElementById('auto'),
    kel = document.getElementById('k'),
    klbl = form.querySelector('[for=k]'),
    svg = document.querySelector('svg'),
    vb = svg.getAttribute('viewBox').split(' ').map(function(p) {
        return ~~p;
    }),
    bmov = document.getElementById('bmov'),
    trig = document.getElementById('trig'),
    gmov = document.getElementById('gmov'),
    gmovx = document.getElementById('gmov-x'),
    gmovy = document.getElementById('gmov-y'),
    lblt = document.getElementById('lbl-t'),
    lbly = document.getElementById('lbl-y'),
    max = document.getElementById('max'),
    maxcss = document.getElementById('max-css'),
    ycss = maxcss.textContent.replace('em', ''),
    tmax = ~~max.getAttribute('x'),
    ymax = ~~max.getAttribute('y'),
    f, r, dragged = null,
    x0 = null,
    y0 = null,
    rID = null;

var size = function() {
    r = svg.getBoundingClientRect();
    f = vb[2] / r.width;
};

var setCurrent = function(k) {
    var ktxt = Math.round(k * 100),
        t = ~~(k * tmax),
        y = (k * ymax).toFixed(2),
        tr2d = 'translate(' + t + ' ' + y + ')';

kel.value = ktxt;
    klbl.textContent = lblt.textContent = ktxt + '%';
    lbly.textContent = (k * ycss).toFixed(2).replace('.00', '') + 'em';

bmov.setAttribute('y', y);

trig.setAttribute('transform', tr2d);
    gmov.setAttribute('transform', tr2d);
    gmovx.setAttribute('transform', 'translate(' + t + ')');
    gmovy.setAttribute('transform', 'translate(0 ' + y + ')');
};

var slide = function() {
    if (rID) {
        stopani();
    }

if (kel.value != klbl.textContent)
        setCurrent(kel.value / 100);
};

var ani = function(k) {
    if (k === 100) k = 0;
    setCurrent(k / 100);
    rID = requestAnimationFrame(ani.bind(this, ++k));
};

var stopani = function(f) {
    cancelAnimationFrame(rID);
    rID = null;
    if (!f)
        auto.checked = !auto.checked;
}

size();
if (auto.checked) ani(0);

addEventListener('resize', size, false);

toggle.addEventListener('click', function(e) {
    e.preventDefault();
    form.classList.toggle('hidden');
}, false);

kel.addEventListener('input', slide, false);
kel.addEventListener('change', slide, false);

addEventListener('mousedown', function(e) {
    var tg = e.target.correspondingUseElement || e.target;

if (tg.getAttribute('for') == 'auto') {
        if (rID) {
            stopani(1);
        } else {
            ani(~~kel.value);
        }
    }

if (!dragged) {
        if (tg.id === 'bmov') {
            y0 = (e.clientY - r.top) * f + vb[1];
            dragged = tg;
        }

if (tg.parentNode.id === 'trig') {
            x0 = (e.clientX - r.left) * f + vb[0];
            dragged = tg.parentNode;
        }

if (dragged && rID) {
            stopani();
        }
    }
}, false);

addEventListener('mouseup', function(e) {
    if (dragged) dragged = null;
}, false);

addEventListener('mousemove', function(e) {
    var x, y, dx, dy, k;

if (dragged) {
        k = kel.value / 100;

if (dragged === bmov) {
            y = (e.clientY - r.top) * f + vb[1];
            dy = y - y0;
            k += dy / ymax;
            y0 = y;
        }

if (dragged === trig) {
            x = (e.clientX - r.left) * f + vb[0];
            dx = x - x0;
            k += dx / tmax;
            x0 = x;
        }

if (k >= 0 && k <= 1) setCurrent(k);
    }
}, false);

编译

CSS

@charset "UTF-8";
html {
    background: #f9f9f9;
}
body {
    margin: 0;
}
.slide {
    /* relevant part */
    
    position: absolute;
    top: 0;
    left: calc(50vw - 66.66667vh);
    width: 133.33333vh;
    height: 100vh;
    /* non-essential styles */
    
    overflow: hidden;
    box-sizing: border-box;
    padding: .5em;
    background: #e53b2c;
    color: #f9f9f9;
    font: 4.5vmin sans-serif;
}
@media (max-aspect-ratio: 4 / 3) {
    .slide {
        top: calc(50vh - 37.5vw);
        left: 0;
        width: 100vw;
        height: 75vw;
    }
}
body {
    margin: 0;
}
svg {
    position: absolute;
    top: 0;
    left: calc(50vw - 75vh);
    width: 150vh;
    height: 100vh;
}
@media (max-aspect-ratio: 3 / 2) {
    svg {
        top: calc(50vh - 33.33333vw);
        left: 0;
        width: 100vw;
        height: 66.66667vw;
    }
}
* {
    vector-effect: non-scaling-stroke;
}
path,
line {
    stroke-width: 2;
}
text {
    font: 7.5vmin comic sans ms, sans-serif;
    -webkit-touch-callout: none;
    /* iOS Safari */
    
    -webkit-user-select: none;
    /* Chrome/Safari/Opera */
    
    -khtml-user-select: none;
    /* Konqueror */
    
    -moz-user-select: none;
    /* Firefox */
    
    -ms-user-select: none;
    /* IE/Edge */
    
    user-select: none;
}
@media (min-width: 1200px) and (min-height: 800px) {
    text {
        font-size: 4.5vmin;
    }
}
.var {
    font-style: italic;
}
.code {
    font-family: courier, monospace;
}
.t {
    text-anchor: middle;
}
.l {
    dominant-baseline: middle;
    text-anchor: end;
}
[id='box'] use {
    fill: #ccc;
    stroke: #000;
    stroke-width: 2;
}
.box-ghost {
    fill: #ededed;
}
[id='bmov'] {
    fill: #e18728;
    cursor: pointer;
}
.guides {
    stroke: #ccc;
    stroke-dasharray: 5;
}
[id='coord-syst'] path {
    stroke: #000;
}
[id='coord-syst'] use {
    stroke: none;
    fill: #444;
}
[id='graph'] {
    stroke: #ffd86e;
}
[id='graph'] use {
    stroke: none;
}
[id='graph'] use:first-of-type {
    fill: #e18728;
}
[id='curr'] rect {
    fill: #e18728;
}
[id='curr'] text {
    fill: #fff;
    font-weight: 700;
}
[id='progress'] {
    stroke: #e18728;
    stroke-width: 4;
}
[id='trig'] {
    stroke: #be4c39;
    stroke-width: 3;
    cursor: pointer;
}
[id='trig'] > circle {
    fill: rgba(255, 255, 255, 0.1);
    opacity: .5;
}
[id='trig'] use {
    fill: #e18728;
}
[id='trig']:hover > circle {
    animation: pulse .25s infinite alternate;
}
@keyframes pulse {
    to {
        opacity: .99;
    }
}
/* =============== CONTROLS =============== */

form {
    position: fixed;
    bottom: 0;
    left: 50%;
    padding: .5em;
    transform: translate(-50%);
    background: #262626;
    color: #aaa;
    font: 1em/1.375em trebuchet ms, sans serif;
    transition: .35s;
}
form.hidden {
    transform: translate(-50%, 100%);
}
button {
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    border: none;
    width: 100%;
    border-radius: .5em .5em 0 0;
    background: #aaa;
    color: #262626;
    text-indent: -200vw;
    transition: inherit;
    cursor: pointer;
}
button:hover {
    color: #e18728;
}
button:before {
    position: absolute;
    top: 50%;
    left: 50%;
    border: solid 0 transparent;
    border-width: 0.86603em 0.5em 0 0.5em;
    border-top-color: currentColor;
    transform: translate(-50%, -50%);
    transition: inherit;
    content: '';
}
.hidden button:before {
    transform: translate(-50%, -50%) rotate(180deg);
}
input[type='checkbox'] {
    transform: translate(-100vw);
}
input[type='checkbox'] + label {
    display: inline-block;
    position: relative;
    color: #aaa;
    line-height: 2;
    cursor: pointer;
}
input[type='checkbox'] + label:hover {
    color: #c69969;
}
input[type='checkbox'] + label:before {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    right: 100%;
    margin: -0.625em 0.3125em;
    border: solid 0.125em #aaa;
    padding: .25em;
    width: 1.25em;
    height: 1.25em;
    color: transparent;
    font: 900 1em/.5 sans-serif;
    text-indent: -.125em;
    transition: .3s ease-out;
    content: '✓';
}
input[type='checkbox']:focus + label {
    color: #c69969;
}
input[type='checkbox']:checked + label,
input[type='checkbox']:checked + label:before {
    color: #e18728;
}
input[type='range'] {
    display: block;
    margin: 1em auto 0;
    padding: 0;
    width: 13em;
    height: 2em;
    background: none;
    font-size: 1em;
    cursor: pointer;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
    width: 13em;
    height: 0.25em;
    background: #aaa;
}
input[type='range']::-moz-range-track {
    width: 13em;
    height: 0.25em;
    background: #aaa;
}
input[type='range']::-ms-track {
    border: none;
    width: 13em;
    height: 0.25em;
    background: #aaa;
    color: transparent;
}
input[type='range']::-moz-range-progress {
    height: 0.25em;
    background: #e18728;
}
input[type='range']::-ms-fill-lower {
    background: #e18728;
}
input[type='range']::-webkit-slider-thumb {
    margin-top: -0.5em;
    border: none;
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    background: #e18728;
}
input[type='range']::-moz-range-thumb {
    border: none;
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    background: #e18728;
}
input[type='range']::-ms-thumb {
    border: none;
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    background: #e18728;
}
input[type='range']::-ms-tooltip {
    display: none;
}
input[type='range'] + label {
    display: block;
    text-align: center;
}
input[type='range']:focus {
    outline: none;
}

HTML

`linear` timing function Illustration 左边显示其工作原理，右边是带渐变效果的目标元素：小方块。

css3, linear

编辑器支持Emmet

快捷键

`linear` timing function Illustration 左边显示其工作原理，右边是带渐变效果的目标元素：小方块。

css3, linear

CSS3 Flat和preserve-3d两种transform-style属性效果的演示

CSS3 2个实用的鼠标悬停文本下划线动画效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：