adobe dreamweaver
新建html文档。
书写hmtl代码。
书写css代码。
书写css3特效代码。.button span:nth-last-of-type(-n+2) { z-index: 10; top: 4px; width: 116px; height: 72px; -webkit-transition: opacity 800ms ease 100ms; transition: opacity 800ms ease 100ms; }.button span:nth-last-of-type(-n+2):after { position: absolute; top: 26px; line-height: 1; font-family: 'Open Sans'; font-weight: 800; font-size: 24px; color: white; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 20px #ffffff; }.button span:nth-of-type(2) { left: 4px; background: -webkit-linear-gradient(top, #c0392b 0%, #d65548 100%); background: linear-gradient(to bottom, #c0392b 0%, #d65548 100%); border-top-left-radius: 36px; border-bottom-left-radius: 36px; box-shadow: 4px 4px 12px 4px rgba(0, 0, 0, 0.5) inset, 0 -2px 8px rgba(0, 0, 0, 0.4) inset; }.button span:nth-of-type(2):after { content: 'OFF'; left: 18px; }.button span:last-of-type { right: 4px; background: -webkit-linear-gradient(top, #2ecc71 0%, #7ee2a8 100%); background: linear-gradient(to bottom, #2ecc71 0%, #7ee2a8 100%); border-top-right-radius: 36px; border-bottom-right-radius: 36px; box-shadow: -4px 4px 12px 4px rgba(0, 0, 0, 0.5) inset, 0 -2px 8px rgba(0, 0, 0, 0.4) inset; opacity: 0.2; }.button span:last-of-type:after { content: 'ON'; right: 22px; }.button input[type='checkbox'] { display: none; }.button input[type='checkbox']:checked ~ span:first-of-type { right: 76px; box-shadow: 0 6px 4px rgba(255, 255, 255, 0.1) inset, 0 2px 0px rgba(255, 255, 255, 0.2) inset, 0 -6px 0px rgba(0, 0, 0, 0.2) inset, 0 -2px 0px rgba(0, 0, 0, 0.2) inset, 0 2px 2px rgba(0, 0, 0, 0.4), 4px 2px 8px rgba(0, 0, 0, 0.4), -2px 0 1px rgba(209, 245, 224, 0.5) inset; }.button input[type='checkbox']:checked ~ span:nth-of-type(2) { opacity: 0.2; }.button input[type='checkbox']:checked ~ span:last-of-type { opacity: 1; }
代码整体结构。
查看效果。