hujung hadapan web
tutorial css
Satu helah untuk mengajar anda cara menggunakan css3 untuk mencipta butang dan menambah kesan dinamik (perkongsian kod)
Satu helah untuk mengajar anda cara menggunakan css3 untuk mencipta butang dan menambah kesan dinamik (perkongsian kod)
Dalam artikel sebelumnya "Newbie: Cara menggunakan ccs untuk membuat susun atur mudah (dengan kod) ", saya memperkenalkan anda cara menggunakan ccs untuk membuat susun atur yang mudah. Artikel berikut akan memperkenalkan kepada anda cara menggunakan css3 untuk mencipta butang dan menambah kesan dinamik Mari lihat cara melakukannya bersama-sama.
cssBagaimana untuk mencapai kesan butang button?
Struktur HTML:
Tentukan dahulu body , gunakan butang button, tambah teks value ditetapkan kepada "Mulakan Permainan" untuk memudahkan penetapan pemilih class kepada id.
<body> <input id="search" name="cx" type="button" value="开始游戏" class="btn search"> </body>
Kod kesan
Kesan keluar, anda boleh melihat kesan butang, tetapi tiada hiasan dinamik ditambahkan padanya, dengan menggunakan css Tambahkan kesan dinamik padanya dan lihat cara melakukannya.
kod pengeditan css:
1 Antara style, mulakan gaya search, tambah ketinggian dan lebar tetapan, kemudian gunakan latar belakang tetapan background, tetapkan no-repeatIni imej latar belakang atribut tidak akan diulang.
.search {
width: 185px;
height: 70px;
background: url(images/btn_08.jpg) no-repeat center;
}Kesan Kod
2 Seterusnya, tambahkan kesan sudut bulat pada butang css3 dan tetapkan empat nilai untuk setiap border atribut , dan akhirnya tetapkan penjajaran tengah menggunakan float: left.
border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px; -moz-border-radius: 8px; float: left;
Kesan kod
Kesan bulat tepi empat mata sudah habis
3 🎜> Lakukan gaya untuk menambah saiz fon, penjajaran teks dan ketebalan fon serta tetapkan gaya, warna dan bentuk semua jidar elemen search. border
font-size: 30px; text-align: center; font-weight: bold; border: none; color: #fff; cursor: pointer; line-height: 70px; font-family: 微软雅黑;
, mulakan gaya style, tambah ketinggian dan lebar tetapan, kemudian gunakan latar belakang tetapan btn. background
.btn {
width: 383px;
height: 70px;line-height: 0;
border: 2px solid #a2f3ff;
background: #f3682d;
}
dan tetapkan <🎜. >Gaya, warna dan bentuk semua sempadan unsur. btnborder
border-radius: 37px; -webkit-border-radius: 37px; -o-border-radius: 37px; -moz-border-radius: 37px; text-shadow: 3px 2px #d4481b; -webkit-text-shadow: 3px 2px #d4481b; -o-text-shadow: 3px 2px #d4481b; -moz-text-shadow: 3px 2px #d4481b; font-family: 微软雅黑;
6
#search{
animation: breathe 1.1s infinite;7、使用@keyframes规则，创建动画。
@keyframes breathe{
0%{ transform: scale(.99); }
50%{ transform: scale(1.03); }
100%{ transform: scale(.99); }
}代码效果
ok,编辑代码完成。
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>button按钮</title>
<style type="text/css">
.search {
width: 185px;
height: 70px;
background: url(images/btn_08.jpg) no-repeat center;
border-radius: 8px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-moz-border-radius: 8px;
float: left;
font-size: 30px;
text-align: center;
font-weight: bold;
border: none;
color: #fff;
cursor: pointer;
line-height: 70px;
font-family: 微软雅黑;
}
.btn {
width: 383px;
height: 70px;line-height: 0;
border: 2px solid #a2f3ff;
background: #f3682d;
margin: 22px 0 0 17px;
border-radius: 37px;
-webkit-border-radius: 37px;
-o-border-radius: 37px;
-moz-border-radius: 37px;
text-shadow: 3px 2px #d4481b;
-webkit-text-shadow: 3px 2px #d4481b;
-o-text-shadow: 3px 2px #d4481b;
-moz-text-shadow: 3px 2px #d4481b;
font-family: 微软雅黑;
}
#search{
animation: breathe 1.1s infinite;
}
@keyframes breathe{
0%{ transform: scale(.99); }
50%{ transform: scale(1.03); }
100%{ transform: scale(.99); }
}
</style>
</head>
<body>
<input id="search" name="cx" type="button" value="开始游戏" class="btn search">
</body>
</html>推荐学习：CSS3视频教程
Atas ialah kandungan terperinci Satu helah untuk mengajar anda cara menggunakan css3 untuk mencipta butang dan menambah kesan dinamik (perkongsian kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Memindahkan Teks dalam HTML
Sep 04, 2024 pm 04:45 PM
Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP?
Feb 07, 2025 am 11:57 AM
Tutorial ini menunjukkan cara memproses dokumen XML dengan cekap menggunakan PHP. XML (bahasa markup extensible) adalah bahasa markup berasaskan teks yang serba boleh yang direka untuk pembacaan manusia dan parsing mesin. Ia biasanya digunakan untuk penyimpanan data
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
