CSS3 を使用してボタンを作成し、動的な効果を追加する方法 (コード共有) を教える 1 つのトリック-CSSチュートリアル-php.cn

CSS3 を使用してボタンを作成し、動的な効果を追加する方法 (コード共有) を教える 1 つのトリック

奋力向前

リリース： 2021-09-06 17:10:22

オリジナル

2651 人が閲覧しました

前回の記事「初心者：ccsを使って簡単なレイアウトを作る方法（コード付き）」では、ccsを使って簡単なレイアウトを作る方法を紹介しました。次の記事では、css3 を使用してボタンを作成し、動的な効果を追加する方法を紹介しますので、一緒に見てみましょう。

CSS3 を使用してボタンを作成し、動的な効果を追加する方法 (コード共有) を教える 1 つのトリック

##cssbutton ボタンの効果を実現するにはどうすればよいですか?

HTML 構造:

最初に

body を定義し、button ボタンを使用してテキスト value を追加し、class の設定を容易にするために「Start Game」に設定します。 から id セレクター。

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

ログイン後にコピー

エフェクトコード

CSS3 を使用してボタンを作成し、動的な効果を追加する方法 (コード共有) を教える 1 つのトリック ##エフェクトが出てボタンのエフェクトが確認できますが、動的装飾は追加されていません。

ダイナミックエフェクトを追加して、その方法を見てみましょう。

css編集コード:

style

の間で、

searchのスタイルを初期化し、高さと幅の設定を追加し、背景の設定を使用します。 background, set no-repeat この属性の背景画像は繰り返されません。

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

ログイン後にコピー

コード効果

2. 次に、 CSS3 を使用してボタンを作成し、動的な効果を追加する方法 (コード共有) を教える 1 つのトリック css3

ボタンに角丸効果を追加し、各 # のプロパティを設定します。 ##border

の 4 つの値、最後に float: left を使用して中央揃えを設定します。

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

ログイン後にコピー

コード効果

4点エッジの角丸効果は無効です

CSS3 を使用してボタンを作成し、動的な効果を追加する方法 (コード共有) を教える 1 つのトリック 3. Give

フォントサイズ、テキストの配置、フォントの太さをスタイルに追加し、

border

要素のすべての境界線のスタイル、色、形状を設定します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">font-size: 30px; text-align: center; font-weight: bold; border: none; color: #fff; cursor: pointer; line-height: 70px; font-family: 微软雅黑;</pre><div class="contentsignin">ログイン後にコピー</div></div>4. style の間で、

btn

のスタイルを初期化し、高さと幅の設定を追加してから、set background background を使用します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.btn { width: 383px; height: 70px;line-height: 0; border: 2px solid #a2f3ff; background: #f3682d; }</pre><div class="contentsignin">ログイン後にコピー</div></div>コード効果

5. 次に、フォントサイズ、テキストの配置、フォントの太さ、設定を

btn CSS3 を使用してボタンを作成し、動的な効果を追加する方法 (コード共有) を教える 1 つのトリック

に追加します。 border

要素のすべての境界線のスタイル、色、形状。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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: 微软雅黑;</pre><div class="contentsignin">ログイン後にコピー</div></div>コード効果

6. アニメーションを

search CSS3 を使用してボタンを作成し、動的な効果を追加する方法 (コード共有) を教える 1 つのトリック

にバインドします。

#search{
		    animation: breathe 1.1s infinite;

ログイン後にコピー

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

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

ログイン後にコピー

代码效果

CSS3 を使用してボタンを作成し、動的な効果を追加する方法 (コード共有) を教える 1 つのトリック

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

以上がCSS3 を使用してボタンを作成し、動的な効果を追加する方法 (コード共有) を教える 1 つのトリックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。