前言：最近在知乎上看到余弦回答的如何学习web安全，强调了数据流、输入输出，通过输入提交“特殊数据”，特殊数据在数据流的每个层处理，如果某个层没处理好，在输出的时候，就会出现相应层的安全问题。深感安全相当于逆向思考，故只有先掌握正向，才能更好的理解各种漏洞。本来有点急于求成，想直接学前后端开发一套博客系统，能够借此学习框架等。但考虑了一下，还是得慢慢来，先把前端用一些例子大致的了解了解。
一、任务：图片魔方
二、魔方模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Practice</title>
<style type="text/css">
*{
margin: 0; //初始所有外边距为0
padding: 0; //初始所有内边距为0
}
.container{
width: 300px;
height: 300px;
margin: 150px auto; //正方体居中
perspective: 20000000px; //视角远一点
}
.box{
width: 300px;
height: 300px;
transform-style: preserve-3d; //3D
transform: rotateX(45deg) rotateY(45deg);//调试用的，方便看
}
.box-page{
width: 300px;
height: 300px;
position: absolute; //六个面初始化到同一个位置
}
.top{
background-color: red;
transform: translateZ(150px);
}
.bottom{
background-color: green;
transform: translateZ(-150px) rotateX(180deg);
}
.left{
background-color: orange;
transform: translateX(-150px) rotateY(90deg);
}
.right{
background-color: pink;
transform: translateX(150px) rotateY(90deg);
}
.before{
background-color: blue;
transform: translateY(150px) rotateX(90deg);
}
.after{
background-color: yellow;
transform: translateY(-150px) rotateX(90deg);
}
</style>
</head>
<body>
<!-- 容器 -->
<div class="container"> //最外层是为了调整正方体的位置，例如居中
<div class="box">
<div class="box-page top"></div>
<div class="box-page bottom"></div>
<div class="box-page left"></div>
<div class="box-page right"></div>
<div class="box-page before"></div>
<div class="box-page after"></div>
</div>
</div>
</body>
</html>三、带图片的魔方
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Practice</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container{
width: 300px;
height: 300px;
margin: 150px auto;
perspective: 20000000px;
}
.box{
width: 300px;
height: 300px;
transform-style: preserve-3d;
transform: rotateX(45deg) rotateY(45deg);
}
.box-page{
width: 300px;
height: 300px;
position: absolute;
}
.top{
background-color: red;
transform: translateZ(150px);
}
.bottom{
background-color: green;
transform: translateZ(-150px) rotateX(180deg);
}
.left{
background-color: orange;
transform: translateX(-150px) rotateY(90deg);
}
.right{
background-color: pink;
transform: translateX(150px) rotateY(90deg);
}
.before{
background-color: blue;
transform: translateY(150px) rotateX(90deg);
}
.after{
background-color: yellow;
transform: translateY(-150px) rotateX(90deg);
}
</style>
</head>
<body>
<!-- 容器 -->
<div class="container">
<div class="box">
<div class="box-page top"></div>
<div class="box-page bottom"></div>
<div class="box-page left"></div>
<div class="box-page right"></div>
<div class="box-page before"></div>
<div class="box-page after"></div>
</div>
</div>
<script type="text/javascript">
var arr = document.querySelectorAll(".box-page");
for(var n=0; n<arr.length; n++){
for(var r=0; r<3; r++){
for (var c=0; c<3; c++){
var divs=document.createElement("div");
divs.style.cssText="width: 100px; height: 100px; border: 2px solid #ffffff; box-sizing: border-box; position: absolute; background-image: url(a"+n+".png); background-size: 300px 300px;";
arr[n].appendChild(divs);
divs.style.left=c*100+"px";
divs.style.top=r*100+"px";
divs.style.backgroundPositionX=-c*100+"px";
divs.style.backgroundPositionY=-r*100+"px";
}
}
}
</script>
</body>
</html>尚未理解的地方：
- url(a"+n+".png) ：不是很理解为啥是这样拼接的，感觉像字符串拼接，但为啥加号是在里面 -_-
值得深思的地方：
- box-sizing: border-box;
我觉得这位网友的解释挺好的：
box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式。
如果你创造了一个
没有设置 box-sizing 属性为 border-box(不设置的话默认值为 content-box.)，同时你设置 width:100px; border:10px solid red; padding:10px; 那么最终 div 容器的实际宽度为：
100px(width)+210px(padding)+2*10px(border)=140px
所以你会得到一个比你预期（100px）还要更大的容器，结果就是会破坏网页布局。
注意：容易 margin 的尺寸不会被计算入最终容器宽度，因为对他的定义为对这个容器的留白，但不属于容器本身。
如果当我们定义一个容器的 box-sizing 属性为 border-box 时（表达式：br{box-sizing:border-box}），那么我们创建一个和上段中相同设置的
容器时，那么他的最终宽度即为 100px, 那么它的内容部分（content）的有效宽度变成了 100px-2*10px-2*10px =60px; 所以你会得到一个你预期大小的盒子容器，但是只是被压缩了内容部分尺寸而已，但是对于整体布局而言益处颇多。
四、带动画的魔方
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Practice</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container{
width: 300px;
height: 300px;
margin: 150px auto;
perspective: 20000000px;
}
.box{
width: 300px;
height: 300px;
transform-style: preserve-3d;
/* transform: rotateX(45deg) rotateY(45deg); */
animation: box_ro 20s linear infinite ;
}
@keyframes box_ro {
0%{
transform: rotateX(0deg) rotateY(0deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg);
}
}
.box-page{
width: 300px;
height: 300px;
position: absolute;
transform-style: preserve-3d;
}
.top{
/* background-color: red; */
transform: translateZ(150px);
}
.bottom{
/* background-color: green; */
transform: translateZ(-150px) rotateX(180deg);
}
.left{
/* background-color: orange; */
transform: translateX(-150px) rotateY(90deg);
}
.right{
/* background-color: pink; */
transform: translateX(150px) rotateY(90deg);
}
.before{
/* background-color: blue; */
transform: translateY(150px) rotateX(90deg);
}
.after{
/* background-color: yellow; */
transform: translateY(-150px) rotateX(90deg);
}
.box-page div:nth-child(1){
animation: div_move 4s ease-in ;
}
.box-page div:nth-child(2){
animation: div_move 4s ease-in 0.5s;
}
.box-page div:nth-child(3){
animation: div_move 4s ease-in 1s;
}
.box-page div:nth-child(4){
animation: div_move 4s ease-in 1.5s;
}
.box-page div:nth-child(5){
animation: div_move 4s ease-in 2s;
}
.box-page div:nth-child(6){
animation: div_move 4s ease-in 2.5s;
}
.box-page div:nth-child(7){
animation: div_move 4s ease-in 3s;
}
.box-page div:nth-child(8){
animation: div_move 4s ease-in 3.5s;
}
.box-page div:nth-child(9){
animation: div_move 4s ease-in 4s;
}
@keyframes div_move {
0%{
transform: translateZ(0px) scale(1) rotateZ(0deg);
}
20%{
transform: translateZ(300px) scale(0) rotateZ(720deg);
}
90%{
transform: translateZ(300px) scale(0) rotateZ(720deg);
}
100%{
transform: translateZ(0px) scale(1) rotateZ(0deg);
}
}
</style>
</head>
<body>
<!-- 容器 -->
<div class="container">
<div class="box">
<div class="box-page top"></div>
<div class="box-page bottom"></div>
<div class="box-page left"></div>
<div class="box-page right"></div>
<div class="box-page before"></div>
<div class="box-page after"></div>
</div>
</div>
<script type="text/javascript">
var arr = document.querySelectorAll(".box-page");
for(var n=0; n<arr.length; n++){
for(var r=0; r<3; r++){
for (var c=0; c<3; c++){
var divs=document.createElement("div");
divs.style.cssText="width: 100px; height: 100px; border: 2px solid #ffffff; box-sizing: border-box; position: absolute; background-image: url(a"+n+".png); background-size: 300px 300px;";
arr[n].appendChild(divs);
divs.style.left=c*100+"px";
divs.style.top=r*100+"px";
divs.style.backgroundPositionX=-c*100+"px";
divs.style.backgroundPositionY=-r*100+"px";
}
}
}
</script>
</body>
</html>感悟：以完成动画效果为目的，看了过渡与动画的教学视频。过渡就是从一个状态到另一个状态，关键字：transition 。动画则是多个状态组成，制定动画规则：@keyframes 引入动画 ：animation 。但是实现时，发现css的语法有点冗余，例如实现每一小块的动画效果：.box-page div:nth-child(1) 要连续写9次，不知道有没有类似for循环的方法来改善代码冗余的情况。
五、总结
这次主要是通过一个明确的任务为目标去了解一下前端，感觉自己没办法耐下心来把前端完整的过一遍，所以选择了这个方法。当然，这只是出于了解的目的，如果真的要形成前端的知识体系，我觉得还是得学习完整的教学。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
