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.
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 ofHere 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 .
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>
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.
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
