Comment créer un effet paradoxal en utilisant CSS ?-tutoriel CSS-php.cn

Comment créer un effet paradoxal en utilisant CSS ?

WBOY

Libérer： 2023-09-02 22:21:06

avant

1545 Les gens l'ont consulté

Comment créer un effet paradoxal en utilisant CSS ?

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 de

Exemple

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>

Copier après la connexion

L'élément

a été flotté vers la gauche puis effacé des deux côtés, avec pour résultat qu'il ne flottait plus. Ceci peut être réalisé en utilisant les propriétés

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

Arrière-plan mobile, contenu statique : cet effet peut être obtenu en animant la propriété

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

Copier après la connexion

Exemple
est :
Exemple

Contenu fixe, bordures mobiles : Nous pouvons créer cet effet en animant les propriétés des bordures pendant que le contenu reste stationnaire. 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, gardez
position
comme
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>

Copier après la connexion

Dans l'exemple ci-dessus, le contenu et l'arrière-plan restent stationnaires tandis que les bordures bougent.

Conclusion

En utilisant diverses propriétés CSS, vous pouvez créer des effets de paradoxe uniques sur vos pages Web, ce qui rendra votre site Web convivial et augmentera sa popularité. La création de visuels comme celui-ci peut attirer l'attention des utilisateurs et vous aider à créer un site Web dynamique.

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!