翻转窗口是现代网页设计中使用的一种新效果。此效果用作展示部分、加载程序部分和显示横幅。该效果基于沿 X 轴和 Y 轴旋转的四个方块。旋转的顺序可以不同,即可以是 XX、XY、YX 或 YY。
方法:方法是创建 4 个相邻的正方形,形成一个大正方形(窗口)。然后使用@keyframes沿 X 轴和 Y 轴旋转这些小正方形。我们使用了 YX 的替代序列,即;第一次沿 Y 轴旋转,第二次沿 X 轴旋转,依此类推。
第一部分:在本节中,我们创建了四个包裹在“div”标签中的“span”标签。
- HTML代码:
HTML
Flipping Window Effect
HTML
Flipping Window Effect
第二部分:对于 CSS,请按照以下给出的步骤操作。
- 步骤1:将“div”与页面中心对齐。
- 第 2 步:创建一个将 CSS 应用于“span”标签的正方形。
- 第 3 步:现在,使用“第 n 个孩子”属性将所有“跨度”彼此对齐
形成一个更大的正方形。 - 第四步:给每个“跨度”涂上不同的颜色,让它看起来更漂亮。
- 第五步:使用@keyframes在Y轴和X轴上交替旋转小方块。
注意:轮换的顺序没有关系,你可以按照任何顺序。相同的动画可以应用于任何形状,但方形是最常用的一种。
- CSS 代码:
.geeks { position: absolute; top: 50%; left: 50%; } span { position: absolute; width: 20px; height: 20px; background: #262626; animation: animate 4s infinite ease-in-out; } span:nth-child(1) { background-color: chocolate; left: -24px; top: -24px; animation-delay: 0.2s; } span:nth-child(2) { background-color: rgb(57, 30, 210); left: 0px; top: -24px; animation-delay: 0.4s; } span:nth-child(3) { background-color: rgb(36, 210, 30); left: -24px; top: 0px; animation-delay: 0.6s; } span:nth-child(4) { background-color: rgb(210, 30, 141); left: 0; top: 0; animation-delay: 0.8s; } @keyframes animate { 0% { transform: rotateY(0deg); } 20% { transform: rotateX(360deg); } 40% { transform: rotateY(180deg); } 60% { transform: rotateX(0deg); } 80% { transform: rotateY(360deg); } 100% { transform: rotateX(180deg); } }
完整代码:是以上两节的结合。
HTML
Flipping Window Effect
输出: