Maison >interface Web >tutoriel CSS >Comment créer un effet paradoxal en utilisant CSS ?
Comment créer un effet paradoxal en utilisant CSS ?
- WBOYavant
- 2023-09-02 22:21:061574parcourir
L'effet paradoxe est un effet visuel utilisé pour créer l'illusion visuelle de n'importe quel objet, élément ou texte, lui donnant l'impression de bouger de manière contradictoire. Cet effet peut être utilisé pour ajouter un élément amusant et unique à vos pages Web.
Cela peut être facilement créé en utilisant HTML et CSS. Dans cet article, nous discuterons des techniques et des propriétés nécessaires pour créer un effet paradoxal à l'aide de CSS. Nous commencerons par créer des paradoxes simples en combinant deux propriétés CSS simultanément, puis nous plongerons. vers des techniques plus avancées qui nous permettent de créer des effets paradoxaux complexes à l'aide d'animations CSS.
À la fin de cet article, vous aurez les connaissances et les compétences nécessaires pour créer des effets paradoxaux époustouflants et visuellement attrayants sur vos propres pages Web.
Créer un effet paradoxal
En utilisant CSS, il est possible d'obtenir des effets contradictoires en utilisant des propriétés CSS contradictoires, entraînant des contradictions visuelles ou un comportement inattendu. Voici quelques exemples.
La traduction chinoise deExemple
est :Exemple
Ici, nous créons des effets contradictoires en utilisant une combinaison de propriétés CSS comme float et clear, text-align et vertical-align, transform et transition etc. Voici les étapes à suivre −
Créez un élément div, span et bouton.
Stylisez-les en utilisant CSS.
-
Pour l'élément div, utilisez les propriétés float et clear Pour l'élément span, utilisez les propriétés text-align et vertical-align 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>L'élément div
- float
- et
clear. Pour tout élément, conservez la valeur de float comme left et la valeur de clear comme both, ce qui fait que l'élément flotte vers la gauche puis s'efface des deux côtés, ce qui fait que l'élément ne flotte plus. L'utilisation des éléments text-align
et vertical-align - peut également créer un effet paradoxal. L'élément
span a un texte centré horizontalement, mais aligné verticalement vers le haut, ce qui donne un texte décentré. Utilisez les attributs transform
et transition - . Initialement, l'élément
button pivote de 180 degrés, mais au survol de la souris, utilisez la propriété transition pour le faire pivoter à 0 degré afin de créer une animation fluide entre les deux états. La traduction chinoise de Exemple est :
Exemple
background-position
d'un élément tout en gardant le contenu statique. Voici les étapes à suivre :Créez un élément div conteneur pour l'image d'arrière-plan. À l'intérieur, créez un autre élément div contenant du contenu ou du texte.
- Spécifiez la taille de l'image d'arrière-plan. En même temps, conservez
background-size
comme cover - et
overflow comme hidden. Centrez l'alignement du contenu sur l'arrière-plan.
- Maintenant, utilisez l'animation CSS pour animer la position d'arrière-plan de l'arrière-plan. position d'arrière-plan de (0 0) à (100% 0), provoquant le déplacement de l'arrière-plan le long de l'axe 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>
La traduction chinoise de est :
ExempleCréez un élément div conteneur pour l'image d'arrière-plan. À l'intérieur, créez un autre élément div contenant du contenu ou du texte.
- Spécifiez la taille de l'image d'arrière-plan. En même temps, gardez
position
comme relative - et
overflow comme caché. Centrez l'alignement du contenu sur l'arrière-plan.
- Maintenant, utilisez l'animation CSS pour animer la bordure de l'arrière-plan. Au survol, la taille de la bordure passe de 0px à 20px puis revient à 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>
Conclusion
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!