Rumah > Artikel > hujung hadapan web > Buat animasi sempadan menggunakan CSS
Buat animasi sempadan menggunakan CSS
- WBOYke hadapan
- 2023-09-08 08:57:091284semak imbas
CSS digunakan untuk mencipta animasi sempadan yang cantik dan menarik, yang menambah pergerakan dan minat pada halaman web Untuk mencipta animasi sempadan, kita perlu menentukan sempadan untuk elemen yang ingin kita animasikan, kemudian kita akan gunakan peralihan CSS dan animasi untuk menambah pergerakan pada sempadan
Animasi sempadan boleh digunakan untuk membuat kesan tuding pada butang, pautan dan elemen interaktif yang lain. Animasi ini juga boleh digunakan untuk membuat animasi pemuatan yang menunjukkan kemajuan semasa halaman atau elemen sedang dimuatkan -butang tindakan untuk menjadikannya lebih ketara.
Pendekatan - 1
kami akan mencipta kesan tuding yang menghidupkan sempadan unsur apabila pengguna menuding di atasnya.
Algoritma
Buat dokumen HTML dan takrifkan tajuk sebagai "Hover Effect Border Animation".
Tetapkan badan dokumen, gunakan flexbox untuk memusatkan kotak dan berikan warna latar belakang #48b6ff
Tentukan kelas kotak dengan paparan blok sebaris, padding 10px, saiz fon 18px, warna #333 dan sempadan pepejal telus 2px Masa peralihan ialah 0.5s dan kesan peralihan adalah mudah.
Tambahkan animasi berdenyut pada sempadan dengan tempoh yang tidak terhingga dan pemasaan mudah masuk. Pudarkan sempadan daripada merah kepada hijau kepada biru apabila tetikus berada di atas kotak dan lumpuhkan animasi berdenyut
Tentukan animasi berdenyut dengan bingkai utama yang menukar warna jidar daripada merah kepada hijau kepada biru. Tambahkan elemen div dengan kelas kotak pada badan dokumen HTML
Simpan dan lihat fail HTML dalam pelayar web untuk melihat animasi sempadan kesan hover.
Contoh
ialah:Contoh
<!DOCTYPE html>
<html>
<head>
<title>Hover Effect Border Animation</title>
<style>
/* Set up the body with flexbox to center the box */
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #48b6ff;
min-height: 100vh;
}
/* Style the box with a transparent border */
.box {
display: inline-block;
padding: 10px;
font-size: 18px;
color: #333;
border: 2px solid transparent;
transition: border 0.5s ease;
/* Add the pulsing animation to the border */
animation: border-pulse 2s ease-in-out infinite;
}
/* When the box is hovered, change the border to a gradient and disable the pulsing animation */
.box:hover {
border-image: linear-gradient(to right, #f00, #0f0, #00f);
border-image-slice: 1;
animation: none;
}
/* Define the pulsing animation */
@keyframes border-pulse {
0% {
border-color: #f00;
}
50% {
border-color: #0f0;
}
100% {
border-color: #00f;
}
}
</style>
</head>
<body>
<!-- Add the box element to the HTML -->
<div class="box">
Hover over me
</div>
</body>
</html>
Kaedah - 2
Di sini, kami akan mencipta animasi pemuatan dengan menganimasikan sempadan ikon pemuatan.
Algoritma
Isytiharkan jenis dokumen sebagai HTML menggunakan 8b05045a5be5764f313ed5b9168a17e6
Mulakan dokumen HTML dengan membuka teg 100db36a723c770d327fc0aef2ce13b1.
Tambahkan teg 93f0f5c25f18dab9d176bd4f6de5d30e
Di dalam teg 93f0f5c25f18dab9d176bd4f6de5d30e, tambahkan teg b2386ffb911b14667cb8f0f91ea547a7 dan tetapkan tajuk dokumen kepada "Memuatkan Animasi Sempadan".
Tambahkan teg 11c3ce0c461c5f3456e141a9a29adefa di dalam teg 93f0f5c25f18dab9d176bd4f6de5d30e untuk menambah penggayaan pada dokumen.
Di dalam teg c9ccee2e6ea535a969eb3f532ad9fe89, tambahkan peraturan CSS untuk menggayakan elemen 6c04bd5ca3fcae76e30b72ad730ca86d termasuk memusatkan animasi pemuatan dan menetapkan warna latar belakang.
Tambahkan peraturan CSS untuk menggayakan animasi pemuatan dengan menetapkan saiz, bentuk, warna jidar dan sifat animasinya.
Buat animasi bernama "spin" menggunakan peraturan @keyframes.
Tambah peraturan transformasi untuk memutarkan elemen 360 darjah.
Di dalam teg 6c04bd5ca3fcae76e30b72ad730ca86d tambahkan elemen dc6dce4a544fdca2df29d5ac0ea9906b dengan kelas "pemuatan" untuk memaparkan animasi pemuatan.
Contoh
ialah:Contoh
<!DOCTYPE html>
<html>
<head>
<title>Loading Border Animation</title>
<style>
/* Styling the body element to center the loading animation */
body{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
background-color: rgb(253, 114, 114);
}
/* Styling the loading element */
.loading {
width: 50px;
height: 50px;
border: 5px solid #ccc;
border-top-color: #3498db; /* Changing the top border color */
border-radius: 50%; /* Making the border round */
animation: spin 1s linear infinite; /* Adding animation to spin continuously */
margin: 50px auto; /* Centering the element with margin */
}
/* Defining the animation */
@keyframes spin {
to {
transform: rotate(360deg); /* Rotating the element 360 degrees */
}
}
</style>
</head>
<body>
<div class="loading"></div> <!-- The loading element -->
</body>
</html>
Pendekatan - 3
Kami akan menggunakan CSS untuk menggunakan animasi sempadan pada butang seruan tindak.
Algoritma
Buat bekas dan tengahkannya.
Gayakan elemen dengan jidar yang pada mulanya telus dan sifat peralihan untuk menghidupkan sempadan dalam 0.5 saat.
Buat kesan tuding untuk elemen yang menukar jidar kepada kecerunan linear tiga warna: merah, hijau dan biru.
Tentukan animasi bingkai utama yang dipanggil "nadi sempadan" untuk menukar warna sempadan elemen dari semasa ke semasa.
Gunakan animasi "nadi sempadan" pada keadaan awal elemen.
Apabila elemen dituding ke atas, lumpuhkan animasi "nadi sempadan" dengan menetapkannya kepada "tiada".
Contoh
ialah:Contoh
<!DOCTYPE html>
<html>
<head>
<title>Call to Action Border Animation</title>
<style>
/* Set the background color and center content vertically */
body {
background-color: #48b6ff;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
}
/* Style the button */
.cta-button {
display: inline-block;
position: relative;
padding: 16px 32px;
background-color: #ff4d4d;
color: #fff;
font-size: 24px;
text-transform: uppercase;
text-decoration: none;
border: none;
overflow: hidden;
transition: all 0.4s ease-out;
}
/* Add a pseudo-element to create the border animation */
.cta-button:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 100%;
background-color: #fff;
transform: translateX(-50%);
z-index: -1;
transition: all 0.4s ease-out;
}
/* Change the background and text color on hover */
.cta-button:hover {
background-color: #fff;
color: #ff4d4d;
}
/* Animate the pseudo-element to create the border animation */
.cta-button:hover:before {
width: 110%;
}
</style>
</head>
<body>
<a href="#" class="cta-button">Click Me</a>
</body>
</html>
Kesimpulan
Walau bagaimanapun, animasi sempadan kadangkala boleh menyebabkan masalah prestasi, terutamanya apabila digunakan secara berlebihan atau digunakan pada elemen besar, mengakibatkan masa muat halaman yang lebih perlahan dan prestasi keseluruhan yang lebih rendah. Sesetengah pelayar web lama mungkin tidak menyokong teknik animasi tertentu.
Kami juga boleh mencipta animasi sempadan menggunakan grafik SVG dan JavaScript. Mereka membenarkan animasi yang lebih kompleks dan memberikan lebih kawalan ke atas animasi.
Atas ialah kandungan terperinci Buat animasi sempadan menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!