Satu helah untuk mengajar anda cara menggunakan css3 untuk mencipta butang dan menambah kesan dinamik (perkongsian kod)-tutorial css-php.cn

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

奋力向前

Lepaskan： 2021-09-06 17:10:22

asal

2576 orang telah melayarinya

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.

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

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>

Salin selepas log masuk

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

Salin selepas log masuk

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;

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

#search{
		    animation: breathe 1.1s infinite;

Salin selepas log masuk

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

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

Salin selepas log masuk

代码效果

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>

Salin selepas log masuk

推荐学习：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!