简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel CSS > le corps du texte

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

奋力向前
Libérer： 2021-09-06 17:10:22
original
2576 Les gens l'ont consulté

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>
Copier après la connexion

效果代码

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;
		}
Copier après la connexion

代码效果

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;
Copier après la connexion

代码效果

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: 微软雅黑;
Copier après la connexion

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

.btn {
		    width: 383px;
		    height: 70px;line-height: 0;
		    border: 2px solid #a2f3ff;
		    background: #f3682d;
		    
		}
Copier après la connexion

代码效果

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: 微软雅黑;
Copier après la connexion

代码效果

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 < bouton code>, 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;
Copier après la connexion
Copier après la connexion
🎜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 < /code>, 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); }
		}
Copier après la connexion
Copier après la connexion
🎜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>
Copier après la connexion
Copier après la connexion
🎜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<. /code> 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;
Copier après la connexion
Copier après la connexion

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

@keyframes breathe{
		  0%{ transform: scale(.99); }
		  50%{ transform: scale(1.03); }
		  100%{ transform: scale(.99); }
		}
Copier après la connexion
Copier après la connexion

代码效果

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>
Copier après la connexion
Copier après la connexion

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

Étiquettes associées：
css css3 html
source：php.cn
Article précédent：Article du débutant : Comment utiliser ccs pour créer une mise en page simple (avec code) Article suivant：Comment centrer la page en CSS
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1335
La page ne peut soudainement plus extraire le CSS ou le bootstrap Je suis donc en train de développer une page, j'en ai fait une partie hier et ça a très bi...
Depuis 2024-04-06 21:58:04
0
1
800
Modifier dynamiquement les styles CSS en ligne dans Javafx J'essaie de changer l'image d'arrière-plan d'un volet lorsque l'application est agrandie. ...
Depuis 2024-04-06 20:57:16
0
1
487
Comment empiler les éléments flottants verticalement plutôt qu'horizontalement en CSS ? J'essaie de créer une page Web avec deux colonnes, avec le contenu principal d'un côté et ...
Depuis 2024-04-06 20:45:26
0
2
386
Existe-t-il un moyen de forcer le texte de la flexbox à être centré verticalement, quel que soit l'autre code CSS dont nous disposons ? J'ai le code CSS suivant qui fait partie d'un code CSS plus vaste utilisé dans un site Web...
Depuis 2024-04-06 20:41:51
0
1
518
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！