React 有趣的水位式时针显示效果

Water filling Timer 本例需要支持mix-blend-mode: multiply属性。

React, timer

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

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

getInitialState: function getInitialState() {
        return this.getDate();
    },
    getDate: function getDate() {
        var newdate = new Date();
        var date = {};

date.hours = newdate.getHours();
        date.minutes = newdate.getMinutes();
        date.seconds = newdate.getSeconds();

return date;
    },
    updateDate: function updateDate() {
        this.setState(this.getDate());
    },
    renderDate: function renderDate() {
        var secondOffset = date.seconds / 60 * 100 + '%';
        var minuteOffset = date.minutes / 60 * 100 + '%';
        var hourOffset = date.hours / 24 * 100 + '%';

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

render: function render() {
        switch (this.props.type) {
            case 'hours':
                var measurement = 24;
                break;
            case 'minutes':
                var measurement = 60;
                break;
            case 'seconds':
                var measurement = 60;
                break;
        }

var offset = this.props.time / measurement * 100 + '%';
        var opacity = this.props.time / measurement * 100 / 100;

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

render: function render() {
        if (this.props.time < 10) {
            var time = '0' + this.props.time;
        } else {
            var time = this.props.time;
        }
        return React.createElement(
            'div', {
                className: this.props.type
            },
            time
        );
    }
});

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

编译

CSS

body {
    background: black;
    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;
    height: 100vh;
}
.App {
    width: 100vw;
    height: 156px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    background: #000000;
    position: relative;
    font-family: 'Oswald';
    font-weight: 700;
}
.text-overlay {
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 100%;
    color: white;
    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;
    font-size: 160px;
    box-sizing: border-box;
}
.text-overlay div {
    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;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    width: 25%;
}
.Column {
    height: 156px;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    position: relative;
    mix-blend-mode: multiply;
    z-index: 2;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.Marker {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #019CDF;
    opacity: 1;
    border-radius: 2px;
    overflow: hidden;
    -webkit-animation: hueylewisandthenews 10s infinite;
    animation: hueylewisandthenews 10s infinite;
}
.Marker--seconds {
    -webkit-transition: height 1s linear;
    transition: height 1s linear;
}
.Marker::before {
    height: 20px;
    width: calc(760px * 2);
    background-image: url(/uploads/160801/wave.jpg);
    position: absolute;
    top: 0px;
    content: '';
    -webkit-animation: wave 10s infinite linear;
    animation: wave 10s infinite linear;
}
@-webkit-keyframes wave {
    0% {
        left: 0;
    }
    100% {
        left: -760px;
    }
}
@keyframes wave {
    0% {
        left: 0;
    }
    100% {
        left: -760px;
    }
}
@-webkit-keyframes hueylewisandthenews {
    0% {
        -webkit-filter: hue-rotate(0deg);
        filter: hue-rotate(0deg);
    }
    50% {
        -webkit-filter: hue-rotate(-30deg);
        filter: hue-rotate(-30deg);
    }
    100% {
        -webkit-filter: hue-rotate(0deg);
        filter: hue-rotate(0deg);
    }
}
@keyframes hueylewisandthenews {
    0% {
        -webkit-filter: hue-rotate(0deg);
        filter: hue-rotate(0deg);
    }
    50% {
        -webkit-filter: hue-rotate(-30deg);
        filter: hue-rotate(-30deg);
    }
    100% {
        -webkit-filter: hue-rotate(0deg);
        filter: hue-rotate(0deg);
    }
}

HTML

Water filling Timer 本例需要支持mix-blend-mode: multiply属性。

React, timer

编辑器支持Emmet

快捷键

Water filling Timer 本例需要支持mix-blend-mode: multiply属性。

React, timer

很棒的一款React.js垂直式显示的幻灯片组件

React.js 可拖放文件的上传表单（支持多文件和进度显示）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：