Rumah > Artikel > hujung hadapan web > 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)

奋力向前asal: 2021-09-06 17:08:002609semak imbas

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

Satu helah untuk mengajar anda cara menggunakan css3 untuk mencipta butang dan menambah kesan dinamik (perkongsian kod)

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

Satu helah untuk mengajar anda cara menggunakan css3 untuk mencipta butang dan menambah kesan dinamik (perkongsian 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

Satu helah untuk mengajar anda cara menggunakan css3 untuk mencipta butang dan menambah kesan dinamik (perkongsian 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: 微软雅黑;

4. Antara

, 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;
		    
		}

Kesan kod

Satu helah untuk mengajar anda cara menggunakan css3 untuk mencipta butang dan menambah kesan dinamik (perkongsian kod)

5. Tambahkan saiz fon, penjajaran teks dan ketebalan fon pada gaya

dan tetapkan Gaya, warna dan bentuk semua sempadan unsur. btnborder

Kesan kod

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: 微软雅黑;

Satu helah untuk mengajar anda cara menggunakan css3 untuk mencipta butang dan menambah kesan dinamik (perkongsian kod) 6

#search{
		    animation: breathe 1.1s infinite;

7、使用@keyframes规则，创建动画。

@keyframes breathe{
		  0%{ transform: scale(.99); }
		  50%{ transform: scale(1.03); }
		  100%{ transform: scale(.99); }
		}

代码效果

Satu helah untuk mengajar anda cara menggunakan css3 untuk mencipta butang dan menambah kesan dinamik (perkongsian kod)

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!

css css3 html Float class 选择器 border background

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Artikel pemula: Cara menggunakan ccs untuk membuat susun atur ringkas (dengan kod)Artikel seterusnya：Artikel pemula: Cara menggunakan ccs untuk membuat susun atur ringkas (dengan kod)

Artikel berkaitan

Lihat lagi