首頁 > 文章 > web前端 > 如何使用CSS創造矛盾效果？

如何使用CSS創造矛盾效果？

WBOY轉載: 2023-09-02 22:21:061538瀏覽

如何使用CSS創造矛盾效果？

矛盾效應是一種視覺效果，用於創建任何物體、元素或文字的視覺幻覺，使其看起來以矛盾的方式移動。這種效果可以用來為您的網頁添加有趣和獨特的元素。

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. We will start. then dive into more advanced techniques which enables us to create complex paradoxical effects using CSS animations.

在本文結束時，您將擁有知識和技能，能夠在自己的網頁上創建令人驚嘆和視覺上引人入勝的矛盾效果。

Creating Paradoxical Effect

使用CSS可以透過使用相互矛盾的CSS屬性來實現矛盾效果，從而產生視覺上的矛盾或意外行為。以下是一些範例。

Example

的中文翻譯為：

範例

在這裡，我們使用CSS屬性的組合，如float和clear，text-align和vertical-align，transform和transition 等，創造了一些矛盾的效果。以下是要遵循的步驟−

建立一個 div、span 和 button 元素。
使用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>

該div元素被向左浮動，然後在兩側清除，結果它不再浮動。可以透過使用float和clear屬性來實現。對於任何元素，將float的值保持為left，將clear的值保持為both，這樣可以使元素向左浮動，然後在兩側清除，結果元素不再浮動。
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.
#使用 transform 和 transition 屬性。初始時，button 元素被旋轉了180度，但當滑鼠懸停時，使用transition 屬性將其旋轉回0度，以創建兩個狀態之間的平滑動畫。

Example

的中文翻譯為：

範例

移動背景，靜止內容：可以透過在保持內容靜止的同時，對一個元素的background-position屬性進行動畫處理來實現此效果。以下是需要遵循的步驟：

為背景映像建立一個容器div元素。在其中，建立另一個包含內容或文字的div元素。
指定背景圖像的尺寸。同時，保持background-size為cover，overflow為hidden。
將內容與背景置中對齊。
現在，使用CSS動畫來動畫化背景的background-position。 background-position從(0 0)到(100% 0)，使得背景沿著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>

Example

的中文翻譯為：

範例

固定內容，移動邊框：我們可以透過動畫化邊框屬性來創造這種效果，而內容保持靜止。以下是需要遵循的步驟−

為背景映像建立一個容器div元素。在其中，建立另一個包含內容或文字的div元素。
指定背景圖像的尺寸。同時，保持position為relative和overflow為hidden。
將內容與背景置中對齊。
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>

在上面的例子中，內容和背景保持靜止，而邊框則移動。

結論

使用各種CSS屬性，您可以在您的網頁上創建獨特的悖論效果，這將使您的網站用戶友好，並增加其受歡迎程度。創建這樣的視覺效果可以吸引用戶的注意力，並幫助您建立動態網站。

以上是如何使用CSS創造矛盾效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

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

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：CSS nav-right 屬性下一篇：CSS nav-right 屬性

看更多