使用AngularJS构建的CSS过滤器效果演示应用

CSS Filter Effects Demo app with angular. 使用左右对比的方式演示CSS3滤镜特效，可以拖拉中间轴来调整左右窗口比例。经典的图片对比布局。不错的一款AngularJS应用。

angular, app

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import "https://fonts.googleapis.com/css?family=Galada";
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
    display: none !important;
}
* {
    outline: none;
}
body,
html {
    width: 100%;
    height: 100%;
}
body {
    background-color: #151d4a;
    background: linear-gradient(-45deg, #0a0d22, #151d4a, #0a0d22);
    padding: 0;
    margin: 0;
    font-family: "Galada", cursive;
}
.centered,
.content,
.content .thumbnails .thumb:after,
.ui-resizable .ui-resizable-e:after {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.grab,
.ui-resizable .ui-resizable-e:after {
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab;
}
.grabbing,
.ui-resizable.ui-resizable-resizing .ui-resizable-e:after,
.ui-resizable.ui-resizable-resizing .ui-resizable-e {
    cursor: move;
    cursor: -webkit-grabbing;
    cursor: grabbing;
}
.grayscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.hue-rotate {
    -webkit-filter: hue-rotate(90deg);
    filter: hue-rotate(90deg);
}
.brightness {
    -webkit-filter: brightness(200%);
    filter: brightness(200%);
}
.invert {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}
.saturate {
    -webkit-filter: saturate(500%);
    filter: saturate(500%);
}
.contrast {
    -webkit-filter: contrast(200%);
    filter: contrast(200%);
}
.sepia {
    -webkit-filter: sepia(100%);
    filter: sepia(100%);
}
.content {
    width: 800px;
    height: 610px;
}
.content .new-url {
    height: 30px;
    overflow: hidden;
}
.content .new-url input[type="text"] {
    width: 800px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 0;
    padding: 7px;
    margin: 0 5px;
    border-radius: 3px;
    color: rgba(233, 30, 99, 0.5);
    font-family: "Galada", cursive;
}
.content .new-url input[type="text"]:focus {
    color: #E91E63;
}
.content .thumbnails {
    height: 100px;
    width: 800px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.content .thumbnails .thumb {
    width: calc(100% / 7);
    height: 80px;
    padding: 0;
    border: none;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.3);
    margin: 10px 4px;
    cursor: pointer;
    position: relative;
    border-radius: 3px;
}
.content .thumbnails .thumb:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.content .thumbnails .thumb.selected {
    background-color: #E91E63;
}
.content .thumbnails .thumb.selected:after {
    border-top: 3px solid #E91E63;
}
.content .thumbnails .thumb:after {
    content: "";
    bottom: -3px;
    top: initial;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 3px solid transparent;
    width: 0;
    height: 0;
}
.content .thumbnails .thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 3px;
}
.content .box {
    width: 800px;
    height: 450px;
    border-radius: 3px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    position: relative;
    background-color: rgba(0, 0, 0, 0.3);
}
.content .box .old,
.content .box .new {
    position: absolute;
    left: 0;
    top: 0;
    height: 450px;
}
.content .box .old img,
.content .box .new img {
    border-radius: 3px;
    height: 450px;
    width: 800px;
    object-fit: cover;
}
.content .box .new {
    width: 400px;
}
.content .box .new .img {
    width: 100%;
    overflow: hidden;
}
.content .box .description {
    position: absolute;
    left: 20px;
    top: 20px;
    color: #fff;
    z-index: 2;
    margin: 0;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4), 1px 1px 20px black;
    font-weight: normal;
    line-height: 28px;
}
.content .info {
    width: 800px;
    height: 30px;
    text-align: center;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.6);
}
.content .info a {
    color: rgba(255, 255, 255, 0.2);
    text-decoration: none;
}
.ui-resizable .ui-resizable-e {
    background-color: rgba(0, 0, 0, 0.8);
    right: -2px;
    width: 4px;
    margin: 0;
    height: 450px;
    cursor: default;
}
.ui-resizable .ui-resizable-e:after {
    content: "";
    left: -4px;
    width: 12px;
    height: 40px;
    background-color: #E91E63;
    border-radius: 15px;
}
.load-circle {
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.2);
    border-top-color: white;
    border-style: solid;
    border-radius: 50%;
    animation: circRotate .6s infinite linear;
    width: 16px;
    height: 16px;
    position: absolute;
    right: 20px;
    top: 20px;
}
@keyframes circRotate {
    to {
        transform: rotate(360deg);
    }
}

HTML

<body>
    <div class="content" ng-controller="ctrlThumb" ng-cloak>
        <div class="new-url">
            <input type="text" name="urlImage" placeholder="type the correct url" ng-model="urlImage">
        </div>
        <div class="thumbnails">
            <button class="thumb" ng-class="{'selected' : classApply == 'grayscale'}" ng-click="classApply = 'grayscale'">
                <img class="grayscale" src="{{urlImage}}" alt="" />
            </button>
            <button class="thumb" ng-class="{'selected' : classApply == 'hue-rotate'}" ng-click="classApply = 'hue-rotate'">
                <img class="hue-rotate" src="{{urlImage}}" alt="" />
            </button>
            <button class="thumb" ng-class="{'selected' : classApply == 'brightness'}" ng-click="classApply = 'brightness'">
                <img class="brightness" src="{{urlImage}}" alt="" />
            </button>
            <button class="thumb" ng-class="{'selected' : classApply == 'invert'}" ng-click="classApply = 'invert'">
                <img class="invert" src="{{urlImage}}" alt="" />
            </button>
            <button class="thumb" ng-class="{'selected' : classApply == 'saturate'}" ng-click="classApply = 'saturate'">
                <img class="saturate" src="{{urlImage}}" alt="" />
            </button>
            <button class="thumb" ng-class="{'selected' : classApply == 'contrast'}" ng-click="classApply = 'contrast'">
                <img class="contrast" src="{{urlImage}}" alt="" />
            </button>
            <button class="thumb" ng-class="{'selected' : classApply == 'sepia'}" ng-click="classApply = 'sepia'">
                <img class="sepia" src="{{urlImage}}" alt="" />
            </button>
        </div>
        <div class="box">
            <div class="load-circle"></div>
            <h1 class="description">{{classApply}}</h1>
            <div class="old">
                <img src="{{urlImage}}" alt="" />
            </div>
            <div id="resizable" class="new">
                <div class="img" ng-class="classApply">
                    <img src="{{urlImage}}" alt="" />
                </div>
            </div>
        </div>
    </div>
    <script src='https://code.jquery.com/ui/1.12.0/jquery-ui.js'></script>
    <script src="https://wow.techbrood.com/libs/angular/angular.min.js"></script>

</body>

</html>

CSS Filter Effects Demo app with angular. 使用左右对比的方式演示CSS3滤镜特效，可以拖拉中间轴来调整左右窗口比例。经典的图片对比布局。不错的一款AngularJS应用。

angular, app

编辑器支持Emmet

快捷键

CSS Filter Effects Demo app with angular. 使用左右对比的方式演示CSS3滤镜特效，可以拖拉中间轴来调整左右窗口比例。经典的图片对比布局。 不错的一款AngularJS应用。

angular, app

基于AngularJS实现的价格范围过滤器

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

CSS Filter Effects Demo app with angular. 使用左右对比的方式演示CSS3滤镜特效，可以拖拉中间轴来调整左右窗口比例。经典的图片对比布局。不错的一款AngularJS应用。