jquery实现可变色的便签管理系统-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：jquery实现可变色的便签管理系统

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
@import url('https://fonts.googleapis.com/css?family=Handlee');
        *
        {
            box-sizing: border-box;
        }
        body
        {
            background-color: #1c1d24;
            /* 	background-image: url('https://images.pexels.com/photos/1352751/pexels-photo-1352751.jpeg'); */
            background-size: cover;
            background-repeat: no-repeat;
            background-blend-mode: multiply;
        }
        .noteHolder {
            position: fixed;
            display: inline-block;
            width: 12em;
            height: 12em;
            font-family: 'Handlee', cursive;
            margin: 15px;
            cursor: all-scroll;
            z-index: 600;
            overflow: hidden;
            /* 	box-shadow: 0px 0px 10px 2px #00000010; */
        }
        .noteHolder input[type="checkbox"] {
            position: absolute;
            z-index: 0;
            width: 12em;
            height: 12em;
            opacity: 0;
            cursor: pointer;
            marign: 0;
            padding: 0;
        }
        .note {
            position: relative;
            width: 100%;
            height: 100%;
            color: #4c4e67;
            background: #f1e000;
            overflow: hidden;
            padding: 0;
            font-size: 16px;
        }

        .note:before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            border-width: 0 16px 16px 0;
            border-style: solid;
            border-color: #fff0 #fff0 #ffffffe6 #ffffffe6;
            background: #fff;
            box-shadow: 0px 0px 15px 4px #0c0f4180;
            /* Firefox 3.0 damage limitation */
            display: block;
            width: 0;
        }
        .note.rounded {
            border-radius: 5px 36px 5px 5px;
        }

        .note.rounded:before {
            border-width: 12px;
            border-color: #fff #fff transparent transparent;
            border-radius: 0 0 0 5px;
            -webkit-transition: border .4s ease-in;
            transition: border .4s ease-in;
        }
        #fold1:checked + .note.rounded::before
        {
            border-width: 100px;
            box-shadow: none;
            -webkit-animation: folding .4s;
            animation: folding .4s;
            -webkit-animation-delay: .4s;
            animation-delay: .4s;
        }

        .note textarea
        {
            border: none;
            background-color: transparent;
            width: 100%;
            height: 100%;
            resize: none;
            font-family: 'Handlee', cursive;
            margin: 0px;
            padding: 10px;
            color: #2e2f3c;
            font-size: 16px;
        }
        .note textarea:focus
        {
            outline: none;
        }
        .btn
        {
            box-shadow: none;
            cursor: pointer;
        }
        .btn:focus
        {
            outline: none;
        }
        .btn-edit
        {
            background-color: #fff;
            border: none;
            color: #1c7fff;
            padding: 0px;
            margin: 5px 2px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            box-shadow: 0px 0px 10px 5px #0c0f411a;
        }
        .btn-del
        {
            background-color: #fff;
            border: none;
            color: #fd1f1f;
            padding: 0px;
            margin: 5px 2px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            box-shadow: 0px 0px 10px 5px #0c0f411a;
        }
        .noteHolder .action
        {
            position: absolute;
            right: 0px;
            left: 0;
            bottom: 0px;
            text-align: right;
            padding: 0 5px;
            -webkit-transition: all  .4s;
            transition: all  .4s;
        }
        .colors
        {
            display: -webkit-box;
            display: flex;
            width: 100%;
            height: 0px;
            padding: 0px;
            background-color: #fff;
            flex-wrap: wrap;
            -webkit-transition: height .3s;
            transition: height .3s;
        }
        .colors.act
        {
            height: 30px;
            padding: 5px 0;
            box-shadow: 0px 0px 10px 5px #0c0f411a;
        }
        .colors div
        {
            display: block;
            -webkit-box-flex: 1;
            flex: 1;
            height: 100%;
            margin: 0 5px;
            cursor: pointer;
        }
        .colors div:first-child,.note.note-yellow
        {
            background-color: #f1e000;
        }
        .colors div:nth-child(2),.note.note-green
        {
            background-color: #63d816;
        }
        .colors div:nth-child(3),.note.note-levendor
        {
            background-color: #bb38f5;
        }
        .colors div:last-child,.note.note-orange
        {
            background-color: #f18e00;
        }
        .btn-add
        {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: none;
            background-color: #6039e0;
            color: #fff;
            position: fixed;
            right: 20px;
            bottom: 20px;
            box-shadow: 0px 0px 0px 4px #6039e066;
            -webkit-ani.........完整代码请登录后点击上方下载按钮下载查看