演示 `-webkit-box-reflect` 是怎么工作的

how `-webkit-box-reflect` works 你可以点击预览窗口的CSS代码，来通过滑杆调整样式值。

CSS3, SVG, JavaScript

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var $ = document;

var $$ = function $$(sel) {
	var arr;

if (sel.charAt('0') === '#' && sel.indexOf(' ') < 0) {
		return $.getElementById(sel.replace('#', ''));
	}

arr = [].slice.call($.querySelectorAll(sel));
	if (arr.length < 2) arr = arr[0];
	return arr;
};

Object.getOwnPropertyNames(Math).map(function (p) {
	window[p] = Math[p];
});

var rand = function rand() {
	var max = arguments.length <= 0 || arguments[0] === undefined ? 1 : arguments[0];
	var min = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];

var _int = arguments.length <= 2 || arguments[2] === undefined ? 0 : arguments[2];

var gen = min + (max - min) * random();
	return _int ? round(gen) : gen;
};

Node.prototype._attr = function (a) {
	if (typeof a === 'string') return this.getAttribute(a);else {
		for (var p in a) {
			this.setAttribute(p, a[p]);
		}
	}
};

Node.prototype._add = function (content, before, tag, classes, dataset, ns) {
	var node, n;

node = tag ? ns ? $.createElementNS(ns, tag) : $.createElement(tag) : $.createTextNode(content);

if (tag) {
		if (classes) {
			n = classes.length;

while (n--) {
				node.classList.add(classes[n]);
			}
		}
		if (content || content === 0) node.textContent = content;
		if (dataset) node._attr(dataset);
	}

if (typeof before === 'number') this.insertBefore(node, before);else this.appendChild(node);

return node;
};

var svg, refl;

var Param = function Param(rt, name) {
    var trig, form, v, range, m;

this.select = function() {
        trig.classList.toggle('hl');
        form.classList.toggle('hidden');
    };

this.update = function(value) {
        if (value) {
            if (this.olist) v.textContent = this.value = value;
            else {
                v.textContent = this.value = 1 * (m * value + '').substring(0, 4);
            }
        }
    };

var update = function update() {
        rt.update(name, range.value);
    };

this.init = function() {
        var base, sel, o;

this.name = name;
        this.rt = rt;
        m = this.name.indexOf('alpha') > -1 ? .01 : 1;

base = '#' + this.name;
        trig = $$(base);
        sel = base + ' .popup';
        form = $$(sel);
        sel = base + ' .val';
        v = $$(sel);
        this.value = v.textContent;

sel = base + ' [type=radio] + label';
        o = $$(sel);

if (o) {
            this.olist = o.map(function(c) {
                return c.textContent;
            });
        } else this.value *= m;

sel = base + ' [type=range]';
        range = $$(sel);
    };

this.init();

if (range) {
        range.addEventListener('input', update, false);
        range.addEventListener('update', update, false);
    }
};

var Reflection = function Reflection(oID, mtype) {
    this.select = function(name) {
        if (this.active !== name) {
            if (this.active) this.params[this.active].select();

name = this.params[name] ? name : null;
            this.active = name;

if (name) this.params[this.active].select();
        }
    };

this.updateDir = function(value) {
        var olist, i, j, k, sgn, ct, tv, sf, x, y;

olist = this.params.dir.olist;

if (olist) {
            i = olist.indexOf(value);

if (i > -1) {
                j = i % 2;
                k = ~~(.5 * i);
                sgn = pow(-1, j);
                ct = -.5 * this.rels;
                sf = [pow(-1, k), pow(-1, k + 1)];
                tv = 'scale(v)'.replace('v', sf.join(' '));
                x = (1 + k * sgn) * ct;
                y = (1 + (1 - k) * sgn) * ct;

this.orig._attr({
                    'x': x + '%',
                    'y': y + '%'
                });
                this.refl._attr({
                    'transform': tv
                });
            }
        }
    };

this.updateOff = function(value) {
        var dirv = this.params.dir.value,
            olist = this.params.dir.olist,
            i,
            j,
            k,
            sgn,
            x,
            y;

if (olist) {
            i = olist.indexOf(dirv);

if (i > -1) {
                j = i % 2;
                k = ~~(.5 * i);
                sgn = pow(-1, j);
                x = -k * sgn * value;
                y = (k - 1) * sgn * value;
                this.refl._attr({
                    'x': x,
                    'y': y
                });
            }
        }
    };

this.updateAng = function(value) {
        this.grd._attr({
            'gradientTransform': 'rotate(v .5 .5)'.replace('v', value)
        });
    };

this.updateAlpha = function(i, value) {
        this.stops[i]._attr({
            'stop-opacity': .01 * value
        });
    };

this.updatePos = function(i, value) {
        this.stops[i]._attr({
            'offset': value + '%'
        });
    };

this.update = function(name, value) {
        var i;

this.params[name].update(value);

if (name === 'dir') {
            this.updateDir(value);
            this.updateOff(this.params.off.value);
        }
        if (name === 'off') this.updateOff(value);
        if (name === 'ang') this.updateAng(value);
        if (name.indexOf('alpha') === 0) {
            i = ~~name.split('alpha')[1];
            this.updateAlpha(i, value);
        }
        if (name.indexOf('pos') === 0) {
            i = ~~name.split('pos')[1];
            this.updatePos(i, value);
        }
    };

this.init = function() {
        var pnames = ['dir', 'off'],
            n,
            ns;

this.orig = $$('#' + oID);
        this.rels = ~~this.orig._attr('width').split('%')[0];
        this.refl = $$('[*|href="#' + oID + '"]');
        this.active = null;
        this.params = {};

if (mtype.indexOf('g') === 1) {
            this.grd = $$('#' + mtype);
            this.stops = $$('stop');
            ns = this.stops.length;

if (mtype === 'lg') pnames.push('ang');

for (var i = 0; i < ns; i++) {
 pnames.push('alpha' + i, 'pos' + i);
 }
 }

n = pnames.length;
 for (var i = 0; i < n; i++) {
 this.params[pnames[i]] = new Param(this, pnames[i]);
 }
 };

this.init();
};

var size = function size() {
    var s = getComputedStyle(svg),
        w = ~~s.width.split('px')[0],
        h = ~~s.height.split('px')[0],
        x = -.5 * w,
        y = -.5 * h;

svg._attr({
        'viewBox': [x, y, w, h].join(' ')
    });
};

var trigger = function trigger(el) {
    var n = 3;

while (n--) {
        if (el && el.classList && el.classList.contains('trigger')) return el;
        el = el && el.parentNode ? el.parentNode : null;
    }

return null;
};

(function init() {
    svg = $$('svg');
    size();

refl = new Reflection('img', 'lg', 2);
})();

addEventListener('resize', size, false);

addEventListener('click', function(e) {
    var tg = e.target;

if (tg.tagName.toLowerCase() === 'label') {
        if (trigger(tg).id === 'dir') refl.update(trigger(tg).id, tg.textContent);
    }

tg = trigger(tg);
    if (tg) refl.select(tg.id);
    else refl.select(null);
}, false);

addEventListener('keyup', function(e) {
    var tg;

if (e.keyCode === 9) {
        tg = trigger($.activeElement);
        if (tg) refl.select(tg.id);
        else refl.select(null);
    }
}, false);

编译

CSS

* {
    margin: 0;
    padding: 0;
    font: inherit;
}
html {
    overflow: hidden;
    min-width: 160px;
    height: 100vh;
    background: repeating-linear-gradient(45deg, khaki 0, khaki 3px, tan 4px, tan 7px, khaki 8px);
    font: 0.625em/ 1.5 courier, monospace;
}
body {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
/* ======= GRAPHICAL PART ======== */

svg {
    flex-grow: 1;
}
image {
    filter: grayscale(1);
}
/* ======= CODE PART ======== */

pre {
    padding: .25em;
    background: rgba(0, 0, 0, 0.9);
    color: #eee;
}
[class*='token']:not(.trigger),
.curr {
    display: inline-block;
    padding: 0 .25em;
    border-radius: 3px;
}
.br {
    color: transparent;
}
.br:before {
    content: '\A_0';
}
.br:nth-of-type(-n + 2):before {
    content: '\A_';
}
.trigger {
    position: relative;
}
.hl {
    z-index: 2;
}
.curr {
    cursor: pointer;
}
:hover > .curr {
    background: #e18728;
}
.hl .curr {
    box-shadow: 0 0 2px 2px #e18728;
}
/* ------- Editing menus ------- */

.popup {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 0.375em;
    padding: .5em;
    border-radius: 3px;
    transform: translate(-50%);
    background: rgba(0, 0, 0, 0.9);
    white-space: normal;
}
.popup * {
    display: block;
}
.hidden {
    opacity: .001;
    pointer-events: none;
}
input[type='radio'] {
    position: absolute;
    opacity: .001;
    pointer-events: none;
}
input[type='radio'] + label {
    margin: .25em 0;
    padding: 0 .25em .25em 0;
    white-space: nowrap;
    cursor: pointer;
}
input[type='radio'] + label:before {
    box-sizing: border-box;
    display: inline-block;
    margin: 0 .5em 0 .25em;
    border: solid 2px #eee;
    padding: 3px;
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    background: transparent content-box;
    vertical-align: middle;
    content: '';
}
input[type='radio']:focus + label {
    outline: solid 2px #e18728;
}
input[type='radio']:checked + label {
    color: #e18728;
}
input[type='radio']:checked + label:before {
    background-color: #e18728;
}
input[type='range'] {
    border: solid 0 transparent;
    border-width: 0.5em;
    width: 8em;
    height: 1.5em;
    background: transparent;
    cursor: pointer;
}
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb,
input[type='range'] {
    -webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
    width: 8em;
    height: 0.25em;
    background: #eee;
}
input[type='range']::-moz-range-track {
    width: 8em;
    height: 0.25em;
    background: #eee;
}
input[type='range']::-ms-track {
    color: transparent;
    width: 8em;
    height: 0.25em;
    background: #eee;
}
input[type='range']::-moz-range-progress {
    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']:focus {
    outline: solid 2px #e18728;
}
input[type='range'] + label {
    margin-top: .375em;
    text-align: center;
}
@media (min-width: 15em) {
    html {
        font-size: 0.875em;
    }
    pre {
        padding: .25em .5em;
    }
}
@media (min-width: 20em) {
    html {
        font-size: 1em;
    }
    .curr {
        padding: 0 .5em;
    }
    .br:before {
        content: '\A_012';
    }
    .br:nth-of-type(-n + 2):before {
        content: "\a_0";
    }
}
@media (min-width: 25em) {
    .br:first-of-type:before {
        content: initial;
    }
}
@media (min-width: 40em) {
    .br:nth-of-type(4):before {
        content: initial;
    }
}
@media (min-width: 56em) {
    .br:nth-of-type(3):before {
        content: initial;
    }
}
@media (min-width: 75em) {
    .br:nth-of-type(2):before {
        content: initial;
    }
}

HTML

<pre><code>-webkit-box-reflect: below
 <input type="radio" name="o" id="o0" checked="checked"/>
 <label for="o0">below</label>
 <input type="radio" name="o" id="o1"/>
 <label for="o1">above</label>
 <input type="radio" name="o" id="o2"/>
 <label for="o2">right</label>
 <input type="radio" name="o" id="o3"/>
 <label for="o3">left</label> 0px
 <input type="range" id="off" value="0"/>
 <label for="off">offset</label> linear-gradient(180deg
 <input type="range" id="ang" max="360"/>
 <label for="ang">direction</label>, rgba(#fff, 0
 <input type="range" id="alpha0" value="0"/>
 <label for="alpha0">stop alpha</label>) 0%
 <input type="range" id="pos0" value="0"/>
 <label for="pos0">stop position</label>, rgba(#fff, 1
 <input type="range" id="alpha1" value="100"/>
 <label for="alpha1">stop alpha</label>) 100%
 <input type="range" id="pos1" value="100"/>
 <label for="pos1">stop position</label>);</code></pre>
<svg>
 <linearGradient id="lg" x1="50%" y1="100%" x2="50%" y2="0%" gradientTransform="rotate(180 .5 .5)">
 <stop offset="0%" stop-color="#fff" stop-opacity="0"></stop>
 <stop offset="100%" stop-color="#fff" stop-opacity="1"></stop>
 </linearGradient>
 <mask id="m" maskContentUnits="objectBoundingBox">
 <rect width="1" height="1" fill="url(#lg)"></rect>
 </mask>
 <image id="img" x="-20%" y="-40%" width="40%" height="40%" preserveAspectRatio="xMidYMid slice" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Siberian_tiger_cub_Amneville_Zoo.jpg/320px-Siberian_tiger_cub_Amneville_Zoo.jpg"></image>
 <use xlink:href="#img" y="0" transform="scale(1 -1)" mask="url(#m)"></use>
</svg>

how `-webkit-box-reflect` works 你可以点击预览窗口的CSS代码，来通过滑杆调整样式值。

CSS3, SVG, JavaScript

编辑器支持Emmet

快捷键

how `-webkit-box-reflect` works 你可以点击预览窗口的CSS代码，来通过滑杆调整样式值。

CSS3, SVG, JavaScript

使用-webkit-box-reflect实现的带倒影特效的图文卡片

使用H5动画演示CSS3变换原点（transform-origin）工作原理

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：