只用一个div,我们能做什么？

发表于   |     |   阅读次数

前言

现在都流行用纯css实现一些非常有趣的事情，比如纯css实现”暖男大白”啦( 戳这里 )，纯css实现哆啦a梦啦( 戳这里 )等等，还有只用一个div我们能做哪些有趣的事情啦，今天我也准备写一篇文章( 持续更新 )，记录自己平时学习和工作过程中只用一个div来完成的一些应用和好玩的东西。

以后陆续更新会将demo保存在这里

html结构都是一个div所以不会展示其部分代码，只会分析和展示css部分

1. 画一个伸缩展开菜单按钮

首先我们来画一个前端工作中经常要用到的一个icon图标，伸缩展开菜单按钮*,他的主要作用就是将隐藏的菜单展开以显示或者伸缩以隐藏。如下图所示,或者请戳你的浏览器右上角…Go。

伸缩展开按钮

code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.hamburger {
  position: relative;
  width: 50px;
  height: 50px;
  cursor: pointer;
  border: solid 1px #68EA58;
}
.hamburger:before,.hamburger:after{
  display: block;;
  content: '';
  width: 60%;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.hamburger:before {
  border-top: 4px solid #68EA58;
  border-bottom: 4px solid #68EA58;
  height: 14px;
}
.hamburger:after {
  background: #68EA58;
  height: 4px;
}

看效果，点击这里

2. 回到顶部

几乎每一张网页都有一个回到顶部的按钮，方便用户随浏览时，回到网页顶部进行其他的操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/*回到顶部*/
.to-top{
  border-radius: 50%;
}
.to-top:after,.to-top:before{
  display: block;;
  content: '';
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}
.to-top:before{
  border: solid 14px #68EA58;
  border-left-color: transparent;
  border-top-color: transparent;
  border-right-color: transparent;
}
.to-top:after{
  width: 12px;
  height: 12px;
  background-color: #68EA58;
  top:28px;
}

看效果，点击这里

3. 消息提示框

一般前端工作中会有这样的需求，鼠标进行某些操作，进而给到用户一些提示信息，这些提示信息的载体是一个提示框。

code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*信息提示*/
.message{
  border-radius: 4px;
  height: 30px !important;
}
.message:after{
  display: block;
  content: '';
  position: absolute;
  border-bottom: 6px solid transparent;
  border-left:6px solid  #68EA58;;
  bottom: -6px;
  left: 20%;
}

看效果，点击这里

4. 搜索按钮

搜索按钮对于我们来说在熟悉不过，几乎涉及到搜索的地方都会有一个搜索按钮，用来提示用户这一块是用于搜索信息用的

code



.search{
  width: 24px !important;
  height: 4px !important;
  background-color:  #68EA58;
  -webkit-transform: rotate(45deg) translateX(14px) ;
  -ms-transform: rotate(45deg) translateX(14px) ;
  -o-transform: rotate(45deg) translateX(14px) ;
  transform: rotate(45deg) translateX(14px);
}

.search:before{
  display: block;
  content: '';
  width: 20px;
  height: 20px;
  border: 4px solid #68EA58;
  border-radius: 50%;
  position: absolute;
  left: -28px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}