如何使用 CSS 创建悖论效果?

cssweb developmentfront end technology更新于 2024/5/19 9:16:17

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

使用 HTML 和 CSS 可以轻松创建悖论效果。在本文中，我们将讨论使用 CSS 创建悖论效果所需的技术和属性。我们将从同时使用两个 CSS 属性组合创建简单的悖论开始，然后深入研究更高级的技术，使我们能够使用 CSS 动画创建复杂的悖论效果。

读完本文，您将掌握在自己的网页上创建令人惊艳且视觉上引人入胜的悖论效果所需的知识和技能。

创建悖论效果

使用 CSS 实现悖论效果可以通过使用相互矛盾的 CSS 属性来实现，从而导致视觉矛盾或意外行为。以下是一些示例。

示例

在这里，我们结合使用 CSS 属性(例如 float 和 clear、text-align 和 vertical-align、transform 和 transition 等)创建了一些悖论效果。以下是需要遵循的步骤:

创建 div、span 和 button 元素。
使用 CSS 设置样式。
对于 div 元素，使用 float 和 clear 属性。对于 span 元素，使用 text-align 和 vertical-align 属性。对于 button，使用 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 添加动画效果。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>

示例

内容静止，边框移动:我们可以通过为 border 属性添加动画来实现此效果，同时内容保持静止。具体步骤如下:

为背景图片创建一个容器 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>

在上面的例子中，内容和背景保持静止，而边框移动。