如何使用CSS创建矛盾效果？

WBOY 转载: 2023-09-02 22:21:06 1034浏览

如何使用CSS创建矛盾效果？

矛盾效应是一种视觉效果，用于创建任何物体、元素或文本的视觉幻觉，使其看起来以矛盾的方式移动。这种效果可以用来为您的网页添加有趣和独特的元素。

This can be easily created using HTML and CSS. In this article, we will discuss about the techniques and properties which is required for creating Paradoxical effect using CSS. We will start creating simple paradoxes using combination of two CSS properties simultaneously, and then dive into more advanced techniques which enables us to create complex paradoxical effects using CSS animations.

在本文结束时，您将拥有知识和技能，能够在自己的网页上创建令人惊叹和视觉上引人入胜的矛盾效果。

Creating Paradoxical Effect

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

Example

的中文翻译为：

示例

在这里，我们使用CSS属性的组合，如float和clear，text-align和vertical-align，transform和transition等，创建了一些矛盾的效果。以下是要遵循的步骤−

创建一个 div、span 和 button 元素。
使用CSS对它们进行样式设置。
For the div element, use float and clear properties. For span element, use text-align and vertical-align properties. For button, use transform and 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，这样可以使元素向左浮动，然后在两侧清除，结果元素不再浮动。
Using the text-align and vertical-align can also create paradoxical effect. The span element has text centered horizontally, but aligned to the top vertically, resulting in text that appears off-center.
使用 transform 和 transition 属性。初始时，button 元素被旋转了180度，但当鼠标悬停时，使用 transition 属性将其旋转回0度，以创建两个状态之间的平滑动画。

Example

的中文翻译为：

示例

移动背景，静止内容：可以通过在保持内容静止的同时，对一个元素的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>

Example

的中文翻译为：

示例

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

为背景图像创建一个容器div元素。在其中，创建另一个包含内容或文本的div元素。
指定背景图像的尺寸。同时，保持position为relative和overflow为hidden。
将内容与背景居中对齐。
Now, use CSS animation to animate the border of the background. On hovering, the size of the border increases from 0px to 20px and then returns to 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>

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