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

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.

   

  
   
 This is a div element 
    This is a span element 
   

   

    Click me 

• 该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元素。

  

  企业软件介绍主页html模板

  一款多用途的企业软件前端HTML模板。IT软件服务公司网站响应式单页模板。基于CSS、JS、HTML模块化原则创建的。如果您的站点不需要所有元素，那么可以轻松地删除不必要的组件。模板的代码干净，友好，注释良好。这使得编辑和自定义模板变得很容易。

  下载

• 指定背景图像的尺寸。同时，保持background-size为cover，overflow为hidden。

• 将内容与背景居中对齐。

• 现在，使用CSS动画来动画化背景的background-position。background-position从(0 0)到(100% 0)，使得背景沿着X轴移动。

   

   
   

      

         
 Static Content 
         
 This content remains stationary while the background moves. 
      
   
   

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.

   
 
   
   

      

         
 Static Content 
         
 This content remains stationary while the border moves. 
      
   

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

结论

使用各种CSS属性，您可以在您的网页上创建独特的悖论效果，这将使您的网站用户友好，并增加其受欢迎程度。创建这样的视觉效果可以吸引用户的注意力，并帮助您创建动态网站。