資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 建立悖論效果？
悖論效果是一種視覺效果，用於建立任何物件、元素或文字的視覺錯覺，使其看起來以矛盾的方式移動。此效果可用於為網頁新增有趣且獨特的元素。
這可以使用 HTML 和 CSS 輕鬆建立。在本文中，我們將討論建立悖論效果所需的 CSS 技術和屬性。我們將從使用兩個 CSS 屬性同時組合建立簡單的悖論開始，然後深入研究更高階的技術，這些技術使我們能夠使用 CSS 動畫建立複雜的悖論效果。
在本文結束時，您將具備建立令人驚歎且視覺上引人入勝的悖論效果的知識和技能，並將其應用於您自己的網頁。
建立悖論效果
使用 CSS 建立悖論效果可以透過使用相互矛盾的 CSS 屬性來實現，從而導致視覺矛盾或意外行為。以下是一些示例。
示例
在這裡，我們使用 CSS 屬性（如float 和 clear、text-align 和 vertical-align、transform 和 transition 等）的組合建立了一些悖論效果。以下是需要遵循的步驟 -
建立一個 div、span 和 button 元素。
使用 CSS 為其設定樣式。
對於div 元素，使用float 和clear 屬性。對於span 元素，使用text-align 和vertical-align 屬性。對於button，使用transform 和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。這使得元素浮動到左側，但隨後兩側都清除，導致元素根本不浮動。
使用text-align 和vertical-align 也可以建立悖論效果。span 元素的文字水平居中，但垂直對齊到頂部，導致文字看起來偏離中心。
使用transform 和transition 屬性。button 元素最初旋轉 180 度，但當懸停在其上時，它使用transition 屬性旋轉回 0 度，以在兩種狀態之間建立平滑的動畫。
示例
移動背景，靜止內容：此效果可以透過為元素的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>
示例
靜止內容，移動邊框：我們可以透過為邊框屬性設定動畫，同時保持內容靜止來建立此效果。以下是需要遵循的步驟 -
為背景影像建立一個容器 div 元素。在其中，建立另一個包含內容或文字的 div 元素。
指定背景影像的尺寸。此外，將position 保持為relative，並將overflow 保持為hidden。
將內容與背景的中心對齊。
現在，使用 CSS 動畫為背景的邊框設定動畫。在懸停時，邊框的大小從 0px 增加到 20px，然後返回到 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 屬性，您可以在網頁上建立獨特的悖論效果，這將使您的網站使用者友好，並提高其受歡迎程度。建立此類視覺效果可以吸引使用者的注意力，並幫助您建立動態網站。
355 次檢視
