用css创建四行四列表格

发布网友发布时间：2022-04-22 06:43

我来回答

共2个回答

懂视网时间：2022-04-21 17:08

　　CSS动画是非常有意思的，用一些简单的属性就可以创建出来，从优雅的淡入到更加惊艳的效果都可以，翻页效果就是其中之一，它通过在容器的正面跟反面包含不同的内容来加以实现。本文就是用尽可能简单的方法来实现这种效果。

卡片翻转效果

查看演示

　　注：本文不是第一篇讲述这种效果怎么做的文章，但是我发现很多将这个的文章都过于复杂，添加了很多额外的样式代码到案例里面，让读者搞不清那些代码是需要的哪些不是。本文不会有这个问题，只含有一些必要的样式，你可以随意美化翻转的每个页。

HTML结构

　　以下HTML结构就是为了达到有两面的效果的：

　　正如你预料的，有两个内容面板：正面跟反面。你将惊奇的发现包含的CSS样式不多：

/* 整个容器，包括透视 */.flip-container { perspective: 1000;}/* 鼠标放上去的时候翻转 */.flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg);}.flip-container, .front, .back { width: 320px; height: 480px;}/* 翻转速度设置 */.flipper { transition: 1.5s; transform-style: preserve-3d; position: relative;}/* 翻转页的时候隐藏背面 */.front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0;}/* 前面板放在上面 */.front { z-index: 2; /* for firefox 31 */ transform: rotateY(0deg);}/* 背面初始的时候隐藏 */.back { transform: rotateY(180deg);}

　　我们来看下大体的实现过程：

最外面的容器设置了整个动画区域的透视范围

内层的容器是真正用于翻转的元素，父容器被激活的时候翻转了180度。这也是控制翻转速度的地方，把翻转角度改成-180度就会反方向翻转了。

正面和反面的元素被决定定位了，这样他们就可以很好的层叠在彼此之上。他们的 backface-visibility 属性是 hidden, 所以当正面或者反面显示的时候，背面就隐藏起来。

正面元素比反面元素有一个比较高的 z-index 属性值所以它可以预先编码和显示在上层。

反面元素旋转了180度，成了背面。

热心网友时间：2022-04-21 14:16

CSS样式如下：
* {margin:0; padding:0}
div {width:404px; height:404px; border-top:solid 1px #000; border-left:solid 1px #000}
ul {width:100px;list-style:none; border-right:solid 1px #000; float:left}
li {height:100px; border-bottom:solid 1px #000}

DIV布局如下：
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

将以上代码复制黏贴，宽、高可自行设定。