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

最新推荐文章于 2024-08-31 21:18:22 发布

web前端开发V

最新推荐文章于 2024-08-31 21:18:22 发布

阅读量271

点赞数

文章标签： css 前端 html javascript css3

原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649134148&idx=3&sn=50d8860692a026058f377b4a23fa2c36&chksm=be58b3e9892f3aff4645f707c357e284fb153e736d3e38d9b4a959f875cece4510e52cfcfa14&scene=126&&sessionid=0

版权

文 | 杨小爱

写在前面

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

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

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

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

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

初始状态效果

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

输入密码后的效果

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

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

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

gif动图看过程效果

以下是今天这个练习效果的源码实现过程。

HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- 引入 CDN tailwind CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.11/tailwind.min.css" crossorigin="anonymous"/>
        <!-- 手写 CSS 文件 link-->
    <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>
      <!-- JS link -->
    <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)`
})

另外，关于练习中的图片，我是从网络中下载的，这里就不提供图片素材了，练习时，大家到网上下载一张自己喜欢的图片即可。

当然，你也可以使用自己的照片来进行练习，这个也没有关系。

写在最后

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

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

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

推荐阅读

【每日一练】01~100练大合集汇总

学习更多技能

请点击下方公众号