【每日一练】105—CSS实现一款输入文本动画的效果

文 | 杨小爱

写在前面

关于这个CSS实现的文本动画效果，我们在前面也分享过很多，今天这个是一个输入文本框样式的动画效果，它的最终效果如下：

它的HTML代码很简单，主要是在CSS这块，具体的实现过程，大家可以看一下它的源码实现过程，具体源码如下：

HTML代码：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>【每日一练】105—CSS实现一款输入文本动画的效果</title><!--CSS文件--><link rel="stylesheet" href="style.css">
</head>
<body><div class="container"><div class="inputBox"><input type="text" required="required"><span>你的昵称</span><i></i></div></div>
</body>
</html>

CSS代码：

*
{margin: 0;padding: 0;box-sizing: border-box;font-family: 'Poppins', sans-serif;
}
body
{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: linear-gradient(45deg,#8E2DE2,#4A00E0);
}
.container
{position: relative;padding: 50px;background: #fff;display: flex;justify-content: center;align-items: center;border-radius: 8px;box-shadow:  0 15px 35px rgba(0,0,0,0.25);
}
.container .inputBox
{position: relative;width: 350px;
}
.container .inputBox input
{position: relative;padding: 8px 10px;width: 100%;border: none;outline: none;background: transparent;color: #fff;font-size: 1.25em;letter-spacing: 0.05em;z-index: 2;
}
.container .inputBox span
{position: absolute;left: 0;padding: 10px 0;pointer-events: none;font-size: 1em;transition: 0.5s;color: #333;letter-spacing: 0.05em;
}
.container .inputBox input:valid ~ span,
.container .inputBox input:focus ~ span
{font-size: 0.85em;transform: translateY(-32px);
}
.container .inputBox i
{position: absolute;bottom: 0;left: 0;width: 100%;height: 3px;background: linear-gradient(45deg,#8E2DE2,#4A00E0);transition: 0.5s;z-index: 1;border-radius: 4px;pointer-events: none;
}
.container .inputBox input:valid ~ i,
.container .inputBox input:focus ~ i
{height: 100%;box-shadow:  inset 0 0 10px rgba(0,0,0,0.25);
}

写在最后

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

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

推荐阅读

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

学习更多技能

请点击下方公众号

【每日一练】105—CSS实现一款输入文本动画的效果相关推荐

【每日一练】48—围绕地球旋转的文本动画效果
写在前面今天我们练习的这个案例是一个文本旋转的效果,这个效果,在浏览器里预览还是非常流畅的,因为我这边用GIF录屏软件直接录制的效果,不是很好. 文本旋转的不流畅,后来录制了一个,但是文件太大了,超 ...
Java语言每日一练—第9天：根据输入的数据判断是星期几
css实现闪烁的灯,纯CSS实现的闪烁霓虹灯文本动画特效
CSS 语言: CSSSCSS 确定 .text-effect { overflow: hidden; position: relative; -webkit-filter: contrast(110 ...
【每日一练】100—一个渐变色计数器列表的实现
文 | 杨小爱写在前面今天我们迎来了[每日一练]栏目的第100个练习,在这几个月的持续练习中,我不知道,你学到了什么?是持续学习的习惯,还是前端基础知识? 但是,不管怎么样,只要持续的去做去学习自 ...
CSS 3.0实现加载动画
给大家分享一个用CSS 3.0实现加载动画,效果如下: 以下是代码实现,欢迎大家复制.粘贴和收藏. <!DOCTYPE html> <html lang="en" ...
【每日一练】56—CSS实现一款实用的响应式卡片悬停效果
写在前面今天这个练习,是目前很多网站上非常常见的一个效果,主要是这个效果干净简洁,它没有任何多余的内容,看起来也很舒服. 具体效果,请看下面的gif动画: 因为是GIF录屏,背景的渐变色有点色块,衔 ...
【每日一练】103—纯CSS实现的一款炫酷卡片效果
作者 | 杨小爱写在前面我们经常会在各大平台看到很多产品的卡片效果,以及一些个人单页网站上的个人资料介绍时,也会用到各种卡片效果来展示信息,这种卡片式的设计,可以帮助我们分门别类的归类各种信息,让 ...
【每日一练】36—CSS实现一款炫酷的3D 文本旋转效果
写在前面关于CSS 3D的效果,我之前也分享过一些,在视频号上也有,当然,视频号上没有源码,有兴趣的小伙伴,可以跟着视频自己敲代码,当然,这些代码,我后面也会分享到我们的网站上,大家可以直接到网站上 ...
【每日一练】109—一款炫酷按钮的鼠标悬停效果
文 | 杨小爱写在前面按钮,几乎是任何一个项目都会用到的一个组件,因此,今天,我们来练习一个好玩的鼠标效果,具体效果,请看下面的GIF截图: 我们看完了最终效果,现在,我们一起来看一下它的源码. ...

【每日一练】105—CSS实现一款输入文本动画的效果

【每日一练】105—CSS实现一款输入文本动画的效果相关推荐

最新文章

热门文章