Heim > Artikel > Web-Frontend > Wie erstelle ich mit CSS einen paradoxen Effekt?

Wie erstelle ich mit CSS einen paradoxen Effekt?

WBOYnach vorne: 2023-09-02 22:21:061401Durchsuche

Der Paradox-Effekt ist ein visueller Effekt, der verwendet wird, um die visuelle Illusion eines beliebigen Objekts, Elements oder Textes zu erzeugen und ihn so erscheinen zu lassen, als würde er sich auf widersprüchliche Weise bewegen. Mit diesem Effekt können Sie Ihren Webseiten ein unterhaltsames und einzigartiges Element hinzufügen.

Dies kann einfach mit HTML und CSS erstellt werden. In diesem Artikel besprechen wir die Techniken und Eigenschaften, die zum Erstellen paradoxer Effekte mithilfe von CSS erforderlich sind. Wir beginnen mit der gleichzeitigen Erstellung einfacher Paradoxien und tauchen dann ein in fortgeschrittenere Techniken, die es uns ermöglichen, mithilfe von CSS-Animationen komplexe paradoxe Effekte zu erzeugen.

Am Ende dieses Artikels verfügen Sie über das Wissen und die Fähigkeiten, um atemberaubende und visuell ansprechende Paradoxeffekte auf Ihren eigenen Webseiten zu erstellen.

Paradoxe Wirkung erzeugen

Mit CSS können Sie widersprüchliche Effekte erzielen, indem Sie widersprüchliche CSS-Eigenschaften verwenden und so visuelle Widersprüche oder unerwartetes Verhalten erzeugen. Hier sind einige Beispiele.

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

Hier erzeugen wir einige widersprüchliche Effekte mithilfe einer Kombination von CSS-Eigenschaften wie float und clear, text-align und vertical-align, transform und transition usw. Hier sind die Schritte, die Sie befolgen müssen −

Erstellen Sie ein Div-, Span- und Button-Element.
Stilen Sie sie mit CSS.

Für das Element div verwenden Sie die Eigenschaften float und clear. Für das Element span verwenden Sie die Eigenschaften text-align und vertical-align

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

Das div-Element wurde nach links verschoben und dann auf beiden Seiten gelöscht, mit dem Ergebnis, dass es nicht mehr schwebend war. Dies kann durch die Verwendung der Eigenschaften

float

clear

float
als left und den Wert von clear als both bei, wodurch das Element nach links und dann auf beiden Seiten frei schwebt, was dazu führt, dass das Element nicht mehr schwebt. Die Verwendung von text-align und vertical-align kann auch einen paradoxen Effekt erzeugen. Beim
span
Verwenden Sie die Attribute transform und transition. Zunächst wird das
button
transition
-Attribut, um es wieder auf 0 Grad zu drehen, um eine flüssige Animation zwischen den beiden Zuständen zu erstellen. Die chinesische Übersetzung von Beispiel lautet: Beispiel Beweglicher Hintergrund, statischer Inhalt: Dieser Effekt kann durch Animieren der Eigenschaft
background-position

Erstellen Sie ein Container-Div-Element für das Hintergrundbild. Erstellen Sie darin ein weiteres div-Element, das Inhalt oder Text enthält.

Geben Sie die Größe des Hintergrundbilds an. Behalten Sie gleichzeitig

background-size

cover
und
overflow
hidden
bei. Mitte den Inhalt am Hintergrund ausrichten. Nun verwenden Sie CSS-Animation, um die Hintergrundposition des Hintergrunds zu animieren. Hintergrundposition von (0 0) bis (100 % 0), wodurch sich der Hintergrund entlang der X-Achse bewegt.

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

Die chinesische Übersetzung von

Beispiel

lautet:

Fester Inhalt, sich bewegende Ränder: Wir können diesen Effekt erzeugen, indem wir die Randeigenschaften animieren, während der Inhalt stationär bleibt. Hier sind die Schritte, die Sie befolgen müssen −

Erstellen Sie ein Container-Div-Element für das Hintergrundbild. Erstellen Sie darin ein weiteres div-Element, das Inhalt oder Text enthält.

Geben Sie die Größe des Hintergrundbilds an. Behalten Sie gleichzeitig

Position

relativ
und
Überlauf
versteckt
bei. Mitte den Inhalt am Hintergrund ausrichten. Verwenden Sie nun die CSS-Animation, um den Rand des Hintergrunds zu animieren. Beim Bewegen des Mauszeigers erhöht sich die Größe des Randes von 0 Pixel auf 20 Pixel und kehrt dann auf 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>

Im obigen Beispiel bleiben Inhalt und Hintergrund stationär, während die Ränder verschoben werden.

Mithilfe verschiedener CSS-Eigenschaften können Sie einzigartige paradoxe Effekte auf Ihren Webseiten erzeugen, die Ihre Website benutzerfreundlich machen und ihre Popularität steigern. Das Erstellen solcher Grafiken kann die Aufmerksamkeit der Benutzer erregen und Ihnen bei der Erstellung einer dynamischen Website helfen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS einen paradoxen Effekt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：CSS-Eigenschaft nav-rightNächster Artikel：CSS-Eigenschaft nav-right

In Verbindung stehende Artikel

Mehr sehen