3 css 奖品出现弹出动画_3D无限效果CSS教程

前言

先赞再看，养成习惯~

在本教程中，将向你展示如何仅使用CSS变换和CSS滤镜创建3D无限效果。

CSS教程之3D无限效果​www.bilibili.com

视频观看可点击上方链接

HTML

因此，首先让我们从HTML结构开始。创建一个容器，然后创建一个子div并为其分配一个框架类，到此为止，让我们来研究CSS。

<div class="container">
  <div class="frame"></div>
</div>

CSS

1.将容器的宽度和高度设置为100％，并将位置设置为相对

然后将布局设置为可弯曲显示，以使每个子元素居中。对于帧div，我将尺寸设置为900px正方形。然后将位置设置为绝对，边界半径和浅蓝色实线边界。

.container {
  width:100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.frame {