vue实现一个css filter过滤效果调节器生成filter css代码效果
代码语言:html
所属分类:布局界面
代码描述:vue实现一个css filter过滤效果调节器生成filter css代码效果
代码标签: css filter 过滤 效果 调节器 生成 filter css 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> * { box-sizing: border-box; } html { font-size: 62.5%; } body { font-size: 1.6rem; padding: 50px; } .wrapper { max-width: 700px; margin: 0 auto; } .wrapper--mini { max-width: 550px; margin: 0 auto; } h1 { margin-top: 0; } img { display: block; max-width: 100%; -webkit-filter: grayscale(var(--grayscale, 0%)) sepia(var(--sepia, 0%)) saturate(var(--saturate, 100%)) hue-rotate(var(--hue-rotate, 0deg)) invert(var(--invert, 0%)) opacity(var(--opacity, 100%)) brightness(var(--brightness, 100%)) contrast(var(--contrast, 100%)) blur(var(--blur, 0px)); filter: grayscale(var(--grayscale, 0%)) sepia(var(--sepia, 0%)) saturate(var(--saturate, 100%)) hue-rotate(var(--hue-rotate, 0deg)) invert(var(--invert, 0%)) opacity(var(--opacity, 100%)) brightness(var(--brightness, 100%)) contrast(var(--contrast, 100%)) blur(var(--blur, 0px)); } .reset { margin: 0; padding: 0; border-radius: 50%; width: 20px; height: 20px; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; border: 1px solid #eee; background: #fff; } .reset:hover, .reset:active, .reset:focus { box-shadow: 0 0 5px 5px rgba(0,0,0,0.05); cursor: pointer; } .resetAll { text-align: center; } .resetAll button { background: #fff; border-radius: 5px; border: 1px solid #ddd; padding: 8px 25px; line-height: 1; cursor: pointer; -webkit-transition: all 0.2s; transition: all 0.2s; font-size: 1.4rem; opacity: 0.5; } .resetAll button:hover, .resetAll button:active, .resetAll button:focus { box-shadow: 0 0 5px 5px rgba(0,0,0,0.05); opacity: 1; } .editor, pre { box-shadow: 0 0 20px 20px rgba(0,0,0,0.05); margin-top: 25px; margin-bottom: 25px; border-radius: 25px; padding: 20px; } fieldset { margin: 0; display: grid; grid-template-columns: 80px 1fr 60px 20px; grid-gap: 15px; border: none; -webkit-box-align: center; align-items: center; padding: 5px 10px; border-radius: 20px; margin-bottom: 5px; -webkit-transition: all 0.2s; transition: all 0.2s; } fieldset.active { box-shadow: 0 0 10px 10px rgba(0,0,0,0.05); } pre { background: #2D2D2D; color: #9FF8F1; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } </style> </head> <body> <div id="app"> <section class="preview wrapper" :style="filterStyles"> <h1>CSS Filter Effects</h1> <img src="//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90" alt=""> </section> <section class="editor wrapper--mini"> <form @submit.prevent> <fieldset v-for="filter in filters" :class="{active: filter.value != filter.defa.........完整代码请登录后点击上方下载按钮下载查看
网友评论0