Web奇技淫巧

文字超出隐藏变...

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

// 规定超出几行显示'···'
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

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; 
    width:400px; 
    margin:0 auto; 
    position:relative;
}
.middle-inner{
    display: table-cell; 
    vertical-align:middle; 
    width:100%; 
    text-align:center;
}
.middle-inner p{
    position:relative; 
}

浏览器input placeholder颜色重置

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自定义input[type="checkbox"]

演示地址：http://js.itivy.com/jiaoben1503/index.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只允许输入正整数/规定数字大小

/* html */
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);
    }
});

JS快速求数组和

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

判断滚动事件(回到顶部 + 检测滚动底部)

let scrollBody = document.getElementById('ID')
scrollBody.onscroll = () => {
    // 获取距离顶部的距离
    let scrollHeight = scrollBody.scrollTop
    // 获取可视区的高度
    let viewHeight = scrollBody.clientHeight
    // 获取滚动条的总高度
    let bodyHeight = scrollBody.scrollHeight
    // 超出固定高度显示回到顶部
    scrollHeight > 600 ? this.showFlag = true : this.showFlag = false
    // 判断滚动到页面底部执行方法
    if (scrollHeight + viewHeight >= bodyHeight) {
      // do something here
    }
}