Web奇技淫巧

Web奇技淫巧

一，文字超过隐藏变...

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

二，CSS3动画效果@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);}
    }

三，清楚浮动Clearfix

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

四，无论多少文字都垂直居中（定位方式）

    //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%;
    }

五，浏览器输入占位符颜色重置

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;
}

六，CSS自定义输入[type =“ checkbox”]

    /* html */
    <input type="checkbox" id="checkbox-all"><label for="checkbox-all"></label>

    /* css*/
    .table input[type="checkbox"]{
        display: none;
    }
    .table input[type="checkbox"] ~ label{
        display: inline-block;
        width: 18px;
        height: 18px;
        color: #fff;
        margin-right:5px;
        cursor: pointer;
        line-height: 18px;
        text-align: center;
        border-radius:5px;
        background-color: #cccccc;
    }
    .table input[type="checkbox"]:checked + label {
        background-color: #0067D0;
    }
    .table input[type="checkbox"] + label:before{
        content:"\2714";
    }

六，CSS指南

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;
}

七，input只允许输入正整数/规定数字大小

    onkeyup="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);
        }
    });