查看: 169|回复: 0

[表单] 【前端艺术】带视觉特效的js密码强度检测开源库

[复制链接]
发表于 2017-12-10 22:14:00 | 显示全部楼层 |阅读模式
代码介绍

这是一款带视觉特效的js密码强度检测特效。该特效在用户输入密码的时候,随着密码强度的增强,旁边的图像会越来越清晰或越来越模糊,通过图像的变化来提示用户密码的强度。

由于该js密码强度检测特效的编写使用了CSS变量,所以不是所以浏览器都支持该特效,请使用支持CSS变量的浏览器来查看演示效果。

下面是该js密码强度检测特效的gif动态效果图。

【前端艺术】带视觉特效的js密码强度检测开源库

【前端艺术】带视觉特效的js密码强度检测开源库


代码解释

css代码:
  1. article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
  2. *,
  3. *::after,
  4. *::before {
  5.         box-sizing: border-box;
  6. }

  7. body {
  8.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  9.         min-height: 100vh;
  10.         color: #57585c;
  11.         color: var(--color-text);
  12.         background-color: #fff;
  13.         background-color: var(--color-bg);
  14.         height: 100vh;
  15.         overflow: hidden;
  16.         -webkit-font-smoothing: antialiased;
  17.         -moz-osx-font-smoothing: grayscale;
  18. }

  19. .demo-1 {
  20.         --color-text: #000;
  21.         --color-bg: #fff;
  22.         --color-content-bg: #fff;
  23.         --color-link: #000;
  24.         --color-link-hover: #4bb3e7;
  25.         --color-info: #000;
  26.         --color-form-alt: #909090;
  27.         --color-form-button-bg: #000;
  28.         --color-form-button: #fff;
  29.         --color-demo: #fff;
  30.         --color-demo-hover: #fff;
  31.         --color-github: #fff;
  32.         --color-github-hover: #fff;
  33. }

  34. .demo-2 {
  35.         --color-text: #585858;
  36.     --color-bg: #000;
  37.     --color-content-bg: #1a1b21;
  38.     --color-link: #f0f0f0;
  39.     --color-link-hover: #4bb3e7;
  40.     --color-info: #585858;
  41.     --color-form-alt: #909090;
  42.     --color-form-button-bg: #000000;
  43.     --color-form-button: #ffffff;
  44.     --color-demo: #fff;
  45.     --color-demo-hover: #fff;
  46.     --color-github: #fff;
  47.     --color-github-hover: #fff;
  48. }

  49. .js body.render {
  50.         opacity: 1;
  51. }

  52. /* Page Loader */
  53. .js .loading::before {
  54.         content: '';
  55.         position: fixed;
  56.         z-index: 100000;
  57.         top: 0;
  58.         left: 0;
  59.         width: 100%;
  60.         height: 100%;
  61.         background: var(--color-bg);
  62. }

  63. .js .loading::after {
  64.         content: '';
  65.         position: fixed;
  66.         z-index: 100000;
  67.         top: 50%;
  68.         left: 50%;
  69.         width: 60px;
  70.         height: 60px;
  71.         margin: -30px 0 0 -30px;
  72.         pointer-events: none;
  73.         border-radius: 50%;
  74.         opacity: 0.4;
  75.         background: var(--color-link);
  76.         animation: loaderAnim 0.7s linear infinite alternate forwards;
  77. }

  78. @keyframes loaderAnim {
  79.         to {
  80.                 opacity: 1;
  81.                 transform: scale3d(0.5,0.5,1);
  82.         }
  83. }

  84. a {
  85.         text-decoration: underline;
  86.         color: var(--color-link);
  87.         outline: none;
  88. }

  89. a:hover,
  90. a:focus {
  91.         color: var(--color-link-hover);
  92.         outline: none;
  93.         text-decoration: none;
  94. }

  95. .hidden {
  96.         position: absolute;
  97.         overflow: hidden;
  98.         width: 0;
  99.         height: 0;
  100.         pointer-events: none;
  101. }

  102. /* Icons */
  103. .icon {
  104.         display: block;
  105.         width: 1.5em;
  106.         height: 1.5em;
  107.         margin: 0 auto;
  108.         fill: currentColor;
  109. }

  110. main {
  111.         position: relative;
  112.         width: 100%;
  113.         display: flex;
  114.         flex-wrap: wrap;
  115. }

  116. .content {
  117.         position: relative;
  118.         min-height: 100vh;
  119. }

  120. .content--main {
  121.         grid-template-columns: 50% 50%;
  122. }

  123. .content--full {
  124.         width: 100vw;
  125. }

  126. .content--side {
  127.         background: var(--color-content-bg);
  128.         width: 550px;
  129.         margin: 0;
  130.         padding: 5vmin;
  131.         display: flex;
  132.         flex-direction: column;
  133.         overflow: hidden;
  134. }

  135. .content--side + .content--side {
  136.         justify-content: space-between;
  137.         width: calc(100vw - 550px);
  138. }

  139. .poster {
  140.         position: absolute;
  141.         top: 0;
  142.         left: 0;
  143.         width: 100%;
  144.         height: 100%;
  145.         background-size: cover;
  146.         background-position: 50% 50%;
  147. }

  148. /* Header */
  149. .codrops-header {
  150.         position: relative;
  151.         z-index: 100;
  152.         display: flex;
  153.         flex-wrap: wrap;
  154.         flex-direction: row;
  155.         align-items: flex-start;
  156.         align-items: center;
  157.         align-self: start;
  158.         grid-area: header;
  159.         justify-self: start;
  160.         margin: 0 0 1rem 0;
  161. }

  162. .codrops-header__title {
  163.         font-size: 1.5em;
  164.         font-weight: bold;
  165.         margin: 0;
  166.         padding: 0;
  167. }

  168. .info {
  169.         flex: none;
  170.         width: 100%;
  171.         margin: 1rem 0;
  172.         color: var(--color-info);
  173. }

  174. .github {
  175.         display: block;
  176.         position: relative;
  177.         color: var(--color-github);
  178.         margin: 0 0 0 auto;
  179. }

  180. .github:hover,
  181. .github:focus {
  182.         color: var(--color-github-hover);
  183. }

  184. .demos {
  185.         position: relative;
  186.         display: block;
  187.         text-align: right;
  188.         margin: 0 0 0 auto;
  189. }

  190. .demo {
  191.         font-weight: bold;
  192.         color: var(--color-demo);
  193. }

  194. .demo:not(:last-child) {
  195.         margin-right: 1.5rem;
  196. }

  197. .demo:hover,
  198. .demo:focus {
  199.         color: var(--color-demo-hover);
  200. }

  201. .demo span {
  202.         white-space: nowrap;
  203.         text-transform: lowercase;
  204.         pointer-events: none;
  205. }

  206. a.demo--current {
  207.         pointer-events: none;
  208.         text-decoration: none;
  209. }

  210. /* Top Navigation Style */
  211. .codrops-links {
  212.         position: relative;
  213.         display: flex;
  214.         justify-content: center;
  215.         margin: 0 1em 0 0;
  216.         text-align: center;
  217.         white-space: nowrap;
  218. }

  219. .codrops-icon {
  220.         display: inline-block;
  221. }

  222. .codrops-icon:first-child {
  223.         margin-right: 0.5rem;
  224. }

  225. .canvas-wrap {
  226.         width: 100%;
  227.         height: 100%;
  228.         position: absolute;
  229.         top: 0;
  230.         left: 0;
  231. }

  232. canvas {
  233.         image-rendering: optimizeSpeed;
  234.         image-rendering: -moz-crisp-edges;
  235.         image-rendering: -webkit-optimize-contrast;
  236.         image-rendering: -o-crisp-edges;
  237.         image-rendering: crisp-edges;
  238.         -ms-interpolation-mode: nearest-neighbor;
  239.         width: 100%;
  240.         height: 100%;
  241. }

  242. .form {
  243.         margin: auto 0 0 0;
  244.         position: relative;
  245. }

  246. .form__title {
  247.         font-size: 1.5rem;
  248.         margin: 0 0 3rem;
  249. }

  250. .form__item {
  251.         display: grid;
  252.         grid-template-columns: 1fr 2fr;
  253.         align-items: center;
  254. }

  255. .form__item:not(:last-child) {
  256.         margin: 0 0 1.5rem;
  257. }

  258. .form__item--actions {
  259.         color: var(--color-form-alt);
  260.         margin-top: 3rem;
  261.         font-size: 0.8rem;
  262.         grid-template-columns: 3fr 1fr;
  263. }

  264. .form__label {
  265.         font-weight: bold;
  266. }

  267. .form__input {
  268.         padding: 1rem;
  269.         width: 100%;
  270.         border: 1px solid #ddd;
  271.         font-weight: bold;
  272. }

  273. .form__input-wrap {
  274.         position: relative;
  275. }

  276. .form__input:focus {
  277.         border-color: #000;
  278.         outline: none;
  279. }

  280. .form__password-strength {
  281.         position: absolute;
  282.         font-size: 0.75rem;
  283. }

  284. .form__link {
  285.         font-weight: bold;
  286.         white-space: nowrap;
  287. }

  288. .form__button {
  289.         padding: 1rem;
  290.         font-weight: bold;
  291.         font-size: 1rem;
  292.         border: 0;
  293.         background: var(--color-form-button-bg);
  294.         color: var(--color-form-button);
  295. }

  296. .form__button:focus {
  297.         outline: none;
  298. }

  299. .demo-2 main {
  300.         flex-direction: row-reverse;
  301. }

  302. .demo-2 .github,
  303. .demo-2 .demos {
  304.         margin: 0 auto 0 0;
  305. }

  306. @media screen and (max-width: 45em) {
  307.         body {
  308.                 overflow: auto;
  309.         }
  310.         .content {
  311.                 height: auto;
  312.                 min-height: 0;
  313.         }
  314.         .content--side {
  315.                 width: 100vw;
  316.         }
  317.         .content--fixed {
  318.                 position: relative;
  319.                 z-index: 1000;
  320.                 display: block;
  321.                 padding: 0.85em;
  322.         }
  323.         .content--side + .content--side {
  324.                 width: 100vw;
  325.                 height: 100vw;
  326.         }
  327. }
复制代码

html代码
  1. <div class="form__item">
  2. <label class="form__label" for="name">Full Name</label>
  3. <input class="form__input" type="text" name="name" id="name">
  4. </div>
  5. <div class="form__item">
  6. <label class="form__label" for="email">Email Address</label>
  7. <input class="form__input" type="email" name="email" id="email">
  8. </div>
  9. <div class="form__item">
  10. <label class="form__label" for="password">Password</label>
  11. <div class="form__input-wrap">
  12. <input class="form__input" type="password" name="password" id="password">
  13. <p class="form__password-strength" id="strength-output"></p>
  14. </div>
  15. </div>
  16. <div class="form__item form__item--actions">
  17. <span>Already have an account? <a class="form__link" href="#">Login here</a></span>
  18. <input class="form__button" type="button" name="signup" value="Signup">
  19. </div>
  20. </form>
  21. </div>
  22. <div class="content content--side">
  23. <div class="poster" style="background-image:url(img/1.jpg)"></div>
  24. <div class="canvas-wrap">
  25. <canvas></canvas>
  26. </div>
  27. <nav class="demos">
  28. <a class="demo demo--current" href="index.html"><span>Demo 1</span></a>
  29. <a class="demo" href="index2.html"><span>Demo 2 (reverse)</span></a>
  30. </nav>
  31. <svg class="icon icon--github"><use xlink:href="#icon-github"></use></svg></a>
  32. </div>
  33. </main>
复制代码

引入JS

  1. <script src="js/imagesloaded.pkgd.min.js"></script>
  2. <script src="js/zxcvbn.js"></script>
  3. <script src="js/demo1.js"></script>
复制代码

代码下载


游客,如果您要下载源码或者查看隐藏内容请回复

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表