使用ReactJS创建的CSS3混合模式效果一览表

css3中的mix-blend-mode用来控制一个元素如何和其背景元素混合。共有16种模式，本例使用直观的方式展示这些模式的效果和异同。

css3, blend, mode

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";

var ColorPicker = React.createClass({
    displayName: "ColorPicker",
    render: function render() {
        var _this = this;

var _props = this.props;
        var color = _props.color;
        var onChange = _props.onChange;
        var name = _props.name;
        var active = _props.active;

if (active) {
            this._input.click();
        }
        var onChangeWrapped = function onChangeWrapped(event) {
            return onChange(name, event.target.value);
        };
        return React.createElement("input", {
            className: "color-picker",
            type: "color",
            onChange: onChangeWrapped,
            value: color,
            ref: function ref(input) {
                return _this._input = input;
            }
        });
    }
});

var App = React.createClass({
    displayName: "App",
    getInitialState: function getInitialState() {
        return {
            pickerActive: false,
            pickerTargetName: 'backgroundColor',
            backgroundColor: '#f1f1f1',
            leftColor: "#EB7F00",
            rightColor: "#225378"
        };
    },
    changeColor: function changeColor(name, color) {
        var _setState;

console.log(name, color);
        this.setState((_setState = {}, _setState[name] = color, _setState.pickerTargetName = name, _setState.pickerActive = false, _setState));
    },
    handleClick: function handleClick(name) {
        this.setState({
            pickerTargetName: name,
            pickerActive: true
        });
    },
    render: function render() {
        var _this2 = this;

return React.createElement(
            "div", {
                className: "app",
                onClick: this.clickHandler,
                style: {
                    backgroundColor: this.state.backgroundColor
                }
            },
            React.createElement(Header, {
                handleClick: this.handleClick
            }),
            React.createElement(ColorPicker, {
                onChange: this.changeColor,
                name: this.state.pickerTargetName,
                color: this.state[this.state.pickerTargetName],
                active: this.state.pickerActive
            }),
            React.createElement(
                "div", {
                    className: "modes"
                },
                blendModes.map(function(mode) {
                    return React.createElement(Container, {
                        mode: mode,
                        handleClick: _this2.handleClick,
                        leftColor: _this2.state.leftColor,
                        rightColor: _this2.state.rightColor
                    });
                })
            ),
            React.createElement(
                "div", {
                    className: "footer copy"
                },
                React.createElement(
                    "a", {
                        href: "http://codepen.io/chrisbolin"
                    },
                    "codepen.io/chrisbolin"
                ),
                ' | ',
                React.createElement(
                    "a", {
                        href: "http://twitter.com/bolinchris"
                    },
                    "@bolinchris"
                ),
                ' | ',
                "apologies to ",
                React.createElement(
                    "a", {
                        href: "https://www.youtube.com/watch?v=lAl28d6tbko"
                    },
                    "blendtec"
                )
            )
        );
    }
});

var Container = function Container(_ref) {
    var mode = _ref.mode;
    var rightColor = _ref.rightColor;
    var leftColor = _ref.leftColor;
    var handleClick = _ref.handleClick;

return React.createElement(
        "div", {
            className: "container"
        },
        React.createElement("div", {
            className: "circle right",
            onClick: handleClick.bind(null, 'rightColor'),
            style: {
                backgroundColor: rightColor
            }
        }),
        React.createElement("div", {
            className: "circle left",
            onClick: handleClick.bind(null, 'leftColor'),
            style: {
                mixBlendMode: mode,
                backgroundColor: leftColor
            }
        }),
        React.createElement(
            "div", {
                className: "label"
            },
            mode
        )
    );
};

var Header = function Header(_ref2) {
    var handleClick = _ref2.handleClick;

return React.createElement(
        "div", {
            className: "header"
        },
        React.createElement(
            "div", {
                className: "title"
            },
            "How Will it Blend?"
        ),
        React.createElement(
            "div", {
                className: "copy"
            },
            "The CSS property ",
            React.createElement(
                "a", {
                    target: "_blank",
                    href: "https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode"
                },
                "mix-blend-mode"
            ),
            " controls how an element blends into elements behind it. All 16 blend modes are show below, and apply to the ",
            React.createElement(
                "a", {
                    href: "#",
                    onClick: handleClick.bind(null, 'leftColor')
                },
                "left circle"
            ),
            ", which overlaps with the ",
            React.createElement(
                "a", {
                    href: "#",
                    onClick: handleClick.bind(null, 'rightColor')
                },
                "right circle"
            ),
            " and the ",
            React.createElement(
                "a", {
                    href: "#",
                    onClick: handleClick.bind(null, 'backgroundColor')
                },
                "background"
            ),
            "."
        )
    );
};

var blendModes = ['normal', 'overlay', 'exclusion', 'hard-light', 'soft-light', 'screen', 'difference', 'color-dodge', 'color-burn', 'multiply', 'hue', 'saturation', 'darken', 'lighten', 'color', 'luminosity'];

ReactDOM.render(React.createElement(App, null), document.getElementById('target'));

编译

CSS

@import "https://fonts.googleapis.com/css?family=Hind+Madurai|Rakkas";
body {
    font-family: Hind Madurai;
    font-size: 2.8vmin;
}
.app {
    width: 100vw;
    min-height: 100vh;
}
.modes {
    width: 100vmin;
    margin: auto;
}
.container {
    padding: 4vmin;
    margin-bottom: 7vmin;
    display: inline-block;
    height: 16.66vmin;
    width: 24.99vmin;
    position: relative;
}
.circle {
    padding: 8.33vmin;
    border-radius: 8.33vmin;
    width: 0;
    cursor: pointer;
}
.right {
    background-color: blue;
    position: relative;
    left: 8.33vmin;
}
.left {
    background-color: orange;
    position: relative;
    top: -16.66vmin;
}
.label {
    width: 33.32vmin;
    position: absolute;
    bottom: -2vmin;
    left: 0;
    text-align: center;
}
.header .title {
    width: 70vmin;
    margin: auto;
    font-family: Rakkas;
    font-size: 9vmin;
    text-align: center;
    border-bottom: 0.8vmin solid black;
    margin-bottom: 6vmin;
    padding-top: 10vmin;
    line-height: 8vmin;
}
.copy {
    width: 92vmin;
    margin: auto;
    padding-bottom: 5vmin;
}
.footer {
    text-align: center;
}
.color-picker {
    position: fixed;
    opacity: 0;
    top: -100px;
}
a {
    color: inherit;
}
a:hover {
    opacity: 0.5;
}

HTML

css3中的mix-blend-mode用来控制一个元素如何和其背景元素混合。共有16种模式，本例使用直观的方式展示这些模式的效果和异同。

css3, blend, mode

编辑器支持Emmet

快捷键

css3中的mix-blend-mode用来控制一个元素如何和其背景元素混合。共有16种模式，本例使用直观的方式展示这些模式的效果和异同。

css3, blend, mode

使用CSS3构建的React框架的图标

使用CSS3滤镜/合成模式和伪元素实现仿Spotify网站风格的图像双色特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：