WebWonderful skills

WebWonderful skills

Reprinted from the brief book "i_木木木木木"

One, the text becomes more than hidden...

    white-space: nowrap;   //强制不换行
    text-overflow: ellipsis;  //超出变省略号
    overflow: hidden;  //超出隐藏
    word-wrap: break-word; //英文单词换行

Second, CSS3 animation effect @keyframes

    01：鼠标悬浮背景变化
    .load-more:hover{
        animation:change .5s ease-in;
    }
    @keyframes change{
        0%,20%{opacity:0.25;}
        30%,50%{opacity:0.55;}
        60%,80%{opacity:0.75;}
        90%,100%{opacity:1;}
    }

    02：3D旋转
    .earth-round{
        -webkit-animation:earthmove 2s linear both infinite;
    }
    @keyframes earthmove{
        to{transform:rotateY(360deg)translateZ(20px)};
    }

    03：360度旋转
    .earth-round{
        -webkit-animation:earthmove 2s linear both infinite;
    }
    @-webkit-keyframes earthmove{
        0% {-webkit-transform:rotate(0deg);}
        50% {-webkit-transform:rotate(180deg);}
        100% {-webkit-transform:rotate(360deg);}
    }

Three, clear floating Clearfix

    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
    .clearfix{*+height:1%;}

Four, no matter how many texts are centered vertically (positioning method)

    //Html 
    <div class="middle-box">
        <div class="middle-inner">
            <p>前端开发博客，专注前端开发和web教程前端开发博客</p>
        </div>
    </div>

    //css
    .middle-box{
        display:table; 
        height: 300px; 
        border:1px solid #ff0000; 
        width:400px; 
        margin:0 auto; 
        position:relative;
    }
    .middle-inner{
        display: table-cell; 
        vertical-align:middle; 
        *position:absolute; 
        *top:50%; *left:50%; 
        width:100%; 
        text-align:center;
    }
    .middle-inner p{
        position:relative; 
        *top:-50%; 
        *left:-50%;
    }

Five, browser input placeholder color reset

input::-webkit-input-placeholder { 
    /* WebKit, Blink, Edge */
    color: #fff;
}
input:-moz-placeholder { 
    /* Mozilla Firefox 4 to 18 */
    color:  #fff;
}
input::-moz-placeholder { 
    /* Mozilla Firefox 19+ */
    color:  #fff;
}
input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color:  #fff;
}

Six, CSS custom input [type = "checkbox"]

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video, input, textarea, button {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  box-sizing: border-box;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  outline: none;
  border-radius: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-appearance: none;
  -webkit-overflow-scrolling: touch;
  @media only screen and (min-width: 1200px) {
    cursor: none !important;
  }
}
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

a:hover, a:active {
  outline: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

Seven, CSS Guidelines

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video, input, textarea, button {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  box-sizing: border-box;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  outline: none;
  border-radius: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-appearance: none;
  -webkit-overflow-scrolling: touch;
  @media only screen and (min-width: 1200px) {
    cursor: none !important;
  }
}
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

a:hover, a:active {
  outline: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

Eight, input is only allowed to enter positive integers/specified number size

    οnkeyup="this.value=this.value.replace(/\D/g,'')" 
    onafterpaste="this.value=this.value.replace(/\D/g,'')"
    //规定允许输入大小值
    $('.threety').on('keyup',function(){
        var v = parseInt($(this).val(), 10);
        if( v > 30){
            $(this).val(30);
        }
    });

Nine, JS quickly finds the matrix sum

    eval(arry.join('+'));

Original link