vue+enzyme+jest-lite实现重复字符串检测清除效果代码
代码语言:html
所属分类:其他
代码描述:vue+enzyme+jest-lite实现重复字符串检测清除效果代码
代码标签: vue enzyme jest-lite 重复 字符 检测 清除
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/prettify.css"> <style> @import url("https://fonts.googleapis.com/css2?family=Barlow:wght@200;800&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Barlow", sans-serif; } body { min-height: 100vh; display: grid; place-content: center; --soft-color: #5c5c5c; --bkg-color: #1a1a1c; --text-color: #95a9b4; --big-font-size: 4rem; background-color: var(--bkg-color); background-image: url("//repo.bfw.wiki/bfwrepo/image/62fae8396bd3b.png"); } .container { width: 100%; max-width: 900px; padding: 2em; text-align: center; overflow: hidden; } .output { width: 100%; max-width: 900px; font-size: clamp(2rem, 6vw, var(--big-font-size)); line-height: calc(var(--big-font-size) - 2); text-transform: uppercase; font-weight: 800; margin-bottom: 2em; color: var(--text-color); } .output span { opacity: 0.1; } .active span { animation: duplicates 0.5s linear forwards; } @keyframes duplicates { 0% { opacity: 0.1; } 10% { opacity: 0.5; } 15% { opacity: 0.1; } 25% { opacity: 0.7; } 35% { opacity: 0.2; } 45% { opacity: 0.7; } 55% { opacity: 0.3; } 100% { opacity: 1; } } .count { margin-top: 1em; padding: 2em; } .count p { color: var(--text-color); font-size: 1rem; line-height: 1rem; word-spacing: 0.2em; } .count button { margin-top: 1em; width: min-content; background: transparent; outline: none; border: none; color: var(--text-color); font-size: 0.9rem; line-height: 0.9rem; text-transform: uppercase; cursor: pointer; } .input { width: 100%; border: none; outline: none; padding: 0.5em; text-align: center; font-size: clamp(1.2rem, 3vw, 1.7rem); text-transform: uppercase; font-weight: 200; color: var(--soft-color); background: transparent; } #test { position: fixed; bottom: 0; left: 0; font-size: 0.8rem; opacity: 0.2; cursor: pointer; transition: opacity 0.3s; } #test:hover { opacity: 1; } </style> </head> <body > <div class="container" id="app"> <div class="output" :class="{ 'active': showDuplicates }" v-html="outputString"></div> <input c.........完整代码请登录后点击上方下载按钮下载查看
网友评论0