Exemple de partage de code sur la façon d'utiliser CSS3+JS pour dessiner divers boutons

Je pense qu'il y a trois étapes pour dessiner un bouton

• La première étape consiste à dessiner le contour du bouton

• Choisissez la bonne balise HTML, définissez le contour 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;
}

Rendu

Imiter IOS -1 .jpg

• La deuxième étape consiste à dessiner l'état par défaut du bouton

• Cette étape est très importante car nous ne donnera plus de HTML Le fichier ajoute d'autres balises, nous devons donc utiliser la pseudo-classe :after pour rendre le bouton avec 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;        //按钮的动画时长
  }

  En fait, après avoir fait cette étape, vous constaterez que le l'effet sur le navigateur ne change pas du tout, ou alors C'est pareil qu'avant, mais ne vous inquiétez pas, ce sera évident si on ajoute un petit quelque chose

• Ajouter un petit bouton à l'intérieur le contour

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

  La valeur par défaut est désactivée

Imiter IOS-2.jpg

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

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

Imitez IOS-3.jpg

• La dernière étape consiste à écrire du code JS pour basculer

  En fait, dans la commutation CSS, toggleClass est le plus pratique.
  Mais ! ! !
  Cette méthode de commutation ne peut pas changer l'événement JS que vous souhaitez déclencher.
  Après tout, nous dessinons des boutons pour remplir certaines fonctions
  J'ai donc adopté cette méthode, mais ce n'est peut-être pas la meilleure.

  var zn=0;
  $('.button').click(function(e){
    if(zn==1){
        $(this).removeClass("on").addClass("off");
        //此处可填要触发的事件
        zn=0;
    }else{
        $(this).removeClass("off").addClass("on");
         //此处可填要触发的事件
        zn=1;
    }
  });

  À ce stade, un bouton d'interrupteur complet est dessiné

  Merci d'avoir consacré 3 à 5 minutes à lire mon tutoriel non professionnel
  

PS : Hier, j'allais pour dessiner un bouton pour contrôler l'interrupteur de l'ampoule (en fait, changer l'image d'arrière-plan), puis j'ai regardé autour de moi et j'ai vu un interrupteur en forme de taureau sur le mur, puisqu'il contrôle la lumière, j'ai voulu jouer avec la simulation de l'interrupteur, durable. la somnolence à midi, était vraiment difficile à dessiner

  绘制过程并不复杂，我也就不细说了，贴下效果图和代码，感兴趣的可以自行看一下

Simulation switch.jpg

Simulation-2.jpg

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!