Home > Article > Web Front-end > How to create a paradox effect using CSS?

How to create a paradox effect using CSS?

WBOYforward: 2023-09-02 22:21:061403browse

The Paradox Effect is a visual effect used to create the visual illusion of any object, element, or text, making it appear to be moving in a contradictory way. This effect can be used to add a fun and unique element to your web pages.

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.

By the end of this article, you will have the knowledge and skills to create stunning and visually engaging paradox effects on your own web pages.

Creating Paradoxical Effect

Using CSS you can achieve contradictory effects by using conflicting CSS properties, resulting in visual contradictions or unexpected behavior. Here are some examples.

The Chinese translation of

Example

is:

Example

Here we use a combination of CSS properties like float and clear, text-align and vertical-align, transform and transition etc., creates some contradictory effects. Here are the steps to follow −

Create a div, span and button element.
Style them using 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>

The div element is floated to the left and then cleared on both sides, resulting in it no longer floating. This can be achieved by using the float and clear properties. For any element, keep the value of float as left and the value of clear as both, which will make the element left Floated, then cleared on both sides, the resulting element is no longer floated.
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.
Use the transform and transition properties. Initially, the button element is rotated 180 degrees, but on mouseover, use the transition property to rotate it back to 0 degrees to create a smooth animation between the two states .

The Chinese translation of

Example

is:

Example

Moving background, static content: This effect can be achieved by animating the background-position property of an element while keeping the content static. Here are the steps to follow:

Create a container div element for the background image. Within it, create another div element containing content or text.
Specify the size of the background image. At the same time, keep background-size as cover and overflow as hidden.
Center align content to background.
Now, use CSS animation to animate the background-position of the background. background-position from (0 0) to (100% 0), causing the background to move along the X-axis.

<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>

The Chinese translation of

Example

is:

Example

Fixed content, moving border: We can create this effect by animating the border property, while the content remains stationary. Here are the steps to follow −

Create a container div element for the background image. Within it, create another div element containing content or text.
Specify the size of the background image. Also, keep position as relative and overflow as hidden.
Center align content to background.
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>

In the example above, the content and background remain stationary, while the borders move.

in conclusion

Using various CSS properties, you can create unique paradox effects on your web pages, which will make your website user-friendly and increase its popularity. Creating visuals like this can grab users' attention and help you create a dynamic website.

The above is the detailed content of How to create a paradox effect using CSS?. For more information, please follow other related articles on the PHP Chinese website!

css html Float for using this position overflow border background transform transition animation

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：CSS nav-right propertyNext article：CSS nav-right property

See more

How to create a paradox effect using CSS?

Creating Paradoxical Effect

Example

Example

Example

Example

Example

Example

in conclusion

Related articles