【每日一练】104—Tailwind CSS实现一款修改密码强度即可查看图片清晰度的效果

每日一练2年前 (2023)发布 admin
2,346 0

写在前面

今天这个练习是通过目前比较流行的一个CSS框架Tailwind CSS来实现的,如果你之前有使用其他CSS框架经验的话,比如,有使用过Bootstrap,那今天你来使用这个Tailwind CSS也不什么难事。

如果你是初学者,还没有接触到一些CSS框架的学习,也没有关系,慢慢来,因为我之前也没有使用Tailwind CSS,也是从头开始学习Tailwind CSS的使用。

关于什么是Tailwind CSS,这个网络上有很多它的介绍,这里我就不赘述了,它目前在国外还是比较热门的一个CSS框架,也有很多用Tailwind CSS写的网站模板。

因此,我们今天通过一个练习来学习了解一下它。

现在,我们先来看一下今天的练习效果:

初始状态下,图片是模糊不清的。

【每日一练】104—Tailwind CSS实现一款修改密码强度即可查看图片清晰度的效果

当我们在密码框中输入密码后,密码长度越长,图片也就越清晰,当达到一定值后,图片就完全清晰可见了。

当然,我也做了一个gif的动图效果,这个色彩不是很好,大家就看一下过程变化就好了。

如果想要自行尝试一下的话,请自行把文章中的源码在本地试一遍。

【每日一练】104—Tailwind CSS实现一款修改密码强度即可查看图片清晰度的效果

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=”UTF-8″ />
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
        <!– 引入 tailwind CSS –>
    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.11/tailwind.min.css” crossorigin=”anonymous”/>
    <link rel=”stylesheet” href=”style.css” />
    <title>【每日一练】104—Tailwind CSS实现一款修改密码强度即可查看图片清晰度的效果</title>
  </head>
  <body>
    <div class=”background” id=”background”></div>
    <div class=”bg-white rounded p-10 text-center shadow-md”>
      <h1 class=”text-3xl”>密码强度看图片清晰度</h1>
      <p class=”text-sm text-gray-700″>密码强度越强,图片越清晰,不信,你改一下试试</p>
      <div class=”my-4 text-left”>
        <label for=”email” class=”text-gray-900″>邮箱:</label>
        <input  type=”text”  class=”border block w-full p-2 mt-2 rounded”  id=”email”  placeholder=”你的邮箱” />
      </div>
      <div class=”my-4 text-left”>
        <label for=”email” class=”text-gray-900″>密码:</label>
        <input   type=”password”  class=”border block w-full p-2 mt-2 rounded”  id=”password”  placeholder=”输入你的密码” />
      </div>
      <button class=”bg-black text-white py-2 mt-4 inline-block w-full rounded” type=”submit” >
        提交
      </button>
    </div>
    <script src=”script.js”></script>
  </body>
</html>
CSS:
* {
  box-sizing: border-box;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}
.background {
  background: url(’01.jpg’)
    no-repeat center center/cover;
  position: absolute;
  top: -20px;
  bottom: -20px;
  left: -20px;
  right: -20px;
  z-index: -1;
  filter: blur(20px);
}
JS:
const password = document.getElementById(‘password’)
const background = document.getElementById(‘background’)
password.addEventListener(‘input’, (e) => {
  const input = e.target.value
  const length = input.length
  const blurValue = 20 – length * 2
  background.style.filter = `blur(${blurValue}px)`
})
另外,关于练习中的图片,我是从网络中下载的,这里就不提供图片素材了,练习时,大家到网上下载一张自己喜欢的图片即可。
当然,你也可以使用自己的照片来进行练习,这个也没有关系。

写在最后

今天的【每日一练】就到这里了,后面,我会跟大家分享关于单页网站的练习,请大家继续关注【每日一练】的更新内容。

最后,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。

我是杨小爱,我们明天见。

© 版权声明

相关文章

暂无评论

暂无评论...