Heim >Web-Frontend >CSS-Tutorial >Ein Trick, um Ihnen beizubringen, wie Sie mit CSS3 Schaltflächen erstellen und dynamische Effekte hinzufügen (Code-Sharing)
Ein Trick, um Ihnen beizubringen, wie Sie mit CSS3 Schaltflächen erstellen und dynamische Effekte hinzufügen (Code-Sharing)
- 奋力向前Original
- 2021-09-06 17:08:002650Durchsuche
Im vorherigen Artikel „Neuling: So erstellen Sie mit CCS ein einfaches Layout (mit Code) “ habe ich Ihnen vorgestellt, wie Sie mit CCS ein einfaches Layout erstellen. Im folgenden Artikel erfahren Sie, wie Sie mit CSS3 Schaltflächen erstellen und dynamische Effekte hinzufügen.
cssWie erreiche ich den Schaltflächeneffekt button?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
body, verwenden Sie -Schaltfläche-Schaltfläche, fügen Sie den Text Wert hinzu und setzen Sie ihn auf „Spiel starten“, um das Festlegen der Klasse auf den id-Selektor zu erleichtern. 🎜#search{
animation: breathe 1.1s infinite;🎜Effektcode🎜🎜🎜🎜Der Effekt erscheint und Sie können den Schaltflächeneffekt sehen, es wird jedoch keine dynamische Dekoration hinzugefügt. Verwenden Sie css, um dynamische Effekte hinzuzufügen. Sehen wir uns an, wie das geht. 🎜🎜CSS-Bearbeitungscode: 🎜🎜1. Initialisieren Sie zwischen style den Stil von search, fügen Sie die Einstellung Höhe und Breite hinzu und legen Sie dann den Hintergrund background fest , legen Sie no-repeat fest. Dieses Attribut-Hintergrundbild wird nicht wiederholt. 🎜@keyframes breathe{
0%{ transform: scale(.99); }
50%{ transform: scale(1.03); }
100%{ transform: scale(.99); }
}🎜Codeeffekt🎜🎜🎜🎜2. Fügen Sie als Nächstes einen abgerundeten Eckeneffekt zur Schaltfläche css3 hinzu, legen Sie vier Werte für jedes border-Attribut fest und legen Sie schließlich die Mittelausrichtung mit fest float: left. 🎜
<!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>🎜Codeeffekt🎜🎜🎜🎜Der Vier-Punkt-Effekt mit abgerundeten Ecken entsteht🎜🎜3. Fügen Sie dann Schriftgröße, Textausrichtung und Schriftstärke zum search-Stil hinzu und legen Sie Der Stil, die Farbe und die Form aller Ränder des border-Elements. 🎜rrreee🎜4. Initialisieren Sie zwischen style den Stil von btn, fügen Sie die Einstellung Höhe und Breite hinzu und verwenden Sie dann den eingestellten Hintergrund background. 🎜rrreee🎜Codeeffekt🎜🎜🎜🎜5. Fügen Sie dann Schriftgröße, Textausrichtung und Schriftstärke zum Stil von btn hinzu und legen Sie den Stil, die Farbe und die Farbe aller Rahmen des border-Element. 🎜rrreee🎜Codeeffekt🎜🎜<img src="https://img.php.cn/upload/image/299/408/650/1630918977440644.jpg" title="1630918977440644.jpg" alt="QQ-Screenshot 20210906170209. jpg">🎜🎜6. Animation an <code>search binden🎜#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视频教程
Das obige ist der detaillierte Inhalt vonEin Trick, um Ihnen beizubringen, wie Sie mit CSS3 Schaltflächen erstellen und dynamische Effekte hinzufügen (Code-Sharing). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Einsteigerartikel: So erstellen Sie mit CCS ein einfaches Layout (mit Code)Nächster Artikel：Einsteigerartikel: So erstellen Sie mit CCS ein einfaches Layout (mit Code)
In Verbindung stehende Artikel
Mehr sehen- Wie erstelle ich mit reinem CSS3 einen coolen Bildvergrößerungseffekt?
- So fügen Sie in CSS3 einem Hintergrundbild einen dynamischen Farbwechseleffekt hinzu
- Wie erstelle ich ein Wasserfall-Layout mit reinem CSS3? Kurze Analyse der Säulenmethode
- So fügen Sie mit reinem CSS3 ein Hintergrundbild zum Text hinzu
- Verwenden Sie CSS3, um praktische Ladeanimationseffekte (zwei Arten) zu erstellen.
- HTML5+CSS3 zeichnet dynamisch einen Elefanten
- Erfahren Sie, wie Sie mit CSS3 Schriftarten dreidimensionale Effekte hinzufügen (mit Code).