demo0:用CSS3制作一个关闭按钮

提要:本demo会用到before伪元素、after伪元素、transition、transform等css3新特性,本demo只会涉及到2db变换

最终效果:

需求分析:

今天,你接手了你的公司官网改版的需求,你看了一会新版的官网(用于PC访问的web端)设计稿,有很多地方可以弹框显示信息,而每个弹框右上角都有一个关闭按钮。你想,如果我把关闭按钮切成一个图片,那么这个图片也太小了吧,这么小的图片还要占用一次HTTP请求,这实在是不划算。为了给官网提供更流畅的访问体验,你决定用一个div配合一些公共的css样式来自己实现关闭按钮,这样每次需要的时候,直接把这个div标签写在那里就好了。说干就干,你开始分析这个div该怎么写:(建议读者先自己分析,再看下面的思路和代码)

首先,既然是web端访问,那么这个按钮的大小是一定的,所以先测量出按钮的一些参数。如图,按钮的宽度和高度都是62像素,而内部的叉高度为45像素。

所以自然而然,一个div的骨架出现了。

<!--html-->
<div class="x"></div>
/*css*/
.x{width: 62px;height: 62px;background-color: #000;}

既然要用一个div实现,于是你想到了before和after伪元素。这两个伪元素作为虚拟元素插在被选择元素的前后,值得注意的是:before和after是虚假的元素,在源代码中找不到,对用户可见,可以用css控制。before和after的属性中,content属性都必须存在,可以为空。另外,before、after伪元素是他们所依附的元素的子元素,而不是兄弟元素。也就是说:

此外,要知道before和after伪元素都是内联元素,如果要为他们设置宽高,需要将它们的display属性设置为block。

因此,你决定用before和after这两个元素划两条线,然后把这两条线都使用绝对定位,定位到div的正中央,最后,将这两条线分别顺时针和逆时针旋转45度。如何进行45度旋转,这里需要了解css3的transform特性。

transform是变换的意思,这个属性属性允许我们对元素进行旋转、缩放、移动或倾斜,transform的值必须是对变换方式进行精确描述的代码。比如:

/*以下代码列出的变换仅为2d变换,3d变换我们会在后续章节涉及,同学们也可自行探究*/
.someClass{transform: translateX(10px,20px);/*向右平移10px,向下平移20px*/}
.someClass{transform: scale(0.5,1.5);/*水平方向缩放为0.5倍,竖直方向为1.5倍*/}
.someDiv{transform: rotate(45deg);/*以中间点为轴,顺时针旋转45度*/}

于是代码被进一步完善:

<!--html-->
<div class="x"></div>
.x{width: 62px;height: 62px;background-color: #000;position: relative;}

.x:before{content:"";display: block;width: 1px;height: 64px;background-color: #fff;position: absolute;left: 31px;top: -1px;transform: rotate(45deg);}

.x:after{content:"";display: block;width: 1px;height: 64px;background-color: #fff;position: absolute;left: 31px;top: -1px;transform: rotate(-45deg);}

现在你应该可以在界面中看到想要的结果了,但是还没完。永远不要忘记我们的界面是直接呈现给用户的,优秀的交互效果不可或缺,对于按钮来说,我们永远要让用户清晰地知道哪个按钮是可以点击的,哪个是不可以的,为什么不可以点击。所以现在看来,这个按钮是不是不够酷炫?

因此我们要为按钮加上两个效果,第一个是鼠标画上去的手型。这个可以通过下面的代码来实现。

.x{cursor:pointer;}

第二个效果是鼠标放上去时,这个按钮要整体旋转一圈。这里我们选择利用伪类hover让它旋转一圈。可是hover不具有延时性————如果在在一秒内旋转一圈会是很好的效果,而如果在0秒内旋转一圈,这不是和没旋转一样嘛。

旋转360度的效果可以用刚刚遇到的transform: rotate(360deg)来实现,而时间过渡需要用transition属性来实现。

transition是过渡的意思,他设置当元素的某个属性值变化时,丛原有值改变为新值所需的时间。因此,我们必须要确定什么时候一个属性的值会被改变(比如hover的时候,宽度可以改变),我们也要告诉transition属性这个值的名称和过度的时间。请参考如下代码:

.someClass{width:100px;transition:width 2s;/*当width改变的时候,需要花费2秒的时间*/}
.someClass:hover{width:200px;}
/*当鼠标滑动到class为someClass的元素上时,该元素宽度会在两秒内丛100px变成200px*/

因此,我们可以将代码做进一步加工,加上如下内容:

.x{cursor:pointer;transition: transform 0.5s;}
.x:hover{transform: rotate(360deg);

一个酷炫的关闭按钮就完全实现了。在线试玩地址:http://siida.cn/book/demo0.html

总结

通过关闭按钮的实现,我们学到了以下4个实用的css3新特性:transform,transition,before,after。

全部代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo 0</title>
    <style>
    .x{width: 62px;height: 62px;position: relative;background-color: #000;transition: transform 0.5s;cursor: pointer;}
    .x:before{content:"";display: block;width: 1px;height: 64px;background-color: #fff;position: absolute;left: 31px;top: -1px;transform: rotate(45deg);}
    .x:after{content:"";display: block;width: 1px;height: 64px;background-color: #fff;position: absolute;left: 31px;top: -1px;transform: rotate(-45deg);}
    .someDiv{transform: rotate(45deg);/*顺时针旋转45度*/}
    .x:hover{transform: rotate(360deg);}
    </style>
</head>
<body>
    <div class="x"></div>
</body>
</html>