点击查看效果
代码直接复制就可以用了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"> <style> /*蓝色按钮----------------------------------------*/ button {tap-highlight-color: transparent !important;-webkit-tap-highlight-color: transparent !important;transition: .618s ease;cursor: pointer;height: 50px;width: 100%;border: 1px solid rgba(51, 100, 237, .35);color: #fff;font-size: 16px;font-weight: bold;border-radius: 3px;background: linear-gradient(180deg, #648CFF 0%, #4172FA 100%);box-shadow: 0 3px 4px 0 rgba(44, 71, 146, .32), inset 0 -2px 0 0 #3262e6;text-align: center;line-height: 46px;user-select: none;} button:hover {opacity: .9;box-shadow: none;} button:focus, button:active {outline: none;background: linear-gradient(180deg, #4d7bff, #154deb);transform: scale(.97);} button[disabled] {color: #fff;background: #b0c7ff;pointer-events: none;cursor: default;box-shadow: none;} /*白色按钮----------------------------------------*/ button[white] {tap-highlight-color: transparent !important;-webkit-tap-highlight-color: transparent !important;transition: .618s ease;cursor: pointer;width: 100%;height: 50px;border: none;border-radius: 3px;font-size: 16px;font-weight: bold;color: #292f3a;letter-spacing: 0;outline: none;background: linear-gradient(-180deg, #fff 8%, #f2f2f7 97%);box-shadow: 0 2px 3px 0 rgba(44, 71, 146, .32), 0 -1px 1px 0 rgba(44, 71, 146, .1);} button[white]:hover {background: linear-gradient(-180deg, #f2f2f7 20%, #f2f2f7 97%);box-shadow: none;color: #3973ff;border: none;} button[white]:active, button[white]:active {background: #d8dde6;transform: scale(.97);} button[white][disabled] {background: rgba(216, 221, 230, .8) !important;pointer-events: none;cursor: default;color: white;box-shadow: none;} /*输入框----------------------------------------*/ input {transition: .618s ease;width: 100%;height: 40px;background: #fff;border-radius: 3px;padding: 10px;outline: none;font-size: 16px;color: #292f3a;letter-spacing: 0;line-height: 16px;box-sizing: border-box;border: 1px solid #c0c4cc;} input:hover {border-color: #909399;} input:focus, input:active {border-color: #3973ff;background: #f7f9fc;} input[disabled] {pointer-events: none;background: #f2f5fa;border: 1px solid #c0c4cc;} input[error] {border-color: #dd1a32;background: #ffeff1;} input[error]:focus, input[error]:active {color: #dd1a32;border-color: #ad0015;background: #dd1a3222;} /*下拉框----------------------------------------*/ select {transition: .618s ease;width: 100%;height: 40px;font-size: 16px;color: #292f3a;letter-spacing: 0;line-height: 16px;border: 1px solid #c0c4cc;border-radius: 3px;background: #fff;outline: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;padding: 10px 12px 10px 12px;cursor: pointer;} select:hover {border-color: #909399;} select:focus, select:active {border: 2px solid #3973ff;background: #f7f9fc;padding: 9px 11px 9px 11px;} select[disabled] {pointer-events: none;background: #f2f5fa;border: 1px solid #c0c4cc;} /*标签----------------------------------------*/ .tag { display: inline-block; position: relative; padding: 6px 12px; font-size: 14px; background: #e4e9f2; color: rgb(32, 17, 172); border-radius: 100px; cursor: default; } /*黑色气泡框----------------------------------------*/ .black-arrow-tip {position: relative;display: inline-block;padding: 10px 12px;max-width: 240px;border-radius: 3px;font-size: 12px;color: #fff;line-height: 12px;box-sizing: border-box;background: #292f3a;box-shadow: 0 2px 3px 0 rgba(41, 47, 58, .4);} .black-arrow-tip:after {content: "";position: absolute;left: -4px;top: 11px;display: block;width: 10px;height: 10px;border-radius: 2px;transform: rotate(45deg);background: #292f3a;box-shadow: 0 2px 3px 0 rgba(41, 47, 58, .4);} /*白色气泡框----------------------------------------*/ .white-arrow-tip {position: relative;display: inline-block;padding: 10px 12px;border-radius: 3px;max-width: 240px;font-size: 12px;color: #fff;line-height: 12px;background: #fff;box-shadow: 0 -1px 1px 0 rgba(216, 221, 230, .4), 0 2px 4px 0 #ccd0d9;color: rgba(41, 47, 58, .7);} .white-arrow-tip:after {content: "";position: absolute;left: -4px;top: 11px;display: block;width: 10px;height: 10px;background: #fff;box-shadow: -1px 2px 1px 0 rgba(41, 47, 58, .14);border-radius: 2px;transform: rotate(45deg);} /*普通提示----------------------------------------*/ .normal-tip {display: inline-block;padding: 10px 12px;background: #525966;border-radius: 2px;font-size: 12px;color: hsla(0, 0%, 100%, .7);letter-spacing: 0;line-height: 12px;} /*关闭按钮----------------------------------------*/ .close-btn {tap-highlight-color: transparent !important;-webkit-tap-highlight-color: transparent !important;width: 24px;height: 24px;font-size: 16px;cursor: pointer;display: inline-block;font-style: normal;position: relative;text-align: center;user-select: none;} .close-btn:after {content: "";position: absolute;margin-top: -21px;display: block;width: 100%;height: 100%;border-radius: 100%;background-color: rgba(0, 0, 0, .08);opacity: 0;transform: scale(.5);transition: all .2s cubic-bezier(.175, .885, .32, 1.275);} .close-btn:hover:after {opacity: 1;transform: scale(1.4);} /*卡片----------------------------------------*/ .normal-card {border-radius: 8px;box-sizing: border-box;padding: 10px;margin: 10px;background: #fff;box-shadow: 0 2px 4px 0 #ccd0d9;} .card {border-radius: 8px;box-sizing: border-box;padding: 10px;margin: 10px;background: #fff;box-shadow: 0 -1px 3px 0 rgba(216, 221, 230, .3), 0 6px 12px 0 rgba(204, 208, 217, .8);} .large-card {border-radius: 8px;box-sizing: border-box;padding: 10px;margin: 10px;background: #fff;box-shadow: 0 12px 29px 0 #ccd0d9;} /*单选框----------------------------------------*/ input[type="radio"] {width: 20px;height: 20px;transform: translateY(4px);} /*复选框----------------------------------------*/ input[type="checkbox"] {width: 20px;height: 20px;transform: translateY(4px);} </style> </head> <body> <button>蓝色按钮</button> <br> <br> <button disabled>蓝色按钮（禁用）</button> <br> <br> <button white>白色按钮</button> <br> <br> <button white disabled>白色按钮（禁用）</button> <br> <br> <input type="text" placeholder="请输入…"> <br> <br> <input type="text" placeholder="请输入必填项" error=""> <br> <br> <input type="text" placeholder="禁止输入" disabled> <br> <br> <select> <option value="">选项1</option> <option value="">选项2</option> <option value="">选项3</option> </select> <br> <br> <select disabled> <option value="">禁止选中</option> </select> <br> <br> <div class="tag">标签文字</div> <br> <br> <div class="black-arrow-tip">黑色气泡框</div> <br> <br> <div class="white-arrow-tip">白色气泡框</div> <br> <br> <div class="normal-tip">普通提示</div> <br> <br> <i class="close-btn">✕</i> <br> <div class="normal-card" style="width: 300px;height: 200px;">普通阴影卡片</div> <br> <div class="card" style="width: 300px;height: 200px;">正常阴影卡片</div> <br> <div class="large-card" style="width: 300px;height: 200px;">大面积阴影卡片</div> <br> <br> <p>旋转加载</p> <svg data-v-b9c138e2="" version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 50 50" xml:space="preserve"><path data-v-b9c138e2="" fill="#3973ff" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" transform="rotate(332.128 25 25)"><animateTransform data-v-b9c138e2="" attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg> <svg data-v-b9c138e2="" version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 50 50" xml:space="preserve"><path data-v-b9c138e2="" fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" transform="rotate(332.128 25 25)"><animateTransform data-v-b9c138e2="" attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg> <button style="vertical-align:middle"> <svg style="transform: translateY(5px);" data-v-b9c138e2="" version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 50 50" xml:space="preserve"><pathdata-v-b9c138e2 =""fill="#fff"d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" transform="rotate(332.128 25 25)"> <animateTransform data-v-b9c138e2="" attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform> </path></svg> loading... </button> <br> <br> <p>单选框</p> <input type="radio" name="sex" value="1" checked>男 <input type="radio" name="sex" value="0">女 <br> <br> <p>复选框</p> <input type="checkbox" id="interest-1" name="interest" value="1" checked><label for="interest-1">唱歌</label> <input type="checkbox" id="interest-2" name="interest" value="2" ><label for="interest-2">跳舞</label> <input type="checkbox" id="interest-3" name="interest" value="3" checked><label for="interest-3">游戏</label> <input type="checkbox" id="interest-4" name="interest" value="4" ><label for="interest-4">旅游</label> <input type="checkbox" id="interest-5" name="interest" value="5" ><label for="interest-5">书法</label> <br> <br> </body> </html>
