CSS3+JSを使って各種ボタンを描画するサンプルコードの共有

ボタンを描くには3つのステップがあると思います

• 最初のステップはボタンの輪郭を描くことです

• 適切なHTMLタグを選択し、輪郭のCSSを設定します

/* html代码 */
<a href="#" class="button off"></a>
body{
    background-color: #E6C9B6;
}

/* CSS样式 */
/* 按钮轮廓 */
.button{
    display: block;
    margin:100px auto;
    position: relative;
    width:100px;
    height:40px;
    border-radius: 50px;
    border:1px solid #fff;
    background-color: #E9E4E0;
}

レンダリング

IOS-1.jpg を模倣する

• 2 番目のステップは、ボタンのデフォルト状態を描画することです

• HTML ファイルに他のタグを追加しないため、このステップは非常に重要です。 , 使用する必要があります: 擬似クラスが CSS でボタンをレンダリングした後

  /* 接在上面继续写 */
  .button:after{
     display: block;
     position: absolute;    //相对按钮的轮廓进行决定定位
     top:2px;
     bottom: 2px;        //即设置top,又设置bottom使元素自动拉伸到最大
     left:2px;           //实际上，按钮的宽度即为容器的高度-(top+bottom)
     width:36px;           //按钮的宽度
     line-height: 36px;    //按钮文字的高度，如果不需要文字，可移除
     text-align: center;
     text-transform: uppercase;
     font-size: 16px;
     background-color: #fff;      //这里的背景颜色是按钮的背景颜色
     border:2px solid;
     transition: all 500ms;        //按钮的动画时长
  }

  実際、このステップを実行した後、ブラウザ上の効果はまったく変わっていないことがわかります。以前と同じですが、ドン心配しないでください、いくつか追加すれば明らかです

• アウトライン内に小さなボタンを追加します

  .off:after {
     content: 'off';
     border-radius:30px;
     color: #999;
  }

  デフォルトはオフ状態です

IOS-2を模倣します

IOS-3.jpgを模倣します

• 最後に ワンステップ、切り替え用のJSコードを書いてみましょう

  
  実はCSS切り替えの中ではtoggleClassが一番便利です。
  でも！ ！ ！
  この切り替え方法では、トリガーしたいJSイベントを切り替えることはできません、
  結局のところ、特定の機能を完了するためにボタンを描画するので、

  それでこの方法を採用しましたが、おそらくそれが最適ではないでしょう

  - 再接着绘制要切换的状态

  
  以上、完全な切り替えボタンですが描かれています
  私の専門的ではないチュートリアルを読むために 3 ～ 5 分を費やしていただきありがとうございます

PS: 昨日、電球のスイッチを制御する (実際には背景画像を切り替える) ボタンを描画する必要がありました。壁にあるブルスイッチ、光をコントロールするのでシミュレーションスイッチで遊びたくて昼に眠いのを我慢して描きました

.on:after {
          content: 'ON';
          border-radius:30px;
          transform: translate(56px, 0);   
          color:transparent;
          background-color:#4BD429;
        }

シミュレーションスイッチ.jpg

。 -2.jpg

りー

以上がCSS3+JSを使って各種ボタンを描画するサンプルコードの共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。