结束了一天劳累的学习，我躺在床头，脑袋里又有了点子，在探索创意与想象的无垠宇宙里，隐藏着一道神秘的界线，那就是我们即将启程的点子——“盲盒传送门(附送女友..)”。那到底是啥点子呢，让我从有磁力的床上立马就跳了下来进行编码？我的点子是这样的：”在页面创建六扇未知内容的魔力门，在用鼠标指针触碰其中一扇门的时候能够看到在门里真正有什么，我主要希望能在其中看到特别漂亮的美女和特别帅的帅哥啦！并且隐藏其中的内容展开的形式是缓慢的有一个缓缓展开大门的感觉，就像是把我传送到了帅哥美女的身边，这是上天赐给我的另一半嘛！嘿嘿~想想就刺激呢“
静态效果图如下
动态效果图如下-->别问我，我也不知道帅哥美女中间为什么会蹦出来开国第一大将军和存折。
那么话不多说，Let Working!
思路
为了建立我们写项目流程的规范，我们的步骤应先从
①确定html架构 --定结构
②编写css样式 --上渲染
③编写js函数 --给互动
但由于该没有用到js，所以第三条可以暂时忽略，但是在以后进行项目上的编写时，一定要记住这三层顺序。
第一步结构上的思路：一个大盒子accordion包裹一个ul，然后ul内包含六个li，当然不用ul>li的结构也可以，直接用div也是一样的效果，html代码如下
第二步样式上大体的思路：
1、首先我们良好的习惯要保留，reset所有元素。
2、将body设置为弹性容器，并使子元素accordion垂直水平居中。
3、将title的位置设置为绝对位置，因为后面我们将大盒子accordion设置为弹性容器，title无法置于最上层。
4、先将ul设置为弹性容器，不然六个li会一行一行的占据。
5、再将ul摆放好位置，将其置于页面的中间。
6、然后在li上设置指针cursor：pointer，在指针指向目标时变成手指,设置过渡动画(缓慢将门打开)
7、在每一个li的兄弟都加上不同的门颜色(背景色)，在hover伪元素选择器上加上盲盒传送门(背景图的更换)，并且将li元素放大到原来的两倍
css代码如下(此处使用 Stylus 语法编写的 styl 文件)
.styl文件是一种使用 Stylus 语法编写的 CSS 预处理器文件。Stylus 是一种动态的、具有强大功能的 CSS 编写语言，它支持变量、嵌套规则、混合（mixins）、运算符、函数等功能，使得 CSS 的编写更加简洁、灵活且易于维护。Stylus 文件最终会被编译成标准的 CSS 文件，以便浏览器解析和应用样式。
结语
##这样我们就能打开盲盒传送的大门了，其中每个大门背后的人物都可以自行设置，也可以用一个恐怖的女鬼头来吓吓最爱的朋友们，这里因为怕过不了审，这次就不整这个活了,是不是还挺好玩的，既学到了基础的知识，又给生活带来了乐趣，可以假装这是自己的男、女朋友在跟自己玩耍，这样的学习才不至于枯燥嘛~希望大家有什么关于前端学习的创意，可以在评论区留下你的创意，如果在我的能力范围内的话我也会去尝试，在下面附上这几张图片，若有需要请自取。**z
我是cc的牛奶，如果您觉得这篇文章对你有帮助或者有意思，请留下一个宝贵的赞❤！
