基于AngularJS的待办事项移动应用模板

Todo List App with Angular

jQuery, Angular, app

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
body {
    background-color: #c4d0b7;
    padding: 30px;
    text-align: center;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    color: #000;
}
body * {
    outline: none;
}
h2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    height: 55px;
    background-color: #ef898b;
    color: #fff;
    font-size: 30px;
    padding: 10px;
}
.container {
    position: relative;
    width: 334px;
    height: 700px;
    margin: 0 auto;
    color: #fff;
}
.container .content {
    background-image: url(http://bravada.besaba.com/wp-content/uploads/2016/05/clouds-planet-sci-fi-mountains.jpg);
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff;
    position: absolute;
    top: 99px;
    left: 24px;
    right: 20px;
    bottom: 95px;
    overflow: hidden;
}
.icon-archive {
    width: 24px;
    height: 24px;
    fill: #fff;
    padding: 12px 0;
}
.icon-iphone {
    width: 334px;
    height: 700px;
    fill: #fff;
}
.icon-iphone #iphone {
    fill: #fff;
}
.rabbit {
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 3;
    fill: #fff;
}
ul.unstyled {
    text-align: left;
    margin: 0;
    padding: 0;
    color: #000;
    position: absolute;
    top: 105px;
    left: 0;
    right: 0;
    bottom: 48px;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 0 0 5px;
    border-top: 10px solid #fff;
}
ul.unstyled li {
    position: relative;
    list-style-type: none;
    font-size: 16px;
    margin: 0;
    background-color: #fff;
    border-bottom: 2px solid rgba(78, 101, 152, 0.1);
    -moz-animation: item 0.5s forwards ease-in-out;
    -webkit-animation: item 0.5s forwards ease-in-out;
    animation: item 0.5s forwards ease-in-out;
}
.form {
    position: absolute;
    top: 55px;
    left: 0;
    right: 0;
    height: 50px;
    background-color: #4e6598;
}
.form:before {
    content: " ";
    position: absolute;
    bottom: -28px;
    left: 0;
    right: -50px;
    height: 30px;
    z-index: 2;
    pointer-events: none;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIyMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZGZlNmY1Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(20%, rgba(0, 0, 0, 0)), color-stop(100%, #dfe6f5));
    background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0) 20%, #dfe6f5 100%);
    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 20%, #dfe6f5 100%);
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 20%, #dfe6f5 100%);
}
.form .con-input {
    padding-right: 80px;
}
.form .input {
    width: 100%;
    font-size: 19px;
    padding: 14px 15px;
    border: none;
    background-color: #f1f1f3;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    font-weight: 800;
    color: #000;
}
.form .input:focus {
    background-color: #bdc9e2;
}
.form .input:-moz-placeholder {
    color: #000;
    opacity: 0.8;
}
.form .input::-moz-placeholder {
    color: #000;
    opacity: 0.8;
}
.form .input:-ms-input-placeholder {
    color: #000;
    opacity: 0.8;
}
.form .input::-webkit-input-placeholder {
    color: #000;
    opacity: 0.8;
}
.form .btn-primary {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    font-size: 44px;
    line-height: 1px;
    padding: 2px 12px 10px;
    border: none;
    background-color: #4e6598;
    color: #fff;
    box-shadow: 0 0 20px 0 #4e6598;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.form .btn-primary:active,
.form .btn-primary:hover {
    box-shadow: 0 0 0 0 #4e6598;
}
.bottom {
    position: absolute;
    left: 0;
    right: 50px;
    bottom: 0;
    background-color: #4e6598;
    padding: 15px 15px;
}
.bottom:before {
    content: " ";
    position: absolute;
    top: -28px;
    left: 0;
    right: -50px;
    height: 30px;
    z-index: 2;
    pointer-events: none;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIyMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZGZlNmY1Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, rgba(0, 0, 0, 0)), color-stop(100%, #dfe6f5));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 20%, #dfe6f5 100%);
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 20%, #dfe6f5 100%);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, #dfe6f5 100%);
}
.btn-archive {
    display: block;
    position: absolute;
    top: 0;
    right: -50px;
    width: 50px;
    height: 50px;
    background-color: #4e6598;
}
input[type=checkbox] {
    display: none;
}
input[type=checkbox] + label {
    display: block;
    width: 86%;
    padding: 10px 15px 10px 15px;
    color: #65686f;
    font-weight: 500;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
input[type=checkbox] + label:before {
    position: absolute;
    top: 9px;
    left: -10px;
    display: inline-block;
    content: " ";
    width: 24px;
    height: 22px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjAuMjg1IDJsLTExLjI4NSAxMS41NjctNS4yODYtNS4wMTEtMy43MTQgMy43MTYgOSA4LjcyOCAxNS0xNS4yODV6Ii8+PC9zdmc+);
    opacity: 0;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
input[type=checkbox] + label:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #4e6598;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIyMCUiIHN0b3AtY29sb3I9IiMwMDNkYzMiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(20%, #003dc3), color-stop(100%, #ffffff));
    background-image: -moz-linear-gradient(left, #003dc3 20%, #ffffff 100%);
    background-image: -webkit-linear-gradient(left, #003dc3 20%, #ffffff 100%);
    background-image: linear-gradient(to right, #003dc3 20%, #ffffff 100%);
    opacity: 0.2;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
input[type=checkbox]:checked + label {
    width: 80%;
    padding: 10px 15px 10px 45px;
}
input[type=checkbox]:checked + label:before {
    opacity: 0.3;
    left: 12px;
}
input[type=checkbox]:checked + label:after {
    width: 100%;
}
@-webkit-keyframes btn {
    10% {
        box-shadow: 0 0 0 0 #4e6598;
    }
}
@-moz-keyframes btn {
    10% {
        box-shadow: 0 0 0 0 #4e6598;
    }
}
@keyframes btn {
    10% {
        box-shadow: 0 0 0 0 #4e6598;
    }
}
@-webkit-keyframes item {
    0% {
        padding: 0 15px 0 35px;
        opacity: 0;
        margin: 0 0 0 -100%;
    }
    50% {
        padding: 5px 15px 5px 35px;
        opacity: 1;
    }
    100% {
        margin: 0;
    }
}
@-moz-keyframes item {
    0% {
        padding: 0 15px 0 35px;
        opacity: 0;
        margin: 0 0 0 -100%;
    }
    50% {
        padding: 5px 15px 5px 35px;
        opacity: 1;
    }
    100% {
        margin: 0;
    }
}
@keyframes item {
    0% {
        padding: 0 15px 0 35px;
        opacity: 0;
        margin: 0 0 0 -100%;
    }
    50% {
        padding: 5px 15px 5px 35px;
        opacity: 1;
    }
    100% {
        margin: 0;
    }
}
@media (max-width: 768px) {
    body {
        padding: 0;
    }
    .container,
    .container .content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }
    .icon-iphone,
    .rabbit {
        display: none;
    }
}

HTML

</div>
                <input class="btn-primary" type="submit" value="+">
            </form>
        </div>
    </div>
</div>
<svg data-duration="10" data-delay="45" display="none" width="0" height="0" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink">
    <defs>
        <symbol id="plus" viewBox="0 0 24 24">
            <path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z" />
        </symbol>
        <symbol id="archive" viewBox="0 0 24 24">
            <path d="M21.669 13l-1.385 9h-16.568l-1.385-9h19.338zm2.331-2h-24l2 13h20l2-13zm-20.312-8l-.688-2h17.979l-.604 2h-16.687zm.166 6l-.415-2h17.121l-.39 2h2.03l.8-4h-22l.8 4h2.054zm12.146 7c0-.552-.447-1-1-1h-6c-.553 0-1 .448-1 1s.447 1 1 1h6c.553 0 1-.448 1-1z"
            />
        </symbol>
        <symbol id="iphone" viewBox="0 0 221 464">
            <g id="Page-1" stroke="none" stroke-width="1" fill="#fff" fill-rule="evenodd" sketch:type="MSPage">
                <path d="M3,164 L0,164 L0,147 L3,147 L3,126 L0,126 L0,109 L3,109 L3,87 L0,87 L0,66 L3,66 L3,34.0058827 C3,16.3333538 17.3228613,2 34.9910061,2 L149,2 L149,0 L185,0 L185,2 L189.008994,2 C206.675354,2 221,16.3295218 221,34.0058827 L221,431.994117 C221,449.666646 206.677139,464 189.008994,464 L34.9910061,464 C17.3246455,464 3,449.670478 3,431.994117 L3,164 Z M94.0088498,40 C93.4516774,40 93,40.4433532 93,41.0093689 L93,42.9906311 C93,43.5480902 93.4508527,44 93.9996148,44 L116.404905,44 L128.992078,44 C129.548738,44 130,43.5566468 130,42.9906311 L130,41.0093689 C130,40.4519098 129.558697,40 128.99115,40 L94.0088498,40 Z M111.5,29 C113.985281,29 116,26.9852815 116,24.5 C116,22.0147185 113.985281,20 111.5,20 C109.014719,20 107,22.0147185 107,24.5 C107,26.9852815 109.014719,29 111.5,29 Z M17.9944647,66 C16.8929523,66 16,66.9024743 16,68.0096543 L16,398.990346 C16,400.100247 16.8987528,401 17.9944647,401 L206.005535,401 C207.107048,401 208,400.097526 208,398.990346 L208,68.0096543 C208,66.8997529 207.101247,66 206.005535,66 L17.9944647,66 Z M112,450 C122.493411,450 131,441.493411 131,431 C131,420.506589 122.493411,412 112,412 C101.506589,412 93,420.506589 93,431 C93,441.493411 101.506589,450 112,450 Z M81,45 C82.6568543,45 84,43.6568543 84,42 C84,40.3431457 82.6568543,39 81,39 C79.3431457,39 78,40.3431457 78,42 C78,43.6568543 79.3431457,45 81,45 Z M112,448 C121.388841,448 129,440.388841 129,431 C129,421.611159 121.388841,414 112,414 C102.611159,414 95,421.611159 95,431 C95,440.388841 102.611159,448 112,448 Z"
                sketch:type="MSShapeGroup"></path>
            </g>
        </symbol>

</defs>
</svg>

Todo List App with Angular

jQuery, Angular, app

编辑器支持Emmet

快捷键

Todo List App with Angular

jQuery, Angular, app

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

Vue.JS + Tailwind.CSS魔法巫师帽电商移动网页应用模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：