CSS3 波动的点阵

Dot Wave with CSS Animations

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

function _defineProperty(obj, key, value) {
    return Object.defineProperty(obj, key, {
        value: value,
        enumerable: true,
        configurable: true,
        writable: true
    });
}

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError('Cannot call a class as a function');
    }
}

var Application = (function(_React$Component) {
    function Application() {
        _classCallCheck(this, Application);

_get(Object.getPrototypeOf(Application.prototype), 'constructor', this).call(this);
        this.state = {
            ratio: 1,
            dotCount: 10,
            circleSize: 5,
            pathRadius: 10
        };
    }

_inherits(Application, _React$Component);

_createClass(Application, [{
        key: 'componentDidMount',
        value: function componentDidMount() {
            window.addEventListener('resize', this._updateRatio.bind(this));
            this._updateRatio();
        }
    }, {
        key: '_updateSetting',
        value: function _updateSetting(setting, evt) {
            this.setState(_defineProperty({}, setting, evt.target.value));
        }
    }, {
        key: '_updateRatio',
        value: function _updateRatio() {
            console.log('resized');
            this.setState({
                ratio: window.innerWidth / window.innerHeight
            });
        }
    }, {
        key: 'render',
        value: function render() {
            var isLandscape = this.state.ratio > 1;
            var orientation = isLandscape ? 'vw' : 'vh';
            var wrapperStyles = {
                left: '-' + this.state.pathRadius / 1.5 + '' + orientation,
                top: '-' + this.state.pathRadius / 1.5 + '' + orientation
            };
            return React.createElement(
                'div',
                null,
                React.createElement(
                    'div', {
                        className: 'Circles_Wrapper'
                    },
                    React.createElement(
                        'div', {
                            className: 'Circles',
                            style: wrapperStyles
                        },
                        this._renderCircles()
                    )
                ),
                React.createElement(
                    'div', {
                        className: 'Settings'
                    },
                    React.createElement(
                        'input', {
                            type: 'range',
                            min: 0,
                            max: 10,
                            value: this.state.pathRadius,
                            onChange: this._updateSetting.bind(this, 'pathRadius'),
                            className: 'Setting_Option'
                        },
                        React.createElement(
                            'label',
                            null,
                            'Path Radius'
                        )
                    ),
                    React.createElement(
                        'input', {
                            type: 'range',
                            min: 0,
                            max: 10,
                            value: this.state.circleSize,
                            onChange: this._updateSetting.bind(this, 'circleSize'),
                            className: 'Setting_Option'
                        },
                        React.createElement(
                            'label',
                            null,
                            'Circle Radius'
                        )
                    )
                )
            );
        }
    }, {
        key: '_renderCircles',
        value: function _renderCircles() {
            var _state = this.state;
            var ratio = _state.ratio;
            var dotCount = _state.dotCount;
            var pathRadius = _state.pathRadius;
            var circleSize = _state.circleSize;

return Application;
})(React.Component);

/*
 * Render the above component into the div#app
 */
React.render(React.createElement(Application, null), document.getElementById('app'));

编译

CSS

body {
    color: blue;
    font-family: sans-serif;
    padding: 0;
    background: #222;
    margin: 0;
    overflow: hidden;
}
.Settings {
    position: absolute;
    background: green;
    top: 0;
    left: 0;
}
.Circles {
    position: relative;
    width: 100vw;
    height: 100vh;
    opacity: 0.5;
}
.Circle {
    -webkit-animation: circleSpin 6s linear 0s infinite;
    animation: circleSpin 6s linear 0s infinite;
    left: 0;
    top: 0;
    position: absolute;
}
.Circle_Fill {
    background-color: #000;
    -webkit-animation: circleScale 8s linear 0s infinite;
    animation: circleScale 8s linear 0s infinite;
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
}
@-webkit-keyframes circleScale {
    0% {
        -webkit-transform: translateZ(0) scale(1);
        transform: translateZ(0) scale(1);
    }
    50% {
        -webkit-transform: translateZ(0) scale(0.8);
        transform: translateZ(0) scale(0.8);
    }
    100% {
        -webkit-transform: translateZ(0) scale(1);
        transform: translateZ(0) scale(1);
    }
}
@keyframes circleScale {
    0% {
        -webkit-transform: translateZ(0) scale(1);
        transform: translateZ(0) scale(1);
    }
    50% {
        -webkit-transform: translateZ(0) scale(0.8);
        transform: translateZ(0) scale(0.8);
    }
    100% {
        -webkit-transform: translateZ(0) scale(1);
        transform: translateZ(0) scale(1);
    }
}
@-webkit-keyframes circleSpin {
    0% {
        -webkit-transform: translateZ(0) rotate(0deg);
        transform: translateZ(0) rotate(0deg);
    }
    100% {
        -webkit-transform: translateZ(0) rotate(360deg);
        transform: translateZ(0) rotate(360deg);
    }
}
@keyframes circleSpin {
    0% {
        -webkit-transform: translateZ(0) rotate(0deg);
        transform: translateZ(0) rotate(0deg);
    }
    100% {
        -webkit-transform: translateZ(0) rotate(360deg);
        transform: translateZ(0) rotate(360deg);
    }
}

HTML

Dot Wave with CSS Animations

编辑器支持Emmet

快捷键

Dot Wave with CSS Animations

CSS3 发送留言的动效页面的UI模板

HTML5 CSS3一款很棒的文本溶解过渡动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：