很棒的 CSS 输入和文本区域输入效果

2025-06-07

很棒的 CSS 输入和文本区域输入效果

你也Visual Studio Code和我一样喜欢吗？它真的很棒。

替代文本

有一天，我的一个好朋友推荐了我一个叫 的 Visual Studio Code 插件Power Mode。一开始我没在意，后来无意中装了它。哦，它的效果大概是这样的。

图片

看到它，突然觉得真有意思。我心想这肯定是哪个无聊的天才做的。于是想着能不能用CSS模拟一下这个效果。

因此 PowerModeInput 诞生了。

电源模式输入

https://github.com/lindelof/power-mode-input

PowerModeInput 可以使您的文本输入框更具吸引力

在线演示

用途

安装

npm install --save power-mode-input
Enter fullscreen mode Exit fullscreen mode

用法

import PowerModeInput from "power-mode-input";

const input = document.getElementById("obinput");
PowerModeInput.make(input);

// close PowerModeInput
PowerModeInput.close(input);

// destroy PowerModeInput
PowerModeInput.destroy();

// another usage
PowerModeInput.make(".phone", {
  height: 5,
  tha: [0, 360],
  g: 0.5,
  num: 5,
  radius: 6,
  circle: true,
  alpha: [0.75, 0.1],
  color: "random"
});
Enter fullscreen mode Exit fullscreen mode

如果你在react，你可以像这样使用它

componentDidMount(){
  PowerModeInput.make(this.inputRef.current);
}
Enter fullscreen mode Exit fullscreen mode

你可以像这样使用它vue.js

mounted() {
  PowerModeInput.make(this.$refs.inputRef);
}
Enter fullscreen mode Exit fullscreen mode

当然，这可以在angular

const inputElement = this.elementRef.nativeElement.querySelector('input');
PowerModeInput.make(inputElement);
Enter fullscreen mode Exit fullscreen mode

参数说明

PowerModeInput.make(input, {
  height: 5,
  tha: [0, 360],
  g: 0.5,
  num: 5,
  ... // Parameter
});
Enter fullscreen mode Exit fullscreen mode
钥匙 描述 类型 例子
g 是否添加重力 数字 1
num 每次发射的粒子数 数字 3
radius 每个粒子的半径 数字 10
alpha 每个粒子的 alpha 数字 .1
tha 粒子发射器角度 大批 [0, 360]
v 粒子发射器粒子速度 数字 0.5
life 每个粒子的生命 数字 1.2
color 粒子颜色 数组或字符串 #ffcccc
random 随机力 数字 1.2
y 粒子发射器高度 数字 2
height 粒子发射器高度同上 数字 2

开发流程

当然，开发过程并不轻松。一开始我以为获取输入框光标很容易。好吧，我发现我错了。我查阅了很多文章才找到一个好方法。最终，我费了好大劲才把它搞定。

如果你不嫌弃的话，我还想推荐另一个不错的库。https ://github.com/lindelof/react-mouse-particles。因为 power-mode-input 的大部分代码都出自这个。

我敢打赌任何人都能用，因为它非常简单。如果你喜欢这个项目，欢迎点赞。

文章来源：https://dev.to/lindelof/a-great-css-input-and-textarea-input-effect-2bln
Devto 翻译
PREV
超棒的网络效果
NEXT
5 个令人印象深刻的 React 组件