• mysql存储emoji表情

  • Mysql数据库存储emoji表情

  • MySQL如何存储Emoji表情，UTF-8和UTF-8MB4字符编码有何区别

  • 修改mysql数据库编码

  • MySQL - 更改 MySQL 数据库的编码为 UTF8MB4

  • 【☆】微信小程序跳转详情页面

  • 微信小程序中navigateTo的跳转以及传递参数

  • HTML DOM confirm() 方法

    1
    2
    3
    4
    5
    6
    var r=confirm('你确定吗？')
    if (r==true) {
        document.write('You pressed OK!')
    } else {
        document.write('You pressed Cancel!')
    }

  • 微信支付新版文档中心

  • CSS文字渐变色

    1
    2
    3
    4
    5
    6
    #title1 {
        font-size: 99px;
        background: linear-gradient(45deg,rgba(26,26,192,.8) 0,rgba(34,34,187,.7) 33%,#fa709a 66%,#fee140 100%);
        -webkit-background-clip: text;
        color: transparent;
    }

  • 一套顺眼的暗黑模式配色

    1
    2
    3
    4
    5
    6
    7
    8
    #131a26     背景黑
    #212937     卡片黑
    #ffffff     文字白
    #68d672     点缀绿
    #df484a     点缀红
    #ec902f     点缀橙
    #687790     图标灰
    #7d8188     文字灰

  • 全站变灰代码（适合哀悼日等场景，看得时间长了眼疼）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style type="text/css">
    html { 
        filter: grayscale(100%); 
        -webkit-filter: grayscale(100%); 
        -moz-filter: grayscale(100%); 
        -ms-filter: grayscale(100%); 
        -o-filter: grayscale(100%); 
        filter: url("data:image/svg+xml;utf8,#grayscale"); 
        filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);
    }
    </style>

    压缩版

    1
    2
    3
    <style type="text/css">
    html { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);}
    </style>

  • CSS抖动动画

    1
    2
    3
    4
    .doudong{
        -webkit-animation: horizontal 2s ease infinite;
        animation: horizontal 2s ease infinite;
    }

  • 刀剑神域风格的登录动画：https://akilar.top/posts/1b4fa1dd/

  • 星际穿越CSS动画：https://codepen.io/noahblon/pen/DpNRyR

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <div class="scene">
      <div class="wrap">
          <div class="wall wall-right"></div>
          <div class="wall wall-left"></div>   
          <div class="wall wall-top"></div>
          <div class="wall wall-bottom"></div> 
          <div class="wall wall-back"></div>    
      </div>
      <div class="wrap">
          <div class="wall wall-right"></div>
          <div class="wall wall-left"></div>   
          <div class="wall wall-top"></div>
          <div class="wall wall-bottom"></div>   
          <div class="wall wall-back"></div>    
      </div>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    .wall{
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/PIA09959-1280x800_copy.jpg);
      background-size: cover;
    }

    html, body{
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    body{
      background: #000;
      text-align: center;
    }

    body:before{
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }

    .scene{
      display: inline-block;
      vertical-align: middle;
      perspective: 5px;
      perspective-origin: 50% 50%;
      position: relative;
    }

    .wrap{
      position: absolute;
      width: 1000px;
      height: 1000px;
      left: -500px;
      top: -500px;
      transform-style: preserve-3d;
      animation: move 12s infinite linear;
      animation-fill-mode: forwards;
      
    }

    .wrap:nth-child(2){
      animation: move 12s infinite linear;
      animation-delay: 6s;
    }

    .wall {
      width: 100%;
      height: 100%;
      position: absolute;
      opacity: 0;
      animation: fade 12s infinite linear;
      animation-delay: 0;
    }

    .wrap:nth-child(2) .wall {
      animation-delay: 6s;
    }

    .wall-right {
      transform: rotateY(90deg) translateZ(500px);
    }

    .wall-left {
      transform: rotateY(-90deg) translateZ(500px);
    }

    .wall-top {
      transform: rotateX(90deg) translateZ(500px);
    }

    .wall-bottom {
      transform: rotateX(-90deg) translateZ(500px);
    }

    .wall-back {
      transform: rotateX(180deg) translateZ(500px);
    }

    @keyframes move {
      0%{
        transform: translateZ(-500px) rotate(0deg);
      }
      100%{
        transform: translateZ(500px) rotate(0deg);
      }
    }

    @keyframes fade {
      0%{
        opacity: 0;
      }
      25% {
        opacity: 1;
      }
      75% {
        opacity: 1;
      }
      100%{
        opacity: 0;
      }
    }


    /* 
    .scene { 
      animation: 🤫 300s infinite linear;
    }

    @keyframes 🤫 {
      0%{
        filter: hue-rotate(0)
      }
      50% {
        filter: hue-rotate(180deg) saturation(5);
        transform: scaleX(4000);
        perspective: 50px;
      }
     
      100%{
        filter: hue-rotate(360deg);
      }
    } 
    */

  • 神奇宝贝球CSS动画：https://codepen.io/internette/pen/LZBxQw

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div id="header">
      <h3>Pokéball Loader</h3>
      <p>in pure CSS</p>
    </div>
    <div id="loading">
      <div class="pokeball" id="normal"></div>
      <div class="pokeball" id="great"></div>
      <div class="pokeball" id="ultra"></div>
      <div class="pokeball" id="master"></div>
      <div class="pokeball" id="safari"></div>
    </div>

    CSS/SCSS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    @import 'https://fonts.googleapis.com/css?family=Reem+Kufi';
    $red: #e20f07;
    $blu: #278de1;
    $ylw: #ffff00;
    $ppl: #481a66;
    $pnk: #eb23aa;
    $brw: #9a4a01;
    $mos: #606700;
    $grn: #5fa300;
    $blk: #000;
    $wht: #FFF;
    $gry: #a5a5a5;
    @keyframes rotateBall {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    @-webkit-keyframes rotateBall {
      0% {
        transform: rotate(0deg);
      }
      50% {
        transform: rotate(50deg);
      }
      0% {
        transform: rotate(360deg);
      }
    }
    html, body {
      margin: 0;
      height: 100%;
      width: 100%;
    }
    body {
      background: mix(lighten($blu, 23%), lighten($ylw, 30%), 30%);
      color: $mos;
    }
    #header {
      font-family: 'Reem Kufi', sans-serif;
      position: absolute;
      top: 2em;
      text-align: center;
      width: 100%;
      * {
        margin: 0;
      }
    }
    #loading {
      height: 48px;
      width: 264px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }
    .pokeball {
      width: 4px;
      height: 4px;
      transform-origin: 24px 24px;
      animation: rotateBall 1.5s infinite forwards;
      &#normal {
        box-shadow: 
          //Row: 1
          16px 0 0 $blk, 20px 0 0 $blk, 24px 0 0 $blk, 28px 0 0 $blk,
          //Row: 2
          8px 4px 0 $blk, 12px 4px 0 $blk, 16px 4px 0 $red, 20px 4px 0 $red, 24px 4px 0 $red, 28px 4px 0 $red, 32px 4px 0 $blk, 36px 4px 0 $blk,
          //Row: 3
          4px 8px 0 $blk, 8px 8px 0 $red, 12px 8px 0 $red, 16px 8px 0 $wht, 20px 8px 0 $red, 24px 8px 0 $red, 28px 8px 0 $red, 32px 8px 0 $red, 36px 8px 0 $red, 40px 8px 0 $blk, 
          //Row: 4
          4px 12px 0 $blk, 8px 12px 0 $red, 12px 12px 0 $wht, 16px 12px 0 $wht, 20px 12px 0 $wht, 24px 12px 0 $red, 28px 12px 0 $red, 32px 12px 0 $red, 36px 12px 0 $red, 40px 12px 0 $blk,
          //Row: 5
          0px 16px 0 $blk, 4px 16px 0 $red, 8px 16px 0 $red, 12px 16px 0 $red, 16px 16px 0 $wht, 20px 16px 0 $red, 24px 16px 0 $red, 28px 16px 0 $red, 32px 16px 0 $red, 36px 16px 0 $red, 40px 16px 0 $red, 44px 16px 0 $blk,
          //Row: 6
          0px 20px 0 $blk, 4px 20px 0 $red, 8px 20px 0 $red, 12px 20px 0 $red, 16px 20px 0 $red, 20px 20px 0 $blk, 24px 20px 0 $blk, 28px 20px 0 $red, 32px 20px 0 $red, 36px 20px 0 $red, 40px 20px 0 $red, 44px 20px 0 $blk, 
          //Row: 7
          0px 24px 0 $blk, 4px 24px 0 $blk, 8px 24px 0 $red, 12px 24px 0 $red, 16px 24px 0 $blk, 20px 24px 0 $wht, 24px 24px 0 $gry, 28px 24px 0 $blk, 32px 24px 0 $red, 36px 24px 0 $red, 40px 24px 0 $blk, 44px 24px 0 $blk, 
          //Row: 8
          0px 28px 0 $blk, 4px 28px 0 $wht, 8px 28px 0 $blk, 12px 28px 0 $blk, 16px 28px 0 $blk, 20px 28px 0 $gry, 24px 28px 0 $gry, 28px 28px 0 $blk, 32px 28px 0 $blk, 36px 28px 0 $blk, 40px 28px 0 $gry, 44px 28px 0 $blk,
          //Row: 9
          4px 32px 0 $blk, 8px 32px 0 $wht, 12px 32px 0 $wht, 16px 32px 0 $wht, 20px 32px 0 $blk, 24px 32px 0 $blk, 28px 32px 0 $gry, 32px 32px 0 $gry, 36px 32px 0 $gry, 40px 32px 0 $blk,
          //Row: 10
          4px 36px 0 $blk, 8px 36px 0 $gry, 12px 36px 0 $wht, 16px 36px 0 $wht, 20px 36px 0 $wht, 24px 36px 0 $gry, 28px 36px 0 $gry, 32px 36px 0 $gry, 36px 36px 0 $gry, 40px 36px 0 $blk,
          //Row: 11
          8px 40px 0 $blk, 12px 40px 0 $blk, 16px 40px 0 $gry, 20px 40px 0 $gry, 24px 40px 0 $gry, 28px 40px 0 $gry, 32px 40px 0 $blk, 36px 40px 0 $blk,
          //Row: 12
          16px 44px 0 $blk, 20px 44px 0 $blk, 24px 44px 0 $blk, 28px 44px 0 $blk
          ;
      }
      &#great {
        animation-delay: 0.25s;
        margin: -4px 0 0 54px;
        box-shadow: 
          //Row: 1
          16px 0 0 $blk, 20px 0 0 $blk, 24px 0 0 $blk, 28px 0 0 $blk,
          //Row: 2
          8px 4px 0 $blk, 12px 4px 0 $blk, 16px 4px 0 $blu, 20px 4px 0 $blu, 24px 4px 0 $blu, 28px 4px 0 $blu, 32px 4px 0 $blk, 36px 4px 0 $blk,
          //Row: 3
          4px 8px 0 $blk, 8px 8px 0 $red, 12px 8px 0 $red, 16px 8px 0 $blu, 20px 8px 0 $blu, 24px 8px 0 $blu, 28px 8px 0 $blu, 32px 8px 0 $red, 36px 8px 0 $red, 40px 8px 0 $blk, 
          //Row: 4
          4px 12px 0 $blk, 8px 12px 0 $red, 12px 12px 0 $red, 16px 12px 0 $red, 20px 12px 0 $blu, 24px 12px 0 $blu, 28px 12px 0 $red, 32px 12px 0 $red, 36px 12px 0 $red, 40px 12px 0 $blk,
          //Row: 5
          0px 16px 0 $blk, 4px 16px 0 $blu, 8px 16px 0 $blu, 12px 16px 0 $red, 16px 16px 0 $red, 20px 16px 0 $blu, 24px 16px 0 $blu, 28px 16px 0 $red, 32px 16px 0 $red, 36px 16px 0 $blu, 40px 16px 0 $blu, 44px 16px 0 $blk,
          //Row: 6
          0px 20px 0 $blk, 4px 20px 0 $blu, 8px 20px 0 $blu, 12px 20px 0 $blu, 16px 20px 0 $blu, 20px 20px 0 $blk, 24px 20px 0 $blk, 28px 20px 0 $blu, 32px 20px 0 $blu, 36px 20px 0 $blu, 40px 20px 0 $blu, 44px 20px 0 $blk, 
          //Row: 7
          0px 24px 0 $blk, 4px 24px 0 $blk, 8px 24px 0 $blu, 12px 24px 0 $blu, 16px 24px 0 $blk, 20px 24px 0 $wht, 24px 24px 0 $gry, 28px 24px 0 $blk, 32px 24px 0 $blu, 36px 24px 0 $blu, 40px 24px 0 $blk, 44px 24px 0 $blk, 
          //Row: 8
          0px 28px 0 $blk, 4px 28px 0 $wht, 8px 28px 0 $blk, 12px 28px 0 $blk, 16px 28px 0 $blk, 20px 28px 0 $gry, 24px 28px 0 $gry, 28px 28px 0 $blk, 32px 28px 0 $blk, 36px 28px 0 $blk, 40px 28px 0 $gry, 44px 28px 0 $blk,
          //Row: 9
          4px 32px 0 $blk, 8px 32px 0 $wht, 12px 32px 0 $wht, 16px 32px 0 $wht, 20px 32px 0 $blk, 24px 32px 0 $blk, 28px 32px 0 $gry, 32px 32px 0 $gry, 36px 32px 0 $gry, 40px 32px 0 $blk,
          //Row: 10
          4px 36px 0 $blk, 8px 36px 0 $gry, 12px 36px 0 $wht, 16px 36px 0 $wht, 20px 36px 0 $wht, 24px 36px 0 $gry, 28px 36px 0 $gry, 32px 36px 0 $gry, 36px 36px 0 $gry, 40px 36px 0 $blk,
          //Row: 11
          8px 40px 0 $blk, 12px 40px 0 $blk, 16px 40px 0 $gry, 20px 40px 0 $gry, 24px 40px 0 $gry, 28px 40px 0 $gry, 32px 40px 0 $blk, 36px 40px 0 $blk,
          //Row: 12
          16px 44px 0 $blk, 20px 44px 0 $blk, 24px 44px 0 $blk, 28px 44px 0 $blk
          ;
      }
      &#ultra {
        animation-delay: 0.5s;
        margin: -4px 0 0 108px;
        box-shadow: 
          //Row: 1
          16px 0 0 $blk, 20px 0 0 $blk, 24px 0 0 $blk, 28px 0 0 $blk,
          //Row: 2
          8px 4px 0 $blk, 12px 4px 0 $blk, 16px 4px 0 $ylw, 20px 4px 0 $ylw, 24px 4px 0 $ylw, 28px 4px 0 $ylw, 32px 4px 0 $blk, 36px 4px 0 $blk,
          //Row: 3
          4px 8px 0 $blk, 8px 8px 0 $ylw, 12px 8px 0 $ylw, 16px 8px 0 $ylw, 20px 8px 0 $ylw, 24px 8px 0 $ylw, 28px 8px 0 $ylw, 32px 8px 0 $ylw, 36px 8px 0 $ylw, 40px 8px 0 $blk, 
          //Row: 4
          4px 12px 0 $blk, 8px 12px 0 $ylw, 12px 12px 0 $ylw, 16px 12px 0 $blk, 20px 12px 0 $blk, 24px 12px 0 $blk, 28px 12px 0 $blk, 32px 12px 0 $ylw, 36px 12px 0 $ylw, 40px 12px 0 $blk,
          //Row: 5
          0px 16px 0 $blk, 4px 16px 0 $blk, 8px 16px 0 $ylw, 12px 16px 0 $ylw, 16px 16px 0 $blk, 20px 16px 0 $blk, 24px 16px 0 $blk, 28px 16px 0 $blk, 32px 16px 0 $ylw, 36px 16px 0 $ylw, 40px 16px 0 $blk, 44px 16px 0 $blk,
          //Row: 6
          0px 20px 0 $blk, 4px 20px 0 $blk, 8px 20px 0 $blk, 12px 20px 0 $blk, 16px 20px 0 $blk, 20px 20px 0 $blk, 24px 20px 0 $blk, 28px 20px 0 $blk, 32px 20px 0 $blk, 36px 20px 0 $blk, 40px 20px 0 $blk, 44px 20px 0 $blk, 
          //Row: 7
          0px 24px 0 $blk, 4px 24px 0 $blk, 8px 24px 0 $blk, 12px 24px 0 $blk, 16px 24px 0 $blk, 20px 24px 0 $wht, 24px 24px 0 $gry, 28px 24px 0 $blk, 32px 24px 0 $blk, 36px 24px 0 $blk, 40px 24px 0 $blk, 44px 24px 0 $blk, 
          //Row: 8
          0px 28px 0 $blk, 4px 28px 0 $wht, 8px 28px 0 $blk, 12px 28px 0 $blk, 16px 28px 0 $blk, 20px 28px 0 $gry, 24px 28px 0 $gry, 28px 28px 0 $blk, 32px 28px 0 $blk, 36px 28px 0 $blk, 40px 28px 0 $gry, 44px 28px 0 $blk,
          //Row: 9
          4px 32px 0 $blk, 8px 32px 0 $wht, 12px 32px 0 $wht, 16px 32px 0 $wht, 20px 32px 0 $blk, 24px 32px 0 $blk, 28px 32px 0 $gry, 32px 32px 0 $gry, 36px 32px 0 $gry, 40px 32px 0 $blk,
          //Row: 10
          4px 36px 0 $blk, 8px 36px 0 $gry, 12px 36px 0 $wht, 16px 36px 0 $wht, 20px 36px 0 $wht, 24px 36px 0 $gry, 28px 36px 0 $gry, 32px 36px 0 $gry, 36px 36px 0 $gry, 40px 36px 0 $blk,
          //Row: 11
          8px 40px 0 $blk, 12px 40px 0 $blk, 16px 40px 0 $gry, 20px 40px 0 $gry, 24px 40px 0 $gry, 28px 40px 0 $gry, 32px 40px 0 $blk, 36px 40px 0 $blk,
          //Row: 12
          16px 44px 0 $blk, 20px 44px 0 $blk, 24px 44px 0 $blk, 28px 44px 0 $blk
          ;
      }
      &#master {
        animation-delay: 0.75s;
        margin: -4px 0 0 162px;
        box-shadow: 
          //Row: 1
          16px 0 0 $blk, 20px 0 0 $blk, 24px 0 0 $blk, 28px 0 0 $blk,
          //Row: 2
          8px 4px 0 $blk, 12px 4px 0 $blk, 16px 4px 0 $ppl, 20px 4px 0 $ppl, 24px 4px 0 $ppl, 28px 4px 0 $ppl, 32px 4px 0 $blk, 36px 4px 0 $blk,
          //Row: 3
          4px 8px 0 $blk, 8px 8px 0 $pnk, 12px 8px 0 $pnk, 16px 8px 0 $ppl, 20px 8px 0 $ppl, 24px 8px 0 $ppl, 28px 8px 0 $ppl, 32px 8px 0 $pnk, 36px 8px 0 $pnk, 40px 8px 0 $blk, 
          //Row: 4
          4px 12px 0 $blk, 8px 12px 0 $pnk, 12px 12px 0 $wht, 16px 12px 0 $wht, 20px 12px 0 $ppl, 24px 12px 0 $ppl, 28px 12px 0 $wht, 32px 12px 0 $wht, 36px 12px 0 $pnk, 40px 12px 0 $blk,
          //Row: 5
          0px 16px 0 $blk, 4px 16px 0 $ppl, 8px 16px 0 $ppl, 12px 16px 0 $wht, 16px 16px 0 $ppl, 20px 16px 0 $wht, 24px 16px 0 $wht, 28px 16px 0 $ppl, 32px 16px 0 $wht, 36px 16px 0 $ppl, 40px 16px 0 $ppl, 44px 16px 0 $blk,
          //Row: 6
          0px 20px 0 $blk, 4px 20px 0 $ppl, 8px 20px 0 $ppl, 12px 20px 0 $ppl, 16px 20px 0 $ppl, 20px 20px 0 $blk, 24px 20px 0 $blk, 28px 20px 0 $ppl, 32px 20px 0 $ppl, 36px 20px 0 $ppl, 40px 20px 0 $ppl, 44px 20px 0 $blk, 
          //Row: 7
          0px 24px 0 $blk, 4px 24px 0 $blk, 8px 24px 0 $ppl, 12px 24px 0 $ppl, 16px 24px 0 $blk, 20px 24px 0 $wht, 24px 24px 0 $gry, 28px 24px 0 $blk, 32px 24px 0 $ppl, 36px 24px 0 $ppl, 40px 24px 0 $blk, 44px 24px 0 $blk, 
          //Row: 8
          0px 28px 0 $blk, 4px 28px 0 $wht, 8px 28px 0 $blk, 12px 28px 0 $blk, 16px 28px 0 $blk, 20px 28px 0 $gry, 24px 28px 0 $gry, 28px 28px 0 $blk, 32px 28px 0 $blk, 36px 28px 0 $blk, 40px 28px 0 $gry, 44px 28px 0 $blk,
          //Row: 9
          4px 32px 0 $blk, 8px 32px 0 $wht, 12px 32px 0 $wht, 16px 32px 0 $wht, 20px 32px 0 $blk, 24px 32px 0 $blk, 28px 32px 0 $gry, 32px 32px 0 $gry, 36px 32px 0 $gry, 40px 32px 0 $blk,
          //Row: 10
          4px 36px 0 $blk, 8px 36px 0 $gry, 12px 36px 0 $wht, 16px 36px 0 $wht, 20px 36px 0 $wht, 24px 36px 0 $gry, 28px 36px 0 $gry, 32px 36px 0 $gry, 36px 36px 0 $gry, 40px 36px 0 $blk,
          //Row: 11
          8px 40px 0 $blk, 12px 40px 0 $blk, 16px 40px 0 $gry, 20px 40px 0 $gry, 24px 40px 0 $gry, 28px 40px 0 $gry, 32px 40px 0 $blk, 36px 40px 0 $blk,
          //Row: 12
          16px 44px 0 $blk, 20px 44px 0 $blk, 24px 44px 0 $blk, 28px 44px 0 $blk
          ;
      }
      &#safari {
        animation-delay: 1s;
        margin: -4px 0 0 216px;
        box-shadow: 
          //Row: 1
          16px 0 0 $blk, 20px 0 0 $blk, 24px 0 0 $blk, 28px 0 0 $blk,
          //Row: 2
          8px 4px 0 $blk, 12px 4px 0 $blk, 16px 4px 0 $brw, 20px 4px 0 $brw, 24px 4px 0 $mos, 28px 4px 0 $grn, 32px 4px 0 $blk, 36px 4px 0 $blk,
          //Row: 3
          4px 8px 0 $blk, 8px 8px 0 $mos, 12px 8px 0 $mos, 16px 8px 0 $mos, 20px 8px 0 $brw, 24px 8px 0 $brw, 28px 8px 0 $grn, 32px 8px 0 $mos, 36px 8px 0 $brw, 40px 8px 0 $blk, 
          //Row: 4
          4px 12px 0 $blk, 8px 12px 0 $brw, 12px 12px 0 $brw, 16px 12px 0 $brw, 20px 12px 0 $brw, 24px 12px 0 $brw, 28px 12px 0 $grn, 32px 12px 0 $mos, 36px 12px 0 $mos, 40px 12px 0 $blk,
          //Row: 5
          0px 16px 0 $blk, 4px 16px 0 $grn, 8px 16px 0 $mos, 12px 16px 0 $grn, 16px 16px 0 $grn, 20px 16px 0 $mos, 24px 16px 0 $mos, 28px 16px 0 $mos, 32px 16px 0 $grn, 36px 16px 0 $brw, 40px 16px 0 $brw, 44px 16px 0 $blk,
          //Row: 6
          0px 20px 0 $blk, 4px 20px 0 $grn, 8px 20px 0 $mos, 12px 20px 0 $grn, 16px 20px 0 $mos, 20px 20px 0 $blk, 24px 20px 0 $blk, 28px 20px 0 $mos, 32px 20px 0 $mos, 36px 20px 0 $grn, 40px 20px 0 $grn, 44px 20px 0 $blk, 
          //Row: 7
          0px 24px 0 $blk, 4px 24px 0 $blk, 8px 24px 0 $mos, 12px 24px 0 $mos, 16px 24px 0 $blk, 20px 24px 0 $wht, 24px 24px 0 $gry, 28px 24px 0 $blk, 32px 24px 0 $brw, 36px 24px 0 $brw, 40px 24px 0 $blk, 44px 24px 0 $blk, 
          //Row: 8
          0px 28px 0 $blk, 4px 28px 0 $wht, 8px 28px 0 $blk, 12px 28px 0 $blk, 16px 28px 0 $blk, 20px 28px 0 $gry, 24px 28px 0 $gry, 28px 28px 0 $blk, 32px 28px 0 $blk, 36px 28px 0 $blk, 40px 28px 0 $gry, 44px 28px 0 $blk,
          //Row: 9
          4px 32px 0 $blk, 8px 32px 0 $wht, 12px 32px 0 $wht, 16px 32px 0 $wht, 20px 32px 0 $blk, 24px 32px 0 $blk, 28px 32px 0 $gry, 32px 32px 0 $gry, 36px 32px 0 $gry, 40px 32px 0 $blk,
          //Row: 10
          4px 36px 0 $blk, 8px 36px 0 $gry, 12px 36px 0 $wht, 16px 36px 0 $wht, 20px 36px 0 $wht, 24px 36px 0 $gry, 28px 36px 0 $gry, 32px 36px 0 $gry, 36px 36px 0 $gry, 40px 36px 0 $blk,
          //Row: 11
          8px 40px 0 $blk, 12px 40px 0 $blk, 16px 40px 0 $gry, 20px 40px 0 $gry, 24px 40px 0 $gry, 28px 40px 0 $gry, 32px 40px 0 $blk, 36px 40px 0 $blk,
          //Row: 12
          16px 44px 0 $blk, 20px 44px 0 $blk, 24px 44px 0 $blk, 28px 44px 0 $blk
          ;
      }
    }

  • 彩绘心型CSS动画：https://codepen.io/yuanchuan/pen/wZJqNK
    此项目用到了doodle依赖，这个依赖js文件大概52KB左右，不算太大。可以接受。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    <style>
      css-doodle {
        --color: @p(#51eaea, #fffde1, #ff9d76, #FB3569);
        --rule: (
          :doodle {
            @grid: 30x1 / 18vmin;
            --deg: @p(-180deg, 180deg);
          }
          :container {
            perspective: 30vmin;
          }
          :after, :before {
            content: '';
            background: var(--color); 
            @place-cell: @r(100%) @r(100%);
            @size: @r(6px);
            @shape: heart;
          }
        
          @place-cell: center;
          @size: 100%;
        
          box-shadow: @m2(0 0 50px var(--color));
          background: @m100(
            radial-gradient(var(--color) 50%, transparent 0) 
            @r(-20%, 120%) @r(-20%, 100%) / 1px 1px
            no-repeat
          );
        
          will-change: transform, opacity;
          animation: scale-up 12s linear infinite;
          animation-delay: calc(-12s / @I * @i);

          @keyframes scale-up {
            0%, 95.01%, 100% {
              transform: translateZ(0) rotate(0);
              opacity: 0;
            }
            10% { 
              opacity: 1; 
            }
            95% {
              transform: 
                translateZ(35vmin) rotateZ(@var(--deg));
            }
          }
        )
      }
    </style>
    <css-doodle use="var(--rule)"></css-doodle>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    html, body { 
      width: 100%;
      height: 100%; 
      margin: 0;
      background: #270F34; 
      overflow: hidden; 
      display: flex; 
      align-items: center; 
      justify-content: center;
      contain: content;
      overflow: clip;
    }

  • 自定义网页滚动条颜色样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    /* 滚动条 */
    ::-webkit-scrollbar {
        width: 10px;
        height: 8px;
        background-color: #f5f5f5;
    }
    ::-webkit-scrollbar-thumb {
        background-color: #2ab1ff;
        background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%, transparent 75%, transparent);
        border-radius: 3em;
    }
    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
        box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
        background-color: #f5f5f5;
        border-radius: 5px;
    }
    ::-webkit-scrollbar-track {
        background-color: transparent;
    }

  • jQuery AJAX 方法：https://www.runoob.com/jquery/jquery-ref-ajax.html

  • AJAX请求常用的几种写法：https://blog.csdn.net/weixin_45083154/article/details/106766057

  • css 几个重要的格式样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /* css保留空格和换行符 */
    white-space: pre-wrap;
    /* css保留换行符 */
    white-space: pre-line;
    word-wrap:break-word
    解释：使用break-word时，是将强制换行。
        /************************/ 
                normal	只在允许的断字点换行（浏览器保持默认处理）。
                break-word	在长单词或 URL 地址内部进行换行。
        /************************/ 

    兼容各版本IE浏览器，兼容谷歌浏览器。

  • JS实用控件——可滑动列表项

  • 前段反调试 禁止调试代码
    有的网站是：

    1
    2
    3
    4
    (function anonymous(
    ) {
    debugger
    })

    一行代码搞定：

    1
    setInterval(function () { debugger }, 100);

    下面没有用：

    1
    2
    3
    4
    5
    6
    setTimeout(function () { 
      const element = document.getElementsByTagName( 'html' )
      element[0].remove();
      alert('你触发了自毁装置！')
      //window.location.href = 'https://meta-code.top'
      debugger }, 100);

  • Ajax get请求 参数包含数组时，服务端无法获取到数组

  • 使用while循环replace/replace替换真值

  • html两页面通过超链接地址传递参数
    页面1，发送参数并跳转

    1
    2
    3
    4
    5
    6
    function pass_score(){
        var score_num = score.value; //使用id来获取input输入框的值
        var nexturl = "2.html" + "?" + "id=" + score_num;
        console.log(nexturl)
        window.location.href = nexturl;
    }

    页面2，接收参数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var url = document.location.toString();
    console.log(url)
    if(url.indexOf("?") != -1){
        // 获得了超连接成绩参数
        str = url.split("?id=")[1];
        console.log(str)
    }else{
        // 超链接没有成绩参数
        window.location.href = "1.html";
    }

  • js进行url与汉字的转换加解密-相关函数

    1
    2
    3
    4
    转为url格式                  转为汉字
    escape(key)                 unescape(key)
    encodeURI(key)              decodeURI(key)
    encodeURIComponent(key)     decodeURIComponent(key)

  • js获取点击＜li＞标签里的内容值的两种方法

  • 在ajax中发起请求后根据返回的结果想用return结束函数发现没有结束函数的运行

  • jquery修改style属性：$('.fill').attr({"style":"display:block;"});

    jquery中可利用attr()方法来修改style属性，该方法设置被选元素的属性值
    语法 $(selector).attr("style","行内样式代码") 或 $(selector).attr({"style":"样式代码"})

  • 把某个字段的值全部改为某个固定值UPDATE 表名 SET 字段名='固定值'

  • 如何使用history返回上一个页面时强制刷新页面

    1
    2
    3
    4
    5
    6
    7
    //e.persisted判断是否后退进入,从缓存冲获取时为true否则为false
    window.addEventListener('pageshow', (e) => {
      if (e.persisted || (window.performance && 
        window.performance.navigation.type == 2)) {
        location.reload()
      }
    }, false)

  • thinkphp的volist标签,怎样设置自增序号呢?

    请查看thinkphp的官方文档第8章模板引擎第9节Volist标签，其中提到volist的属性中有一个key属性，原文：key（可选）：循环的key变量，默认值为i这个就是你的自增序号，而且默认变量就是$i，也就是说在你的volist标签之内，可以直接使用{$i}渲染到前端页面

  • css中如何设置hr的样式？css

    标签多种样式（图文）

  • 使用纯CSS美化table表格的代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <h3  class="textCetent">报名表单</h3>
    <table class="qgg-table">
    <thead>
    <tr>
    <th width="33%">姓名</th>
    <th width="25%">电话</th>
    <th width="25%">时间</th>
    </tr>
    </thead>
    <tbody>	
        <tr>
          <td>测试</td><td>13888888888</td><td>2020-05-16 13:04</td>
        </tr>
        <tr>
          <td>测试</td><td>13877777777</td><td>2020-05-16 13:03</td>
        </tr>
        <tr>
          <td>测试</td><td>13866666666</td><td>2020-05-16 13:02</td>
        </tr>
        <tr>
          <td>测试</td><td>13855555555</td><td>2020-05-16 13:01</td>
        </tr>
          </tbody>
    </table>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    /** Table 表格样式 **/
    .qgg-table{
        border-collapse: collapse;
        width:100%;
        border:1px solid #c6c6c6 !important;
        margin-bottom:20px;
    }
    .qgg-table th{
        border-collapse: collapse;
        border-right:1px solid #c6c6c6 !important;
        border-bottom:1px solid #c6c6c6 !important;
        background-color:#ddeeff !important; 
        padding:5px 9px;
        font-size:14px;
        font-weight:normal;
        text-align:center;
    }
    .qgg-table td{
        border-collapse: collapse;
        border-right:1px solid #c6c6c6 !important;
        border-bottom:1px solid #c6c6c6 !important; 
        padding:5px 9px;
        font-size:12px;
        font-weight:normal;
        text-align:center;
        word-break: break-all;
    }
    .qgg-table tr:nth-child(odd){
        background-color:#fff !important; 
    }
    .qgg-table tr:nth-child(even){
        background-color: #f8f8f8 !important;
    }

  • HTML5 Canvas 为网页添加文字水印

    • 分享8个非常实用的Vue自定义指令
    • 最终实现代码：
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      <div id="BF_WaterMark" style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:999;pointer-events:none;"></div>
      <script>
          var can = document.createElement('canvas');
          var BF_WaterMark = document.getElementById("BF_WaterMark");
          BF_WaterMark.appendChild(can);
          can.width=200;
          can.height=150;
          can.style.display='none';
          var cans = can.getContext('2d');
          cans.translate(-40, 0); //移动坐标原点
          cans.rotate(-20*Math.PI/180);
          cans.font = "16px Microsoft JhengHei";
          cans.fillStyle = "rgba(167, 167, 167, 0.5)";
          cans.fillText("百里飞洋",can.width/3,can.height/2);
          BF_WaterMark.style.backgroundImage="url("+can.toDataURL("image/png")+")";
      </script>

      position:absolute;：水印随页面滚动
      position:fixed;：水印固定不滚动

  • 常用前端UI框架

  • 汇总9款优秀的开源小程序UI框架

  • 组件库文档工具 dumi 的介绍与对比及踩坑小结

  • 基于 Vite 搭建开发体验超级丝滑的 Vue3 组件库开发框架

  • HTML DOM parentNode 属性

    • parentNode 属性可返回某节点的父节点，如果指定的节点没有父节点则返回 null 。