搜索到
2
篇与
css
的结果
-
CSS——display:none与visibility:hidden的区别 1.display:none与visibility:hidden的区别 display:none隐藏对应的元素并且其他元素会挤占该元素原来的空间，即不为被隐藏的对象保留其物理空间，使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”; visibility:hidden隐藏对应的元素但其他元素不会挤占该元素原来的空间，即为被隐藏的对象保留其物理空间，使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。 记住这两点之后也就不难区分这两者了，如果可以理解为“none”就是没有的意思，“hidden”只是单纯的隐藏之意，这样就可以更好的记住了。
-
![模拟书本翻页的相册]()
模拟书本翻页的相册 相册看到别人绚丽的相册，想不想自己拥有一个，下面跟着我创建一个属于自己的相册吧。浏览 1.利用div将相册所需要的图片装起来2.接下来就需要通过css来对div进行调整，使得相册更加漂亮（1）.第一步将所有图片都定位到一起，即所有的图片叠在一起，效果如图所示（2）.接下来就需要让每一张图片都动起来，也就是最重要的步骤。css如何实现动画自然而然想到了animation;不过我们的相册需要的是3D效果，因此需要将装图片的div及父级div都需要设置transform-style: preserve-3d;（需要做浏览器兼容），这样设置后就可以达到3D效果。翻页时都是绕着书的左边旋转的，因此我们还要设置旋转的位置transform-origin: 0% 50%;（需要做浏览器兼容）。最后就到了animation上场了，为每一张图片容器设置animation，如图所示设置z-index是为了前面的图片不会被后面的图片遮住，从而达到预定的效果，接下来就是最后一步了，为每一张图片设置如何动，即跟animation配合使用的@keyframes（需要做浏览器兼容）。不同的图片设置不同的旋转角度，不过后面图片的旋转角度要小于前面图片的旋转角度。看到这里有没有心动，赶紧自己动手制作一个属于自己的网页相册吧！
