Web奇技淫巧
转载自 “ i_木木木木木 ” 的简书
一,文字超过隐藏变…
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, 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;
}
七,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只允许输入正整数/规定数字大小
ο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);
}
});
九,JS快速求矩阵和
eval(arry.join('+'));