工作中常用的css技巧,用于后期快速查询,不分先后。
日期处理“2019-10-25”
// 后台返回的此类时间,在IOS环境中是无法处理的
// 因此我们需要把此类时间转换为2019/10/25 才可以
function changeTime(val){
// 判断传入的时间值是否存在,存在就把中间的-替换成/ 否则就使用当前电脑时间
val=val?val.replace(/-/g,'/'):new Date();
return val
}
INPUT 输入框数字键盘(移动端)
<input type="text"
name="mobile"
placeholder="请输入手机号码"
autocomplete="off"
pattern="[0-9]*"
maxlength="11"
data-required='true'
data-tips="请输入您的手机">
彩色虚线css样式
xxx-class::before{
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 2px;
background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
background-size: 81px;
}
英文字母换行;显示一行;显示两行,超过两行之后显示省略号(前提有固定宽度)
.text{
// 英文字母换行
word-wrap: break-word;
// 显示一行
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
// 两行显示省略号
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
禁止用户长按选中文字
// 禁止用户长按选中文字
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
移动端点击时增加active效果
// 需要点击的按钮样式添加
&:active {
background: rgba(243, 128, 43, .6);
color: #fff;
-webkit-tap-highlight-color: transparent;
}
//JS中添加
document.body.addEventListener('touchstart', function () {});
fixed布局时技巧
// 防止fixed抖动,在需要的样式中添加
-webkit-transform: translateZ(0);
背景高斯模糊效果
/* 背景朦胧 在需要朦胧的元素上添加此样式*/
.filterBg {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}
文字两端对齐
span{
display: inline-block;
text-align: justify;
text-align-last: justify;
}
LOADING 转圈HTML+CSS
<div class="loadingBox" id="loadingBox" style="display: none">
<div class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
</div>
// css 样式,采用的less语法
.loadingBox {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 10001;
background: rgba(0, 0, 0, 0.1);
/* TWEENER - IE 10 */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-moz-align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
.spinner {
width: 30px;
height: 30px;
position: relative;
margin-bottom: 1.0rem;
.spinner-container {
position: absolute;
width: 100%;
height: 100%;
}
}
.container1>div,
.container2>div,
.container3>div {
width: 8px;
height: 8px;
background-color: #FE7C04;
border-radius: 100%;
position: absolute;
-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
animation: bouncedelay 1.2s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.container2 {
-webkit-transform: rotateZ(45deg);
-ms-transform: rotate(45deg);
transform: rotateZ(45deg);
.circle1 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
}
.container3 {
-webkit-transform: rotateZ(90deg);
-ms-transform: rotate(90deg);
transform: rotateZ(90deg);
.circle1 {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
}
.circle1 {
top: 0;
left: 0;
}
.circle2 {
top: 0;
right: 0;
}
.circle3 {
right: 0;
bottom: 0;
}
.circle4 {
left: 0;
bottom: 0;
}
.container1 .circle2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.container2 .circle2 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.container3 .circle2 {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.container1 .circle3 {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.container2 .circle3 {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.container3 .circle3 {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.container1 .circle4 {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.container2 .circle4 {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.container3 .circle4 {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}
}
@-webkit-keyframes bouncedelay {
0%,
100%,
80% {
-webkit-transform: scale(0);
}
40% {
-webkit-transform: scale(1);
}
}
@keyframes bouncedelay {
0%,
100%,
80% {
transform: scale(0);
-webkit-transform: scale(0);
}
40% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
封装TOAST
/**
* 显示信息用于请求回调的错误信息显示
* 需要检查reset.css中是否有tipsBox样式
* @param {*} str
*/
function showMsg(str, time) {
time = time || 1500;
var timer1 = null,
timer2 = null;
// 判断是否已经存在tipsbox元素,如果存在就不用添加了
var oldtipsbox = document.getElementById('tipsbox');
if (oldtipsbox != null) {
clearTimeout(timer1);
oldtipsbox.getElementsByClassName('tips')[0].innerHTML = str;
oldtipsbox.style.display = "flex";
timer1 = window.setTimeout(function () {
oldtipsbox.style.display = "none";
}, time)
} else {
clearTimeout(timer2);
var fragment = document.createDocumentFragment();
var tipsbox = document.createElement('div');
var tips = document.createElement('div');
tipsbox.setAttribute("class", "tipsbox");
tipsbox.setAttribute("id", "tipsbox");
tips.setAttribute("class", "tips");
tips.innerHTML = str;
tipsbox.appendChild(tips);
fragment.appendChild(tipsbox);
// 把文档碎片添加到body中
document.body.appendChild(fragment);
// 默认显示的时间
timer2 = window.setTimeout(function () {
tipsbox.style.display = "none";
}, time)
}
};
// CSS样式
.tipsbox {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 90000
}
.tipsbox .tips {
padding: .4rem .3rem;
background: rgba(0, 0, 0, 0.7);
border-radius: 12px;
color: #fff;
font-size: .28rem;
max-width: 6.0rem;
line-height: .6rem;
text-align: center
}