HTML(HTML5)+CSS(CSS3)+Javascript(Jquery)（自己总结常用的）

1.关于多余文本变成省略号

（1）需要显示一行文本

overflow: hidden; 
text-overflow: ellipsis;
white-space: nowrap;

（2）需要显示多行文本

width: 100%;    //可根据需求改变宽度
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;  //显示的行数
overflow:hidden;

2.关于元素定位

（1）文本元素居中显示

text-align: center;

（2）块级元素居中显示（一般定位）

margin: auto;

（3）块级元素居中显示（position: absolute;）

margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;

（4）用父元素来定位子元素（又被称为flex布局）

//垂直居中
display: flex;
align-items: center;

//如果还要水平居中
justify-content: center;

3.关于图片

（1）图片变成黑白色

-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;

（2）图片虚化

-webkit-filter: blur(15px);
 -moz-filter: blur(15px);
 -o-filter: blur(15px);
 -ms-filter: blur(15px);
 filter: blur(15px);

4.关于css3动画效果

（1）让一个元素无限转动

//定义一个动画  动画名为 run
@-webkit-keyframes run{     
   from{     
       -webkit-transform:rotate(0deg);     
   }     
   to{     
       -webkit-transform:rotate(360deg);     
   }     
 }  

（2）一条线，从左到右出现，再从左到右消失（很多企业网站中会使用）

//定义线的样式
.xian{
	width:100%; 
	height:2px; 
	background:#413d3d; 
	position:absolute; 
	left:0; 
	bottom:0; 
	transform-origin:100%; 
	-webkit-transform-origin:100%; 
	-webkit-transition:-webkit-transform .4s cubic-bezier(.4,0,.2,1); 
	transition:-webkit-transform .4s cubic-bezier(.4,0,.2,1); 
	transition:transform .4s cubic-bezier(.4,0,.2,1); 
	transition:transform .4s cubic-bezier(.4,0,.2,1),-webkit-transform .4s cubic-bezier(.4,0,.2,1); 
	transform:scaleX(0); 
	-webkit-transform:scaleX(0); 
	visibility:hidden\9;
}

//获取焦点时 触发
.mydiv:hover .xian{
	transform:scaleX(1); 
	-webkit-transform:scaleX(1); 
	-moz-transform:scaleX(1); 
	transform-origin:0; 
	-webkit-transform-origin:0; 
	visibility:visible\9;
}

5.关于文本框

（1）清空文本框历史记录

（2）修改文本框内（placeholder）默认样式

/* WebKit browsers */
input::-webkit-input-placeholder {
    color: #C0C0C0;
    font-size: 14px;
}
/* Mozilla Firefox 4 to 18 */
input:-moz-placeholder {
    color: #C0C0C0;
    font-size: 14px;
}
/* Mozilla Firefox 19+ */
input::-moz-placeholder {
    color: #C0C0C0;
    font-size: 14px;
}
/* Internet Explorer 10+ */
input:-ms-input-placeholder {
    color: #C0C0C0;
    font-size: 14px;
}

6.关于JS常用效果

（1）页面刷新的同时，页面回到顶部

window.onbeforeunload = function(){
    document.documentElement.scrollTop = 0;  //ie下
    document.body.scrollTop = 0;  //非ie
}

（2）回到顶部，有过渡动画

(function smoothscroll(){
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo (0,currentScroll - (currentScroll/5));
    }
})();

（3）禁止用户F12查看源代码（只举其中一例，其实就是禁止点击F12,其他键可查询相应的键码）

document.onkeydown = function () {
	  //因为F12 对应 123
       if (window.event && window.event.keyCode == 123) {

              event.keyCode = 0;
              event.returnValue = false;

               return false;
       }
};

（4）禁止鼠标轮滚

function unscroll(){   
	var top  = $(document).scrollTop();
	$(document).on('scroll.unable',function(e){
		  $(document).scrollTop(top);
	});
}

（5）鼠标可以轮滚

function inscroll(){   
	$(document).unbind("scroll.unable");
}

（6）手动播放暂停视频（音频同理），Jquery

$('video').trigger('play');
$('video').trigger('pause');