细数前端中的一些黑科技
2016-12-09 本文已影响2602人
MR_LIXP
请各位读者添加一下作者的微信公众号，以后有新的文章，将在微信公众号直接推送给各位，非常感谢。
1.前言
最近忙的焦头烂额，今天下午准备静下心来反思一下，结果看了下知乎就停不下来了，捂脸 ing。
好了，不扯淡了。
今天下午看了一些内容，发现是一些自己之前不注意，或者看了一次就再也没用过的东西，今天正好就一起整理分享一下。
2.实时编辑 CSS
在 HTML 5 中新增了一个新的全局属性，contenteditable 属性。
contenteditable 属性规定是否可编辑元素的内容。
我们可以通过设置这个属性，来对之前的一些文本进行编辑。
就像这样。
该属性的取值：
| 值 | 描述 |
|---|---|
| true | 规定可以编辑元素内容。 |
| false | 规定无法编辑元素内容。 |
| classname | 继承父元素的 contenteditable 属性。 |
样例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李鹏李先生</title>
</head>
<body>
<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>
</body>
</html>
那这个属性值和我们今天要说的内容有什么关系呢？
我们可以利用当前内容可编辑的这个特性，来去实现一个小的效果，例如这样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MR_LP</title>
</head>
<body>
<style style="display:block" contentEditable>
body { color: blue }
</style>
</body>
</html>
当然，要测试出来效果，你自己还是需要会一些 CSS 的，尴尬脸。
3.多重边框
如果大家需要制作这么一个效果，按照一般的写法，我们一般是使用多重 div 相互嵌套，之后分别针对每个 div 实现效果。
样例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div_5{
width: 500px;
height: 300px;
background: #fff;
}
.div_4 , .div_3 , .div_2 , .div_1{
background: rgba(0,0,0,.2);
padding: 10px;
}
.div_4{
width: 500px;
height: 300px;
}
.div_3{
width: 520px;
height: 320px;
}
.div_2{
width: 540px;
height: 340px;
}
.div_1{
width: 560px;
height: 360px;
}
</style>
</head>
<body>
<!-- .div_1>.div_2>.div_3>.div_4>.div_5 -->
<div class="div_1">
<div class="div_2">
<div class="div_3">
<div class="div_4">
<div class="div_5"></div>
</div>
</div>
</div>
</div>
</body>
</html>
但是，实际上大家可能忘记了一个小的东西，叫做 box-shadow。
这个属性是专门用于制作阴影的一个属性，可是我们平常已知的 box-shadow 不都是设置一个阴影么？
那么多重阴影该怎么设置呢？
实际上我们的 box-shadow 其实是可以设置多层的，只需要在模糊半径设置后面再追加一个阴影的距离就 OK 啦。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MR_LP:3206064928</title>
<style type="text/css">
div {
box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2),
0 0 0 12px rgba(0, 0, 0, 0.2),
0 0 0 18px rgba(0, 0, 0, 0.2),
0 0 0 24px rgba(0, 0, 0, 0.2);
height: 200px;
margin: 50px auto;
width: 400px
}
</style>
</head>
<body>
<div></div>
</body>
</html>
通过这样的方式，我们就可以一次性设置出来多个阴影的边框啦。
4. calc （）
不知道大家有没有见过这个？
.box{
width: calc(100% - (10px + 5px) * 2);
}
CSS 属性的中的宽度还可以这么写？
这个像函数一样的东西是什么东西呢？
calc()从字面我们可以把他理解为一个函数function。
其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。
比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。
为何说是动态值呢?因为我们使用的表达式来得到的值。
不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。
calc()语法非常简单，就像我们小时候学加 （+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示。
而且我们在使用的过程中，需要注意下面几条使用规则：
- 使用“+”、“-”、“*” 和 “/”四则运算；
- 可以使用百分比、px、em、rem等单位；
- 可以混合使用各种单位进行计算；
- 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
- 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
同时非常幸运的一点，浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器还没仅有“firefox for android 14.0”支持，其他的全军覆没。
OK，既然我们知道了这个东西具体是什么，那么这个东西怎么使用呢？
我们一起来看一个小例子。
首先我们设置这么一个嵌套的 div。
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MR_LP:3206064928</title>
<style type="text/css">
.demo{
width: 400px;
background: red;
}
.box{
width: 100%;
height: 300px;
background: blue;
}
</style>
</head>
<body>
<div class="demo">
<div class="box"></div>
</div>
</body>
</html>
这时候发现，我们的 box 已经完全将他的父级 demo “覆盖”了。
这个时候，如果我们将子级的内容大小加大，会怎么样呢？
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MR_LP:3206064928</title>
<style type="text/css">
.demo{
width: 400px;
background: red;
padding: 3px 0;
}
.box{
width: 100%;
height: 300px;
background: blue;
padding: 10px;
border: 5px solid #ccc;
}
</style>
</head>
<body>
<div class="demo">
<div class="box"></div>
</div>
</body>
</html>
我们会发现，我们的子级 div 已经超出了父级 div 的大小，已经“装不下了”。
这个时候怎么办？
使用 box-sizing ？
.box{
width: 100%;
height: 300px;
background: blue;
padding: 10px;
border: 5px solid #ccc;
box-sizing: border-box;
}
这样确实可以解决，但是 这样未免太 LOW 了点。
这时候就轮到我们的 ** calc( )函数** 登场了，我们可以在计算宽度等内容的时候，直接这么写。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MR_LP:3206064928</title>
<style type="text/css">
.demo{
width: 400px;
background: red;
padding: 3px 0;
}
.box{
/*width: 100%;*/
height: 300px;
background: blue;
padding: 10px;
border: 5px solid #ccc;
width: calc(100% - (10px + 5px) * 2);
}
</style>
</head>
<body>
<div class="demo">
<div class="box"></div>
</div>
</body>
</html>
什么意思呢？
我们只需要在我们正常的流式布局当中，去将宽度设置为父级宽度的100%，之后我们不是设置了 padding 和 border 么，这时候值需要将我们设置的多余的内容直接减去就可以。
这样我们就不需要更改盒模型原本的计算方式，但是也能实现我们所需要的效果啦。
最后放上一个布局的小例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MR_LP:3206064928</title>
<style type="text/css">
body {
background: #E8EADD;
color: #3C323A;
padding: 20px;
}
.wrapper {
width: 1024px; /* Fallback for browsers that don't support the calc() function */
width: -moz-calc(100% - 40px);
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
margin: auto;
}
#header {
background: #f60;
padding: 20px;
width: 984px;/*Fallback for browsers that don't support the calc() function*/
width: -moz-calc(100% - 40px);
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
}
#main {
border: 8px solid #B8C172;
float: left;
margin-bottom: 20px;
margin-right: 20px;
padding: 20px;
width: 704px; /* Fallback for browsers that don't support the calc() function */
width: -moz-calc(75% - 20px * 2 - 8px * 2);
width: -webkit-calc(75% - 20px * 2 - 8px * 2);
width: calc(75% - 20px * 2 - 8px * 2);
}
#accessory {
border: 8px solid #B8C172;
float: right;
padding: 10px;
width: 208px; /* Fallback for browsers that don't support the calc() function */
width: -moz-calc(25% - 10px * 2 - 8px * 2 - 20px);
width: -webkit-calc(25% - 10px * 2 - 8px * 2 - 20px);
width: calc(25% - 10px * 2 - 8px * 2 - 20px);
}
#footer {
clear:both;
background: #000;
padding: 20px;
color: #fff;
width: 984px;/* Fallback for browsers that don't support the calc() function */
width: -moz-calc(100% - 40px);
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
}
</style>
</head>
<body>
<div class="wrapper">
<div id="header">
<h1>CSS3 calc() Function</h1>
</div>
<div id="main">
<h1>Far far away…</h1>
<p>Far far away, behind the word mountains…</p>
</div>
<div id="accessory">
<ul>
<li><a href="#">Far far away…</a></li>
<li><a href="#">Separated they live…</a></li>
<li><a href="#">A small river named…</a></li>
</ul>
</div>
<div id="footer">
Visit the article…
</div>
</div>
</body>
</html>
5. 蚂蚁线
身为一只“前端喵”，PS 是我们平常工作中不可缺少的一个东西，那不知道大家有没有注意过，我们在选框的时候，我们的线条是一直在动的呢？
这个我个人喜欢把它叫做“蚂蚁线”，因为觉得它们像小蚂蚁，超可爱。
那我们在 HTML 当中，该如何去完成这个东西呢？
其实非常简单，我们只需要将我们的边框设置为透明，之后利用 背景的填充范围是整个盒子的特性就可以啦。
具体实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MR_LP:3206064928</title>
<style type="text/css">
@keyframes ants {
to { background-position:100% }
}
div{
width: 200px;
height:200px;
padding:1em;
border: 1px solid transparent;
background:
linear-gradient(white,white) padding-box,
repeating-linear-gradient( -45deg,
black 0,
black 25%,
white 0,
white 50%) 0 /.6em;
animation:ants 12s linear infinite;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
最后实现出来的效果。
这里我主要通过设置背景的一个渐变重复，并且通过动画来不断移动，最后实现的这个效果，感兴趣的同学快自己动手试一下吧。
6. JSON.stringify( )
相信大家对 JS 中的 ** toString( )** 方法已经非常熟练了，它可以将我们的内容转化为字符串显示给我们。
如果我们现在需要打印的内容是一个 JSON 呢？
这个时候怎么办呢？
var student = new Object();
student.name = "Lanny";
student.age = "25";
student.location = "China";
alert(student);
我们会发现，我们打印出来的内容实际上只是一个 Object，我们该怎么看到里面的内容呢？
这时候我们可以使用这么一个东西。
JSON.stringify( )
什么意思呢？
首先先说一下 stringify 的意思。
ify---为后缀，使……化, 使成
这和ize类似
ze---做成，变成，……化
serial --> serialize：序列化
string --> stringify ：字符串化
使用的时候其实也非常简单，只需要将我们的字符串丢进这个方法中就可以，例如这样。
var student = new Object();
student.name = "Lanny";
student.age = "25";
student.location = "China";
var json = JSON.stringify(student);
alert(json);
// alert(student);
这样我们就可以看见我们 JSON 串中的内容了。
除此之外，我们还可以在当前这个方法后面加函数。
var students = new Array() ;
students[0] = "mr";
students[1] = "_";
students[2] = "lp";
var json = JSON.stringify(students,switchUpper);
function switchUpper(key, value) {
return value.toString().toUpperCase();
}
alert(json);
/*下面这种方式也可以
var json = JSON.stringify(students, function (key,value) { return value.toString().toUpperCase()});
alert(json);
*/
之后通过我们添加的函数，将我们的内容从新转换为大写。
甚至我们还可以这么玩，在当前内容后面添加数字，就会直接隔开，添加转义字符，也可以实现特殊效果。甚至于，我们还在意在后面添加文字，在打印出的每一项内容前面，还会加上我们的文字。
var stuObj = new Object();
stuObj.qq = "3206064928";
stuObj.name = "MR_LP";
stuObj.age = 18;
var stuArr = new Array();
stuArr[0] = "name";
stuArr[1] = "qq";
stuArr[2] = "addr";//这个stuObj对象里不存在。
// var json = JSON.stringify(stuObj,stuArr,'\t');
var json = JSON.stringify(stuObj,stuArr,1000);
// var json = JSON.stringify(stuObj,stuArr,'OK ');
alert(json);
需要注意，如果后面的跟上的是一个数组的话，这样就不可以咯。
var stuArr1 = new Array() ;
stuArr1[0] = "wo";
stuArr1[1] = "hao";
stuArr1[2] = "shuai";
var stuArr2 = new Array();
stuArr2[0] = "1";
stuArr2[1] = "2";
var json = JSON.stringify(stuArr1,stuArr2)
alert(json);
7.大白 (●—●)
这个东西也是经常被拿来玩的一个小东西，就是通过 border-radius 去自己切一个图形。
正好在网上看到大白的这个源码，就一起分享给大家啦。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Baymax</title>
<link rel=stylesheet href="demo2.css"/>
</head>
<style>
body {
background: #595959;
}
#baymax{
/*设置为 居中*/
margin: 0 auto;
/*高度*/
height: 600px;
/*隐藏溢出*/
overflow: hidden;
}
#head{
height: 64px;
width: 100px;
/*以百分比定义圆角的形状*/
border-radius: 50%;
/*背景*/
background: #fff;
margin: 0 auto;
margin-bottom: -20px;
/*设置下边框的样式*/
border-bottom: 5px solid #e0e0e0;
/*属性设置元素的堆叠顺序； 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/
z-index: 100;
/*生成相对定位的元素*/
position: relative;
}
#eye,
#eye2{
width: 11px;
height: 13px;
background: #282828;
border-radius: 50%;
position: relative;
top: 30px;
left: 27px;
/*旋转该元素*/
transform: rotate(8deg);
}
#eye2{
/*使其旋转对称*/
transform: rotate(-8deg);
left: 69px; top: 17px;
}
#mouth{
width: 38px;
height: 1.5px;
background: #282828;
position: relative;
left: 34px;
top: 10px;
}
/*躯干和腹部*/
#torso,
#belly{
margin: 0 auto;
height: 200px;
width: 180px;
background: #fff;
border-radius: 47%;
/*设置边框*/
border: 5px solid #e0e0e0;
border-top: none;
z-index: 1;
}
#belly{
height: 300px;
width: 245px;
margin-top: -140px;
z-index: 5;
}
#cover{
width: 190px;
background: #fff;
height: 150px;
margin: 0 auto;
position: relative;
top: -20px;
border-radius: 50%;
}
/*心脏*/
#heart{
width:25px;
height:25px;
border-radius:50%;
position:relative;
/*向边框四周添加阴影效果*/
box-shadow:2px 5px 2px #ccc inset;
right:-115px;
top:40px;
z-index:111;
border:1px solid #ccc;
}
/*手臂*/
#left-arm,
#right-arm{
height: 270px;
width: 120px;
border-radius: 50%;
background: #fff;
margin: 0 auto;
position: relative;
top: -350px;
left: -100px;
transform: rotate(20deg);
z-index: -1;
}
#right-arm{
transform: rotate(-20deg);
left: 100px;
top: -620px;
}
/*手指头*/
#l-bigfinger,
#r-bigfinger{
height: 50px;
width: 20px;
border-radius: 50%;
background: #fff;
position: relative;
top: 250px;
left: 50px;
transform: rotate(-50deg);
}
#r-bigfinger{
left: 50px;
transform: rotate(50deg);
}
#l-smallfinger,
#r-smallfinger{
height: 35px;
width: 15px;
border-radius: 50%;
background: #fff;
position: relative;
top: 195px;
left: 66px;
transform: rotate(-40deg);
}
#r-smallfinger{
background: #fff;
transform: rotate(40deg);
top: 195px;
left: 37px;
}
/*大腿*/
#left-leg,
#right-leg{
height: 170px;
width: 90px;
border-radius: 40% 30% 10px 45%;
background: #fff;
position: relative;
top: -640px;
left: -45px;
transform: rotate(-1deg);
z-index: -2;
margin: 0 auto;
}
#right-leg{
background: #fff;
border-radius:30% 40% 45% 10px;
margin: 0 auto;
top: -810px;
left: 50px;
transform: rotate(1deg);
}
</style>
<body>
<div id="baymax">
<!-- 定义头部，包括两个眼睛、嘴 -->
<div id="head">
<div id="eye"></div>
<div id="eye2"></div>
<div id="mouth"></div>
</div>
<!-- 定义躯干，包括心脏 -->
<div id="torso">
<div id="heart"></div>
</div>
<!-- 定义肚子腹部，包括 cover（和躯干的连接处） -->
<div id="belly">
<div id="cover"></div>
</div>
<!-- 定义左臂，包括一大一小两个手指 -->
<div id="left-arm">
<div id="l-bigfinger"></div>
<div id="l-smallfinger"></div>
</div>
<!-- 定义右臂，同样包括一大一小两个手指 -->
<div id="right-arm">
<div id="r-bigfinger"></div>
<div id="r-smallfinger"></div>
</div>
<!-- 定义左腿 -->
<div id="left-leg"></div>
<!-- 定义右腿 -->
<div id="right-leg"></div>
</div>
</body>
<html>
