첫 번째 단계는 버튼의 윤곽선을 그리는 것입니다
적절한 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; }
렌더링
두 번째 단계는 버튼의 기본 상태를 그리는 것입니다.
이 단계는 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; }
기본값은 꺼진 상태입니다
- 再接着绘制要切换的状态
마지막으로 한 단계, JS 코드 작성으로 전환
사실 CSS 전환 중에서는 ToggleClass가 가장 편리합니다.
하지만! ! !
이 전환 방법은 트리거하려는 JS 이벤트를 전환할 수 없습니다.
결국 우리는 특정 기능을 완료하기 위해 버튼을 그립니다.
그래서 이 방법을 채택했지만 아마도 최선은 아닐 수도 있습니다
.on:after { content: 'ON'; border-radius:30px; transform: translate(56px, 0); color:transparent; background-color:#4BD429; }
그렇습니다. 완전한 전환 버튼 가 그려졌습니다
3~5분 동안 제 비전문적인 튜토리얼을 읽어주셔서 감사합니다
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; } });
绘制过程并不复杂,我也就不细说了,贴下效果图和代码,感兴趣的可以自行看一下
위 내용은 CSS3+JS를 사용하여 다양한 버튼을 그리는 방법에 대한 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!