Maison >interface Web >tutoriel CSS >Une astuce pour vous apprendre à utiliser CSS3 pour créer des boutons et ajouter des effets dynamiques (partage de code)

Une astuce pour vous apprendre à utiliser CSS3 pour créer des boutons et ajouter des effets dynamiques (partage de code)

奋力向前
奋力向前original
2021-09-06 17:08:002654parcourir

Dans l'article précédent "Débutant : Comment utiliser ccs pour créer une mise en page simple (avec code) ", je vous ai présenté comment utiliser ccs pour créer une mise en page simple. L'article suivant vous présentera comment utiliser CSS3 pour créer des boutons et ajouter des effets dynamiques. Voyons comment le faire ensemble.

Une astuce pour vous apprendre à utiliser CSS3 pour créer des boutons et ajouter des effets dynamiques (partage de code)

cssComment obtenir l'effet bouton bouton ?css如何实现button按钮效果?

HTML结构:

首先定义一个body,使用button按钮,添加文字value设置为“开始游戏”以方便设置class转为id选择器。

<body>
<input id="search" name="cx" type="button" value="开始游戏" class="btn search">
</body>

效果代码

Une astuce pour vous apprendre à utiliser CSS3 pour créer des boutons et ajouter des effets dynamiques (partage de code)

效果出来了,能看到按钮效果了,但是没有给它添加动态装饰,通过使用css给它添加动态效果,一起看看怎么做。

css编辑代码:

1、在style之间,对search进行样式初始化,添加设置高度和宽度,然后使用设置背景background,设置no-repeat这个属性背景图将不会被重复。

.search {
		    width: 185px;
		    height: 70px;
		    background: url(images/btn_08.jpg) no-repeat center;
		}

代码效果

Une astuce pour vous apprendre à utiliser CSS3 pour créer des boutons et ajouter des effets dynamiques (partage de code)

2、接着,给css3按钮添加圆角效果设置属性每个border的四个值,最后设置居中对齐使用float: left

border-radius: 8px;
-webkit-border-radius: 8px;
-o-border-radius: 8px;
-moz-border-radius: 8px;
float: left;		

代码效果

Une astuce pour vous apprendre à utiliser CSS3 pour créer des boutons et ajouter des effets dynamiques (partage de code)

四点边圆角效果出来了

3、再给search进行样式添加字体大小、文本对齐方式、字体的粗细,设置border元素所有边框的样式、颜色、形状。

font-size: 30px;
text-align: center;
font-weight: bold;
border: none;
color: #fff;
cursor: pointer;
line-height: 70px;
font-family: 微软雅黑;

4、在style之间,对btn进行样式初始化,添加设置高度和宽度,然后使用设置背景background

.btn {
		    width: 383px;
		    height: 70px;line-height: 0;
		    border: 2px solid #a2f3ff;
		    background: #f3682d;
		    
		}

代码效果

Une astuce pour vous apprendre à utiliser CSS3 pour créer des boutons et ajouter des effets dynamiques (partage de code)

5、再给btn进行样式添加字体大小、文本对齐方式、字体的粗细,设置border元素所有边框的样式、颜色、形状。

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

代码效果

Une astuce pour vous apprendre à utiliser CSS3 pour créer des boutons et ajouter des effets dynamiques (partage de code)

6、将动画与search

Structure HTML : 🎜🎜Définissez d'abord un corps, utilisez , ajoutez du texte valeur et réglez-le sur "Démarrer le jeu" pour faciliter le réglage de la classe sur le sélecteur id. 🎜
#search{
		    animation: breathe 1.1s infinite;
🎜Code d'effet🎜🎜WeChat capture d'écran_20210906162714 .png 🎜🎜L'effet apparaît et vous pouvez voir l'effet du bouton, mais aucune décoration dynamique n'y est ajoutée. Utilisez css pour y ajouter des effets dynamiques. Voyons comment faire. 🎜🎜Code d'édition CSS : 🎜🎜1. Entre style, initialisez le style de recherche, ajoutez un paramètre de hauteur et de largeur, puis utilisez pour définir l'arrière-plan background , définissez <code>no-repeat cet attribut image d'arrière-plan ne sera pas répété. 🎜
@keyframes breathe{
		  0%{ transform: scale(.99); }
		  50%{ transform: scale(1.03); }
		  100%{ transform: scale(.99); }
		}
🎜Effet de code🎜🎜WeChat capture d'écran_20210906163541 . png 🎜🎜2. Ensuite, ajoutez un effet de coin arrondi au bouton css3, définissez quatre valeurs pour chaque attribut border, et enfin définissez l'alignement central en utilisant float : gauche.
🎜
<!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>
🎜Effet de code🎜🎜 Capture d'écran QQ 20210906164717.jpg🎜🎜L'effet arrondi à quatre points apparaît🎜🎜3. Ajoutez ensuite la taille de la police, l'alignement du texte et l'épaisseur de la police au style recherche, et définissez Le style, la couleur et la forme de toutes les bordures de l'élément border. 🎜rrreee🎜4. Entre style, initialisez le style de btn, ajoutez un paramètre de hauteur et de largeur, puis utilisez set background background. 🎜rrreee🎜Effet de code🎜🎜WeChat capture d'écran_20210906165710 . png 🎜🎜5. Ajoutez ensuite la taille de la police, l'alignement du texte et l'épaisseur de la police au style de btn, et définissez le style, la couleur et la couleur de toutes les bordures du border<.> forme de l'élément. 🎜rrreee🎜Effet de code🎜🎜<img src="https://img.php.cn/upload/image/299/408/650/1630918977440644.jpg" title="1630918977440644.jpg" alt="Capture d'écran QQ 20210906170209. jpg">🎜🎜6. Lier l'animation à la <code>recherche🎜
#search{
		    animation: breathe 1.1s infinite;

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

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

代码效果

Une astuce pour vous apprendre à utiliser CSS3 pour créer des boutons et ajouter des effets dynamiques (partage de code)

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视频教程

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn