📜  翻转窗口效果

📅  最后修改于: 2021-08-29 12:23:21             🧑  作者: Mango

翻转窗口是现代网页设计中使用的一种新效果。此效果用作展示部分、加载程序部分和显示横幅。该效果基于沿 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
  


  
                                
    

输出: