CSS3+JS를 사용하여 다양한 버튼을 그리는 방법에 대한 샘플 코드 공유

버튼을 그리는 데에는 세 단계가 있다고 생각합니다

• 첫 번째 단계는 버튼의 윤곽선을 그리는 것입니다

• 적절한 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 모방

• 두 번째 단계는 버튼의 기본 상태를 그리는 것입니다.

• 이 단계는 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.jpg를 모방

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

rrree

IOS-3.jpg 흉내내기

• 마지막으로 한 단계, JS 코드 작성으로 전환

  사실 CSS 전환 중에서는 ToggleClass가 가장 편리합니다.
  하지만! ! !
  이 전환 방법은 트리거하려는 JS 이벤트를 전환할 수 없습니다.
  결국 우리는 특정 기능을 완료하기 위해 버튼을 그립니다.
  그래서 이 방법을 채택했지만 아마도 최선은 아닐 수도 있습니다

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

  그렇습니다. 완전한 전환 버튼 가 그려졌습니다
  3~5분 동안 제 비전문적인 튜토리얼을 읽어주셔서 감사합니다

PS: 어제는 전구 스위치를 제어하는(실제로는 배경 이미지 전환) 버튼을 그려야 했고, 주위를 둘러봤습니다. 그리고 벽에 있는 황소스위치를 보고 시뮬레이션 스위치로 놀고 싶어서 한낮의 졸음을 참다가 마지못해 그려봤습니다

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;
  }
});

시뮬레이션 스위치.jpg

시뮬레이션-2.jpg

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

위 내용은 CSS3+JS를 사용하여 다양한 버튼을 그리는 방법에 대한 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!