当前位置: 首页 > 网络应用技术

如何使用CSS将DIV框显示给卡片翻转效果

时间:2023-03-06 18:24:27 网络应用技术

  最终效果如下

  众所周知,DIV盒是一个没有厚度的两个维度盒。如果只有Div盒子翻转180度,则DIV中的内容仍将出现,并且不会具有前后效果。是为了达到DIV框的效果,可以像卡片一样将其转动。

  首先,必须确定两个盒子作为卡的前后。这两个盒子通过定位放在一起。

  原理是同时旋转两个框。应该注意的是,以下框需要设置透明度以隐藏,否则视觉效果在一起旋转时会很奇怪。返回,并同时添加动画效果。当盒子旋转到90度时,透明度设置为0,并且以下透明度设置设置为1.1。这可以反映卡片翻转的视觉效果。

  至于卡片上的闪烁效果,即标签上方的浅色样式。原始灯箱位于盒子的左侧,设置溢出并隐藏。通过动画效应向右移动。闪光灯的本质是从左到右的灯箱的运动。代码显示如下。

  最后,对其进行装饰一点,然后将框复制3次,以达到GIF中显示的效果。