Maison > Article > interface Web > 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:002590parcourir
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.
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>
效果代码
效果出来了，能看到按钮效果了，但是没有给它添加动态装饰，通过使用css给它添加动态效果，一起看看怎么做。
css编辑代码：
1、在style之间，对search进行样式初始化，添加设置高度和宽度，然后使用设置背景background，设置no-repeat这个属性背景图将不会被重复。
.search {
width: 185px;
height: 70px;
background: url(images/btn_08.jpg) no-repeat center;
}代码效果
2、接着，给css3按钮添加圆角效果设置属性每个border的四个值，最后设置居中对齐使用float: left。
border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px; -moz-border-radius: 8px; float: left;
代码效果
四点边圆角效果出来了
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;
}代码效果
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: 微软雅黑;
代码效果
6、将动画与search
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🎜🎜🎜🎜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🎜🎜🎜🎜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🎜🎜🎜🎜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🎜🎜🎜🎜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); }
}代码效果
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
Article précédent：Article du débutant : Comment utiliser ccs pour créer une mise en page simple (avec code)Article suivant：Article du débutant : Comment utiliser ccs pour créer une mise en page simple (avec code)
Articles Liés
Voir plus- Comment créer un effet d'agrandissement d'image sympa en utilisant du CSS3 pur ?
- Comment ajouter un effet de changement de couleur dynamique à l'image d'arrière-plan en CSS3
- Comment créer une disposition de flux en cascade en utilisant du CSS3 pur ? Méthode de brève analyse des colonnes
- Comment ajouter une image d'arrière-plan au texte en utilisant du CSS3 pur
- Utilisez CSS3 pour créer des effets d'animation de chargement pratiques (deux types)
- HTML5+CSS3 dessine dynamiquement un éléphant
- Apprenez à utiliser CSS3 pour ajouter des effets tridimensionnels aux polices (avec code)