Kesan Paradoks ialah kesan visual yang digunakan untuk mencipta ilusi visual mana-mana objek, elemen atau teks, menjadikannya kelihatan bergerak dalam cara yang bercanggah. Kesan ini boleh digunakan untuk menambah elemen yang menyeronokkan dan unik pada halaman web anda.
Ini boleh dibuat dengan mudah menggunakan HTML dan CSS Dalam artikel ini, kami akan membincangkan tentang teknik dan sifat yang diperlukan untuk mencipta kesan Paradoks menggunakan CSS. Kami akan mula mencipta paradoks mudah menggunakan gabungan dua sifat CSS secara serentak. dan kemudian menyelami teknik yang lebih maju yang membolehkan kami mencipta kesan paradoks yang kompleks menggunakan animasi CSS.
Menjelang akhir artikel ini, anda akan mempunyai pengetahuan dan kemahiran untuk mencipta kesan paradoks yang menakjubkan dan menarik secara visual pada halaman web anda sendiri.
Menggunakan CSS anda boleh mencapai kesan bercanggah dengan menggunakan sifat CSS yang bercanggah, mengakibatkan percanggahan visual atau tingkah laku yang tidak dijangka. Berikut adalah beberapa contoh.
Terjemahan bahasa Cina bagiDi sini kami menggunakan gabungan sifat CSS seperti float dan clear, text-align dan vertical-align, transform#🎜 🎜# dan transition, dsb., mencipta beberapa kesan bercanggah. Berikut adalah langkah-langkah untuk diikuti −
div elemen, gunakan float dan clear sifat untuk #🎜#. 🎜🎜# elemen, gunakan text-align dan vertical-align untuk sifat button, gunakan #🎜#🎜. 🎜# dan peralihan.
<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>
clear. Untuk sebarang elemen, kekalkan nilai terapung sebagai kiri dan nilai jelas sebagai kedua-duanya#🎜 , ini akan menjadikan elemen terapung ke kiri, dan kemudian jelas pada kedua-dua belah pihak, supaya elemen itu tidak lagi terapung. Menggunakan text-align dan
vertical-alignGunakan transform dan transition
atribut. Pada mulanya, elementransition untuk memutarkannya kembali kepada 0 darjah untuk mencipta satu daripada dua keadaan Animasi licin antara . Terjemahan bahasa Cina bagi Contoh ialah: Contoh
Latar belakang bergerak, kandungan statik: Kesan ini boleh dicapai dengan menganimasikan sifatNyatakan saiz imej latar belakang. Selain itu, kekalkan
tudung
dantersembunyi. Tengah jajarkan kandungan ke latar belakang.
Sekarang, gunakan animasi CSS untuk menghidupkan kedudukan latar belakang latar belakang. kedudukan latar belakang dari (0 0) hingga (100% 0), menyebabkan latar belakang bergerak di sepanjang paksi 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>
Kandungan tetap, mengalihkan sempadan: Kita boleh mencipta kesan ini dengan menganimasikan sifat sempadan, sementara kandungan kekal tidak bergerak. Berikut adalah langkah-langkah untuk diikuti −
saudara
dantersembunyi. Tengah jajarkan kandungan ke latar belakang.
Sekarang, gunakan animasi CSS untuk menghidupkan sempadan latar belakang Semasa melayang, saiz sempadan meningkat daripada 0px kepada 20px dan kemudian kembali kepada 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>
Menggunakan pelbagai sifat CSS, anda boleh mencipta kesan paradoks yang unik pada halaman web anda, yang akan menjadikan tapak web anda mesra pengguna dan meningkatkan popularitinya. Mencipta visual seperti ini boleh menarik perhatian pengguna dan membantu anda membuat tapak web dinamik.
Atas ialah kandungan terperinci Bagaimana untuk mencipta kesan paradoks menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
