來杯咖啡（可複制源代碼）可用于网站设计页面切换，按钮开关等，设计非常精美
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>來杯咖啡</title> <style> *{margin:0;padding:0;box-sizing:border-box}body{display:flex;justify-content:center;align-items:center;min-height:100vh;background:#dadada}label{position:relative;width:300px;height:150px;background:#3e3e3e;box-shadow:0 0 0 4px #222;border-radius:75px;cursor:pointer;display:flex;justify-content:center;align-items:center}label input{appearance:none}label span{position:absolute;left:0;width:175px;height:150px;background:url("./images/Coffee_01.png");background-size:auto 150px;z-index:1000;transition:1.5s;transform:rotate(180deg);transform-origin:75px;filter:drop-shadow(0 0 15px rgba(0,0,0,0.5))}label input:checked ~ span{left:150px;transform:rotate(720deg);background:url("./images/Coffee_02.png");background-size:auto 150px}label b{position:absolute;inset:0;background:#d12120;border-radius:75px;transition:0.5s;box-shadow:inset 0 0 25px rgba(0,0,0,0.75);opacity:0.75}label input:checked ~ b{background:#87b328}label i{position:absolute;color:white;left:50px;font-size:4em !important;transition:1s;transition-delay:0s;scale:0}label input:checked ~ i{scale:1;transition-delay:0.5s}label i:last-child{left:inherit;right:50px;scale:1}label input:checked ~ i:last-child{scale:0;transition-delay:0s} </style></head><body> <label> <input type="checkbox" /> <span></span> <b></b> <i class="iconfont icon-check"></i> <i class="iconfont icon-xmark"></i> </label></body></html>
掃描查看手機版網站
