React.js 日/夜动态转换式开关效果

React On/Off Toggle Switch

React.js

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var Switch = React.createClass({
    displayName: 'Switch',

getInitialState: function getInitialState() {
        return {
            time: 'night'
        };
    },
    handleClick: function handleClick() {
        if (this.state.time === 'night') {
            this.setState({
                time: 'day'
            });
        } else {
            this.setState({
                time: 'night'
            });
        }
    },
    render: function render() {
        return React.createElement(
            'div', {
                className: 'Switch',
                'data-time': this.state.time
            },
            React.createElement(Toggle, {
                onClick: this.handleClick,
                time: this.state.time
            })
        );
    }
});

var Toggle = React.createClass({
    displayName: 'Toggle',

render: function render() {
        return React.createElement(
            'div', {
                onClick: this.props.onClick,
                'data-time': this.props.time,
                className: 'Toggle'
            },
            React.createElement(Button, null)
        );
    }
});

var Button = React.createClass({
    displayName: 'Button',

render: function render() {
        return React.createElement('div', {
            className: 'Button'
        });
    }
});

ReactDOM.render(React.createElement(Switch, null), document.getElementById('switch'));

编译

CSS

.Switch {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #121212;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.Switch::before {
    height: 1000vh;
    width: 100vw;
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    background: -webkit-linear-gradient(top, #111c2b 0%, #353782 12%, #ff6687 28%, #ffb959 45%, #87e0fd 72%, #53cbf1 87%, #05abe0 100%);
    background: linear-gradient(to bottom, #111c2b 0%, #353782 12%, #ff6687 28%, #ffb959 45%, #87e0fd 72%, #53cbf1 87%, #05abe0 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#111c2b', endColorstr='#05abe0', GradientType=0);
    /* IE6-9 */
    
    -webkit-transition: top 2.5s ease;
    transition: top 2.5s ease;
}
.Switch[data-time="day"]::before {
    top: -900vh;
}
.Switch .Toggle {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 200px;
    height: 100px;
    border: 5px solid rgba(252, 250, 250, 0.125);
    background: rgba(252, 250, 250, 0.05);
    padding: 20px;
    position: relative;
    border-radius: 200px;
}
.Switch .Toggle[data-time='day'] .Button {
    left: 120px;
    box-shadow: 0 0 10px 10px #FB5607;
    border: 1px solid #fb5607 !important;
    top: 25px;
}
.Switch .Toggle[data-time='day'] .Button::before {
    opacity: 1;
}
.Switch .Toggle .Button {
    height: 90px;
    width: 90px;
    background: yellow;
    border-radius: 200px;
    position: absolute;
    pointer-events: none;
    top: 20px;
    left: 20px;
    -webkit-transition: left 2.5s ease, box-shadow 2.5s ease, border 2.5s ease, top 2.5s ease;
    transition: left 2.5s ease, box-shadow 2.5s ease, border 2.5s ease, top 2.5s ease;
    background: #EDDDD4;
    /* Old browsers */
    
    background: -webkit-linear-gradient(315deg, #edddd4 0%, #fcfafa 50%, #edddd4 51%, #fcfafa 100%);
    background: linear-gradient(135deg, #edddd4 0%, #fcfafa 50%, #edddd4 51%, #fcfafa 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
    
    box-shadow: 0 0 25px 5px #EDDDD4;
    border: 5px solid rgba(237, 221, 212, 0.5);
}
.Switch .Toggle .Button::before {
    content: '';
    height: 99px;
    width: 99px;
    background: red;
    top: -5px;
    left: -5px;
    position: absolute;
    border-radius: 200px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fefcea+0,f1da36+100;Gold+3D */
    
    background: #FFFFFF;
    /* Old browsers */
    
    background: -webkit-radial-gradient(center ellipse, #ffffff 0%, #ffbe0b 50%, #fb5607 100%);
    background: radial-gradient(ellipse at center, #ffffff 0%, #ffbe0b 50%, #fb5607 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
    
    -webkit-transition: opacity 2.5s ease;
    transition: opacity 2.5s ease;
    opacity: 0;
}

HTML

React On/Off Toggle Switch

React.js

编辑器支持Emmet

快捷键

React On/Off Toggle Switch

React.js

React.js GIF动画图片搜索

React.js iPod交互动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：