CSS 如何创建悖论效果

悖论效果是一种视觉效果，用于创建物体、元素或文本以矛盾的方式移动的视觉错觉。这种效果可以为您的网页添加有趣和独特的元素。

使用HTML和CSS可以轻松创建此效果。在本文中，我们将讨论使用CSS创建悖论效果所需的技术和属性。我们将首先使用两个CSS属性的组合创建简单的悖论，然后深入探讨更高级的技术，借助CSS动画创建复杂的悖论效果。

阅读本文结束时，您将具备在自己的网页上创建令人惊叹和视觉吸引力的悖论效果的知识和技能。

创建悖论效果

可以通过使用相互矛盾的CSS属性来实现使用CSS创建悖论效果，从而产生视觉上的矛盾或意外行为。以下是几个示例。

示例

在这里，我们使用了一些CSS属性的组合来创建一些悖论效果，例如 float 和 clear 、 text-align 和 vertical-align 、 transform 和 transition 等。以下是所需的步骤：

创建一个div、span和button元素。
使用CSS对它们进行样式设置。
对于div元素，使用 float 和 clear 属性；对于元素，使用 text-align 和 vertical-align 属性；对于元素，使用 transform 和 transition 。

<html>
<head>
   <style>
      div {
         float: left;
         clear: both;
         background-color: yellow;
         padding: 20px;
         margin: 15px;
         border: 1px solid black;
      }
      span {
         text-align: center;
         vertical-align: top;
         background-color: lightblue;
         padding: 20px;
         margin: 10px;
         display: inline-block;
         border: 1px solid black;
      }
      button {
         transform: rotate(180deg);
         transition: transform 1s;
         background-color: pink;
         color: white;
         border: none;
         padding: 10px 20px;
         margin: 10px;
         cursor: pointer;
      }
      button:hover {
        transform: rotate(0deg);
      }      
   </style>
</head>
<body>  
   <div> This is a div element </div>
   <span> This is a span element </span>
   <br>
   <br>
   <button> Click me </button>
</body>
</html>

div 元素向左浮动，但在两侧清除，导致其根本不浮动。可以使用 float 和 clear 属性来实现。将 float 的值保持为 left ，并将 clear 的值同时保持为 both 。这样可以使元素向左浮动，但同时在两侧清除，导致元素根本不浮动。
使用 text-align 和 vertical-align 也可以产生矛盾的效果。在 span 元素中，文本在水平方向上居中对齐，但在垂直方向上与顶部对齐，导致文本显示偏离中心。
使用 transform 和 transition 属性。初始时， button 元素旋转180度，但在悬停时，使用 transition 属性将其旋转回0度，以在两个状态之间创建平滑的动画过渡。

示例

动态背景，静态内容：可以通过在保持内容静止的同时，对元素的 background-position 属性进行动画处理来实现此效果。以下是实现此效果的步骤－

创建一个包含背景图像的容器 div 元素。在其中创建另一个 div 元素，其中包含内容或文本。
指定背景图像的尺寸。同时保持 background-size 为 cover ，并且 overflow 为 hidden 。
将内容居中对齐背景。
现在，使用CSS动画来动画处理背景的 background-position 。背景位置的范围从(0 0)到(100% 0)，使背景沿X轴移动。

<html>
<head>
   <style>
      .paradox {
         background: url('https://images.ctfassets.net/hrltx12pl8hq/4f6DfV5DbqaQUSw0uo0mWi/6fbcf889bdef65c5b92ffee86b13fc44/shutterstock_376532611.jpg?fit=fill&w=800&h=300');
         background-size: cover;
         height: 500px;
         width: 100%;
         overflow: hidden;
      }
      .paradox .content {
         position: relative;
         top: 50%;
         transform: translateY(-50%);
         text-align: center;
         color: white;
         font-size: 2em;
      }
      @keyframes background-slide {
         0% {
            background-position: 0 0;
         }
         100% {
            background-position: 100% 0;
         }
      }
      .paradox {
         animation: background-slide 10s infinite linear;
      }   
   </style>
</head>
<body>   
   <div class="paradox">
      <div class="content">
         <h1> Static Content </h1>
         <p> This content remains stationary while the background moves. </p>
      </div>
   </div>
</body>   
</html>

示例

静止的内容，移动的边框：我们可以通过动画化边框属性来创建这种效果，而内容保持静止。以下是需要遵循的步骤−

为背景图像创建一个容器div元素。在此内部，创建另一个div元素，其中包含内容或文本。
指定背景图像的尺寸。同时，将 position 设为 relative ，将 overflow 设为 hidden 。
将内容居中对齐到背景中心。
现在，使用CSS动画来动态显示背景的边框。在悬停时，边框的大小从0px增加到20px，然后返回到0。

<html>
<head>
   <style>
      .paradox {
         background: url('https://images.ctfassets.net/hrltx12pl8hq/4f6DfV5DbqaQUSw0uo0mWi/6fbcf889bdef65c5b92ffee86b13fc44/shutterstock_376532611.jpg?fit=fill&w=800&h=300');
         height: 300px;
         width: 430px;
         margin: 10px;
         position: relative;
         overflow: hidden;
      }
      .paradox .content {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         text-align: center;
      }
      .paradox:hover {
         animation: border 2s infinite linear;
      }
      @keyframes border {
         0% {
            border: 1px solid green;
         }
         50% {
            border: 20px solid green;
         }
         100% {
            border: 1px solid green;
         }
      }
   </style>
</head> 
<body>   
   <div class="paradox">
      <div class="content">
         <h1> Static Content </h1>
         <p> This content remains stationary while the border moves. </p>
      </div>
   </div>
</body>
</html>

在上面的示例中，内容和背景保持固定，而边框移动。