coco-message插件实现多种类型效果提示效果代码
代码语言:html
所属分类:弹出层
代码描述:coco-message插件实现多种类型效果提示效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Coco Message Example</title> <style> body { margin: 0; } #test { margin: 0 auto; width: 1000px; height: calc(160vh - 100px); display: flex; justify-content: center; align-items: center; } #test button { margin: 0 20px; } .coco-btn { font-size: 14px; text-decoration: none; padding: 6px 20px; white-space: nowrap; border-radius: 5px; font-weight: 500; display: inline-block; cursor: pointer; border: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; line-height: normal; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .coco-btn.cancel { margin-right: 10px; color: #525456; background-color: transparent; font-weight: 500; transition: all 0.06s ease-out; } .coco-btn, .coco-btn span, .coco-loading { position: relative; } .coco-btn.ok { background-color: #0077ff; color: #fefefe; } .coco-btn.ok::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; transition: all 0.12s ease-out; background-color: transparent; } .coco-btn.ok:hover::before { background-color: rgba(255, 255, 255, 0.08); } .coco-btn.ok:active::before { transition: all 80ms ease-out; background-color: rgba(0, 0, 0, 0.2); } .github{ font-weight: 600; text-align: center; margin.........完整代码请登录后点击上方下载按钮下载查看
网友评论0