Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencipta kesan paradoks menggunakan CSS?

Bagaimana untuk mencipta kesan paradoks menggunakan CSS?

WBOYke hadapan: 2023-09-02 22:21:061538semak imbas

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.

Mencipta Kesan Paradoks

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 bagi

Contoh

ialah:

Contoh

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

Buat elemen div, rentang dan butang.
Gayakan mereka menggunakan CSS.

Untuk

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>

Elemen

diapungkan ke kiri dan kemudian dikosongkan pada kedua-dua belah, menyebabkan ia tidak terapung lagi. Ini boleh dicapai dengan menggunakan atribut

dan
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-align
span#🎜 mempunyai teks berpusat secara mendatar, tetapi dijajarkan ke bahagian atas secara menegak, menghasilkan teks yang kelihatan di luar tengah.
Gunakan transform dan transition
atribut. Pada mulanya, elemen
diputar 180 darjah, tetapi pada tetikus, gunakan atribut
transition 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 sifat

sesuatu elemen sambil mengekalkan kandungan statik. Berikut adalah langkah-langkah yang perlu diikuti:

Buat elemen div bekas untuk imej latar belakang. Di dalamnya, buat elemen div lain yang mengandungi kandungan atau teks.

Nyatakan saiz imej latar belakang. Selain itu, kekalkan

untuk
tudung
dan
untuk
tersembunyi. 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>

Terjemahan bahasa Cina bagi

Contoh

Contoh

Kandungan tetap, mengalihkan sempadan: Kita boleh mencipta kesan ini dengan menganimasikan sifat sempadan, sementara kandungan kekal tidak bergerak. Berikut adalah langkah-langkah untuk diikuti −

Buat elemen div bekas untuk imej latar belakang. Di dalamnya, buat elemen div lain yang mengandungi kandungan atau teks.

Nyatakan saiz imej latar belakang. Selain itu, kekalkan

sebagai
saudara
dan
sebagai
tersembunyi. 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>

Dalam contoh di atas, kandungan dan latar belakang kekal pegun semasa sempadan bergerak.

KESIMPULAN

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!

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

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Sifat kanan nav CSSArtikel seterusnya：Sifat kanan nav CSS

Artikel berkaitan

Lihat lagi