写在前面
今天这个练习是通过目前比较流行的一个CSS框架Tailwind CSS来实现的,如果你之前有使用其他CSS框架经验的话,比如,有使用过Bootstrap,那今天你来使用这个Tailwind CSS也不什么难事。
如果你是初学者,还没有接触到一些CSS框架的学习,也没有关系,慢慢来,因为我之前也没有使用Tailwind CSS,也是从头开始学习Tailwind CSS的使用。
关于什么是Tailwind CSS,这个网络上有很多它的介绍,这里我就不赘述了,它目前在国外还是比较热门的一个CSS框架,也有很多用Tailwind CSS写的网站模板。
因此,我们今天通过一个练习来学习了解一下它。
现在,我们先来看一下今天的练习效果:
初始状态下,图片是模糊不清的。
当我们在密码框中输入密码后,密码长度越长,图片也就越清晰,当达到一定值后,图片就完全清晰可见了。
当然,我也做了一个gif的动图效果,这个色彩不是很好,大家就看一下过程变化就好了。
如果想要自行尝试一下的话,请自行把文章中的源码在本地试一遍。
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.valueconst length = input.lengthconst blurValue = 20 – length * 2background.style.filter = `blur(${blurValue}px)`})
写在最后
今天的【每日一练】就到这里了,后面,我会跟大家分享关于单页网站的练习,请大家继续关注【每日一练】的更新内容。
最后,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。
我是杨小爱,我们明天见。
© 版权声明
文章版权归作者所有,未经允许请勿转载。
相关文章
暂无评论...