使用Angular实现可定制涟漪波动动画

Customizable ripples with angular

angular, pulse

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var PageApp = angular.module('angularPageApp', ['ngSanitize']);

PageApp.directive('rippleCircle', function($timeout) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            color: '@',
            size: '@',
            speed: '@'
        },
        controller: function($scope) {
            // defaults
            $scope.colorIndex = '1';
            $scope.size = 1;
            $scope.speed = 0.6;
            $scope.width = 5;
            $scope.height = 5;

$scope.applySettings = function(element) {
                var $el = angular.element(element);
                $el.css({
                    'animation-duration': [$scope.speed, 's'].join(''),
                    'font-size': [$scope.size, 'em'].join(''),
                    'width': [$scope.width, 'em'].join(''),
                    'height': [$scope.height, 'em'].join('')
                });
            };
        },
        template: '<div class="ripple-circle color_{{colorIndex}}"></div>',
        link: function(scope, element, attrs) {
            if (attrs.colorIndex) scope.colorIndex = attrs.colorIndex;
            if (attrs.size) scope.size = parseFloat(attrs.size);
            if (attrs.speed) scope.speed = parseFloat(attrs.speed);
            if (attrs.width) scope.width = parseFloat(attrs.width);
            if (attrs.height) scope.height = parseFloat(attrs.height);
            scope.applySettings(element[0]);
        }
    };
});

编译

CSS

*,
*::before,
*::after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fff;
    font-size: 62.5%;
}
@-webkit-keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@-moz-keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@-o-keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes ripple_1 {
    0% {
        box-shadow: 0 0 0 0 rgba(105, 105, 179, 0.3), 0 0 0 1em rgba(105, 105, 179, 0.3), 0 0 0 3em rgba(105, 105, 179, 0.3), 0 0 0 5em rgba(105, 105, 179, 0.3);
    }
    100% {
        box-shadow: 0 0 0 1em rgba(105, 105, 179, 0.3), 0 0 0 3em rgba(105, 105, 179, 0.3), 0 0 0 5em rgba(105, 105, 179, 0.3), 0 0 0 8em rgba(105, 105, 179, 0);
    }
}
@-moz-keyframes ripple_1 {
    0% {
        box-shadow: 0 0 0 0 rgba(105, 105, 179, 0.3), 0 0 0 1em rgba(105, 105, 179, 0.3), 0 0 0 3em rgba(105, 105, 179, 0.3), 0 0 0 5em rgba(105, 105, 179, 0.3);
    }
    100% {
        box-shadow: 0 0 0 1em rgba(105, 105, 179, 0.3), 0 0 0 3em rgba(105, 105, 179, 0.3), 0 0 0 5em rgba(105, 105, 179, 0.3), 0 0 0 8em rgba(105, 105, 179, 0);
    }
}
@-o-keyframes ripple_1 {
    0% {
        box-shadow: 0 0 0 0 rgba(105, 105, 179, 0.3), 0 0 0 1em rgba(105, 105, 179, 0.3), 0 0 0 3em rgba(105, 105, 179, 0.3), 0 0 0 5em rgba(105, 105, 179, 0.3);
    }
    100% {
        box-shadow: 0 0 0 1em rgba(105, 105, 179, 0.3), 0 0 0 3em rgba(105, 105, 179, 0.3), 0 0 0 5em rgba(105, 105, 179, 0.3), 0 0 0 8em rgba(105, 105, 179, 0);
    }
}
@keyframes ripple_1 {
    0% {
        box-shadow: 0 0 0 0 rgba(105, 105, 179, 0.3), 0 0 0 1em rgba(105, 105, 179, 0.3), 0 0 0 3em rgba(105, 105, 179, 0.3), 0 0 0 5em rgba(105, 105, 179, 0.3);
    }
    100% {
        box-shadow: 0 0 0 1em rgba(105, 105, 179, 0.3), 0 0 0 3em rgba(105, 105, 179, 0.3), 0 0 0 5em rgba(105, 105, 179, 0.3), 0 0 0 8em rgba(105, 105, 179, 0);
    }
}
@-webkit-keyframes ripple_2 {
    0% {
        box-shadow: 0 0 0 0 rgba(135, 1, 13, 0.3), 0 0 0 1em rgba(135, 1, 13, 0.3), 0 0 0 3em rgba(135, 1, 13, 0.3), 0 0 0 5em rgba(135, 1, 13, 0.3);
    }
    100% {
        box-shadow: 0 0 0 1em rgba(135, 1, 13, 0.3), 0 0 0 3em rgba(135, 1, 13, 0.3), 0 0 0 5em rgba(135, 1, 13, 0.3), 0 0 0 8em rgba(135, 1, 13, 0);
    }
}
@-moz-keyframes ripple_2 {
    0% {
        box-shadow: 0 0 0 0 rgba(135, 1, 13, 0.3), 0 0 0 1em rgba(135, 1, 13, 0.3), 0 0 0 3em rgba(135, 1, 13, 0.3), 0 0 0 5em rgba(135, 1, 13, 0.3);
    }
    100% {
        box-shadow: 0 0 0 1em rgba(135, 1, 13, 0.3), 0 0 0 3em rgba(135, 1, 13, 0.3), 0 0 0 5em rgba(135, 1, 13, 0.3), 0 0 0 8em rgba(135, 1, 13, 0);
    }
}
@-o-keyframes ripple_2 {
    0% {
        box-shadow: 0 0 0 0 rgba(135, 1, 13, 0.3), 0 0 0 1em rgba(135, 1, 13, 0.3), 0 0 0 3em rgba(135, 1, 13, 0.3), 0 0 0 5em rgba(135, 1, 13, 0.3);
    }
    100% {
        box-shadow: 0 0 0 1em rgba(135, 1, 13, 0.3), 0 0 0 3em rgba(135, 1, 13, 0.3), 0 0 0 5em rgba(135, 1, 13, 0.3), 0 0 0 8em rgba(135, 1, 13, 0);
    }
}
@keyframes ripple_2 {
    0% {
        box-shadow: 0 0 0 0 rgba(135, 1, 13, 0.3), 0 0 0 1em rgba(135, 1, 13, 0.3), 0 0 0 3em rgba(135, 1, 13, 0.3), 0 0 0 5em rgba(135, 1, 13, 0.3);
    }
    100% {
        box-shadow: 0 0 0 1em rgba(135, 1, 13, 0.3), 0 0 0 3em rgba(135, 1, 13, 0.3), 0 0 0 5em rgba(135, 1, 13, 0.3), 0 0 0 8em rgba(135, 1, 13, 0);
    }
}
@-webkit-keyframes ripple_3 {
    0% {
        box-shadow: 0 0 0 0 rgba(32, 54, 39, 0.3), 0 0 0 1em rgba(32, 54, 39, 0.3), 0 0 0 3em rgba(32, 54, 39, 0.3), 0 0 0 5em rgba(32, 54, 39, 0.3);
    }
    100% {
        box-shadow: 0 0 0 1em rgba(32, 54, 39, 0.3), 0 0 0 3em rgba(32, 54, 39, 0.3), 0 0 0 5em rgba(32, 54, 39, 0.3), 0 0 0 8em rgba(32, 54, 39, 0);
    }
}
@-moz-keyframes ripple_3 {
    0% {
        box-shadow: 0 0 0 0 rgba(32, 54, 39, 0.3), 0 0 0 1em rgba(32, 54, 39, 0.3), 0 0 0 3em rgba(32, 54, 39, 0.3), 0 0 0 5em rgba(32, 54, 39, 0.3);
    }
    100% {
        box-shadow: 0 0 0 1em rgba(32, 54, 39, 0.3), 0 0 0 3em rgba(32, 54, 39, 0.3), 0 0 0 5em rgba(32, 54, 39, 0.3), 0 0 0 8em rgba(32, 54, 39, 0);
    }
}
@-o-keyframes ripple_3 {
    0% {
        box-shadow: 0 0 0 0 rgba(32, 54, 39, 0.3), 0 0 0 1em rgba(32, 54, 39, 0.3), 0 0 0 3em rgba(32, 54, 39, 0.3), 0 0 0 5em rgba(32, 54, 39, 0.3);
    }
    100% {
        box-shadow: 0 0 0 1em rgba(32, 54, 39, 0.3), 0 0 0 3em rgba(32, 54, 39, 0.3), 0 0 0 5em rgba(32, 54, 39, 0.3), 0 0 0 8em rgba(32, 54, 39, 0);
    }
}
@keyframes ripple_3 {
    0% {
        box-shadow: 0 0 0 0 rgba(32, 54, 39, 0.3), 0 0 0 1em rgba(32, 54, 39, 0.3), 0 0 0 3em rgba(32, 54, 39, 0.3), 0 0 0 5em rgba(32, 54, 39, 0.3);
    }
    100% {
        box-shadow: 0 0 0 1em rgba(32, 54, 39, 0.3), 0 0 0 3em rgba(32, 54, 39, 0.3), 0 0 0 5em rgba(32, 54, 39, 0.3), 0 0 0 8em rgba(32, 54, 39, 0);
    }
}
@-webkit-keyframes ripple_4 {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 80, 162, 0.3), 0 0 0 1em rgba(239, 80, 162, 0.3), 0 0 0 3em rgba(239, 80, 162, 0.3), 0 0 0 5em rgba(239, 80, 162, 0.3);
    }
    100% {
        box-shadow: 0 0 0 1em rgba(239, 80, 162, 0.3), 0 0 0 3em rgba(239, 80, 162, 0.3), 0 0 0 5em rgba(239, 80, 162, 0.3), 0 0 0 8em rgba(239, 80, 162, 0);
    }
}
@-moz-keyframes ripple_4 {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 80, 162, 0.3), 0 0 0 1em rgba(239, 80, 162, 0.3), 0 0 0 3em rgba(239, 80, 162, 0.3), 0 0 0 5em rgba(239, 80, 162, 0.3);
    }
    100% {
        box-shadow: 0 0 0 1em rgba(239, 80, 162, 0.3), 0 0 0 3em rgba(239, 80, 162, 0.3), 0 0 0 5em rgba(239, 80, 162, 0.3), 0 0 0 8em rgba(239, 80, 162, 0);
    }
}
@-o-keyframes ripple_4 {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 80, 162, 0.3), 0 0 0 1em rgba(239, 80, 162, 0.3), 0 0 0 3em rgba(239, 80, 162, 0.3), 0 0 0 5em rgba(239, 80, 162, 0.3);
    }
    100% {
        box-shadow: 0 0 0 1em rgba(239, 80, 162, 0.3), 0 0 0 3em rgba(239, 80, 162, 0.3), 0 0 0 5em rgba(239, 80, 162, 0.3), 0 0 0 8em rgba(239, 80, 162, 0);
    }
}
@keyframes ripple_4 {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 80, 162, 0.3), 0 0 0 1em rgba(239, 80, 162, 0.3), 0 0 0 3em rgba(239, 80, 162, 0.3), 0 0 0 5em rgba(239, 80, 162, 0.3);
    }
    100% {
        box-shadow: 0 0 0 1em rgba(239, 80, 162, 0.3), 0 0 0 3em rgba(239, 80, 162, 0.3), 0 0 0 5em rgba(239, 80, 162, 0.3), 0 0 0 8em rgba(239, 80, 162, 0);
    }
}
.ripple-circle {
    width: 5em;
    height: 5em;
    margin: 10em auto;
    border-radius: 50%;
    animation: ripple_1 0.6s linear infinite;
}
.ripple-circle.color_1 {
    animation-name: ripple_1;
}
.ripple-circle.color_2 {
    animation-name: ripple_2;
}
.ripple-circle.color_3 {
    animation-name: ripple_3;
}
.ripple-circle.color_4 {
    animation-name: ripple_4;
}
.page-container {
    display: flex;
    flex-flow: column nowrap;
}

HTML

<div ng-app="angularPageApp" class="app-container">
    <div class="page-container">
        
        
        
        
        
        <ripple-circle color-index="2" size="0.2" speed="1.5" width="1" height="1"></ripple-circle>
        <ripple-circle color-index="3" size="0.9" speed="0.8" width="2.5" height="3"></ripple-circle>
        <ripple-circle>/* using defaults defined in angular controller */</ripple-circle>
        <ripple-circle color-index="4" size="1.2" speed="1.3"></ripple-circle>
    </div>
</div>

Customizable ripples with angular

angular, pulse

编辑器支持Emmet

快捷键

Customizable ripples with angular

angular, pulse

使用AngularJS实现的数学加减乘除可视化计算器

使用Angular.js实现自定义的Addthis社交分享插件界面和指令

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：