https://codepen.io/lucagez/pen/LMEerQ 试着按下ctrl或者ctrl+shift键并把鼠标放到dom上看看效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <!-- https://codepen.io/lucagez/pen/LMEerQ --> <!-- https://codepen.io/mandycodestoo/pen/qQJEPJ --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https://cdn.bootcss.com/meyer-reset/2.0/reset.css" rel="stylesheet"> <title>DebuCSSer</title> <style> @import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300); * { padding: 0; margin: 0; box-sizing: border-box; } .frame { position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin-top: -200px; margin-left: -200px; border-radius: 2px; box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1); overflow: hidden; background: #12c2e9; background: linear-gradient(45deg, #f64f59, #c471ed, #12c2e9); color: #333; font-family: 'Open Sans', Helvetica, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .center { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: flex; flex-wrap: wrap; justify-content: center; } p { text-align: center; color: #666; font-size: 0.7rem; margin-bottom: 10px; } p.title { font-size: 0.8rem; font-weight: 700; background: #12c2e9; color: #f0f0f0; padding: 10px 0; } p .cost { display: block; font-weight: 700; font-size: 2rem; } hr { color: #eee; border: 0; height: 0; border-top: 3px solid rgba(0, 0, 0, 0.1); border-bottom: 4px solid rgba(255, 255, 255, 0.3); width: 60%; margin: 2px auto; } hr:nth-of-type(2n+2) { width: 50%; } .pack { width: 110px; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); background: #fff; height: 160px; display: flex; flex-direction: column; transition: all 0.5s ease; } .pack:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } .pack:hover .title { background: #c471ed; } .pack.pro { margin: 0 10px; } .pack.pro:hover ~ .stats .users .progress .value { width: 50%; } .pack.pro:hover ~ .stats .space .progress .value { width: 66%; } .pack.pro:hover ~ .stats .projects .progress .value { width: 42%; } .pack.basic:hover ~ .stats .users .progress .value { width: 2%; } .pack.basic:hover ~ .stats .space .progress .value { width: 5%; } .pack.basic:hover ~ .stats .projects .progress .value { width: 7%; } .pack.premium:hover ~ .stats .users .progress .value { width: 100%; } .pack.premium:hover ~ .stats .space .progress .value { width: 100%; } .pack.premium:hover ~ .stats .projects .progress .value { width: 100%; } .stats { width: 350px; height: 160px; background: rgba(255, 255, 255, 0.4); font-size: 0.7rem; color: #333; margin-top: 20px; padding: 10px; } .stats > div { display: flex; flex-direction: column; } .stats > div .labels { display: flex; justify-content: space-between; } .stats > div .progress { width: 100%; height: 10px; background: #ddd; margin-top: 5px; border-radius: 5px; } .stats > div .progress .value { background: linear-gradient(to right, #00d2ff, #3a7bd5); height: 100%; border-radius: 5px; width: 0; transition: all 0.7s ease; } .stats .space { margin: 20px 0; } .tip{font-size: 24px;text-align: center;margin-top: 200px;} .tip span{color: #f64f59;margin: 0 3px;} </style> </head> <body> <div class="tip">试着按下<span>ctrl</span>或者<span>ctrl+shift</span>键并把鼠标放到dom上看看效果</div> <div class="frame"> <div class="center"> <div class="pack basic"> <p class="title">Basic</p> <p><span class="cost">$5</span> per month</p> <div class="hr"> <hr><hr><hr><hr> </div> </div> <div class="pack pro"> <p class="title">Pro</p> <p><span class="cost">$10</span> per month</p> <div class="hr"><hr><hr><hr><hr></div> </div> <div class="pack premium"> <p class="title">Premium</p> <p><span class="cost">$20</span> per month</p> <div class="hr"><hr><hr><hr><hr></div> </div> <div class="stats"> <div class="users"> <div class="labels"> <span class="min">5 Users</span> <span class="max">100 Users</span> </div> <div class="progress"> <div class="value"></div> </div> </div> <div class="space"> <div class="labels"> <span class="min">20GB</span> <span class="max">200GB</span> </div> <div class="progress"> <div class="value"></div> </div> </div> <div class="projects"> <div class="labels"> <span class="min">1 Project</span> <span class="max">50 Projects</span> </div> <div class="progress"> <div class="value"></div> </div> </div> </div> </div> </div> </body> <!-- <script src="http://static.xcabc.com/js/jquery3.0.0.min.js"></script> --> <script> // Scroll down for Debucsser configurations // check out repo and docs at: // https://github.com/lucagez/Debucsser class Debucsser { constructor(props) { this.config = props || {}; this.color = this.config.color || 'palevioletred'; this.width = this.config.width || '3px'; this.style = this.config.style || 'solid'; this.customClass = this.config.customClass || null; this.grayscaleOnDebug = this.config.grayscaleOnDebug || false; this.grayscaleOnDebugAll = this.config.grayscaleOnDebugAll || false; this.string = `${this.width} ${this.style} ${this.color}`; this.mainKey = this.config.mainKey || 17; this.secondKey = this.config.secondKey || 16; this.init = this.init.bind(this); this.debug = this.debug.bind(this); this.debugAll = this.debugAll.bind(this); this.stop = this.stop.bind(this); this.addClass = this.addClass.bind(this); this.labels = this.labels.bind(this); this.createGlobalClass = this.createGlobalClass.bind(this); this.removeGlobalClass = this.removeGlobalClass.bind(this); } init() { // initialize invisible label element => we'll make it visible on selected keystroke this.label = document.createElement('div'); this.label.classList.add('debucsser-label'); this.label.style = 'display: none;'; document.body.appendChild(this.label); this.inject_label_style(); this.createDebugStyle(); this.debug(); this.globalStyle = this.createGlobalClass(); } debug() { console.log(this); document.addEventListener('keydown', (key) => { if (key.keyCode == this.mainKey) { document.addEventListener('mousemove', this.labels, true); document.addEventListener('mouseover', this.addClass, true); document.addEventListener('keydown', this.debugAll, true); } this.stop(); }); } stop() { document.addEventListener('keyup', (key) => { if (key.keyCode == this.mainKey) { document.removeEventListener('mouseover', this.addClass, true); document.removeEventListener('mousemove', this.labels, true); this.label.style = 'display: none;'; } }) } addClass(over) { over.target.classList.add(this.customClass ? this.customClass : 'debucsser'); document.addEventListener('mouseout', (out) => { out.target.classList.remove(this.customClass ? this.customClass : 'debucsser'); }, true); } debugAll(key) { if (key.keyCode == this.secondKey) { document.body.appendChild(this.globalStyle); document.addEventListener('keyup', this.removeGlobalClass, true) } } createDebugStyle() { const style = document.createElement('div'); style.innerHTML = ` <style> .debucsser { outline: ${this.string}; ${this.config.grayscaleOnDebug && 'filter: grayscale(100%);'} } </style>`; document.body.appendChild(style); } createGlobalClass() { const global = document.createElement('div'); console.log(this.config.grayscaleOnDebugAll) global.innerHTML = ` <style> * { outline: ${this.string}; ${this.config.grayscaleOnDebugAll && 'filter: grayscale(100%);'} } </style>`; return global; } removeGlobalClass(key) { if (key.keyCode == this.secondKey) { document.body.removeChild(this.globalStyle); } } labels(e) { if (e.target) { const classList = e.target.classList ? e.target.classList.value.replace('debucsser', '') : undefined; const id = e.target.id ? '#' + e.target.id : undefined; const dimensions = e.target.getBoundingClientRect(); this.label.innerHTML = ` <h2>class: <strong>${classList || `¯\\_(ツ)_/¯`}</strong></h2> <h2>id: <strong>${id || `¯\\_(ツ)_/¯`}</strong></h2> <h2><strong>${dimensions.width.toFixed(0)}px</strong> × <strong>${dimensions.height.toFixed(0)}px</strong></h2> `; this.label.style = `display: block; top:${e.clientY + 20}px; left:${e.clientX + 20}px;`; } else { this.label.style = 'display: none;'; } } inject_label_style() { const style = document.createElement('div'); style.innerHTML = ` <style> .debucsser-label { position: fixed; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; padding: 10px 20px; background: #333; border-radius: 3px; color: #f9f9f9; opacity: 0.9; z-index: 999; } .debucsser-label strong { color: palevioletred; } </style>`; document.body.appendChild(style); } } // init Debucsser // comment out config properties to customize how Debucsser behave const config = { // color: 'palevioletred', // width: '4px', // grayscaleOnDebugAll: true, // customClass: 'testShadow', } const debug = new Debucsser(config).init(); // demo initial explanation // const explain = document.querySelector('.explain'); // explain.querySelector('button').addEventListener('click', () => { // explain.style.transform = 'translateX(2000px)'; // document.querySelector('.wrapper').style.filter = 'none'; // }); </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » css辅助检查工具 喜欢 (0)or分享 (0)
