Maison  >  Article  >  interface Web  >  Comment créer un effet paradoxal en utilisant CSS ?

Comment créer un effet paradoxal en utilisant CSS ?

WBOY
WBOYavant
2023-09-02 22:21:061538parcourir

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>
    

    L'élément
  • div
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
    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
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
  • 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
  • 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
  • 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>
    
  • 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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent:Propriété CSS nav-rightArticle suivant:Propriété CSS nav-right