最终效果如下
众所周知,DIV盒是一个没有厚度的两个维度盒。如果只有Div盒子翻转180度,则DIV中的内容仍将出现,并且不会具有前后效果。是为了达到DIV框的效果,可以像卡片一样将其转动。
首先,必须确定两个盒子作为卡的前后。这两个盒子通过定位放在一起。
原理是同时旋转两个框。应该注意的是,以下框需要设置透明度以隐藏,否则视觉效果在一起旋转时会很奇怪。返回,并同时添加动画效果。当盒子旋转到90度时,透明度设置为0,并且以下透明度设置设置为1.1。这可以反映卡片翻转的视觉效果。
至于卡片上的闪烁效果,即标签上方的浅色样式。原始灯箱位于盒子的左侧,设置溢出并隐藏。通过动画效应向右移动。闪光灯的本质是从左到右的灯箱的运动。代码显示如下。
最后,对其进行装饰一点,然后将框复制3次,以达到GIF中显示的效果。