css实现发光的input输入框

果图截图：

案例代码示下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>发光输入框</title>
 <style type="text/css">
 input{width: 280px;height: 30px;}
 textarea{width: 280px;height: 80px;}
 input,textarea{
 -webkit-transition: all 0.30s ease-in-out;
 -moz-transition: all 0.30s ease-in-out;
 -ms-transition: all 0.30s ease-in-out;
 -o-transition: all 0.30s ease-in-out;
 outline: none;
 padding: 3px 0 3px 3px;
 margin: 5px 1px 3px 0;
 border: #ddd 1px solid;
 }
 input:focus,textarea:focus{
 box-shadow: 0 0 5px rgba(216,76,41,1);
 padding: 3px 0 3px 3px;
 margin: 5px 1px 3px 0;
 border: rgba(216,76,41,1) 1px solid;
 }
 </style>
 </head>
 <body>
 <input type="text" name="" id="" value="" />
 <textarea></textarea>
 </body>
</html>

注意：

这里使用了css的 transition 动画属性。
transition的浏览器兼容性，添加浏览器厂商前缀。

以上就是关于 “ css实现发光的input输入框 ” 的全部内容。

天我学到一款非常炫酷的HTML5/CSS3阴影文字特效，一共有9组不同的样式，这9组文字中，除了有不同的字体外，每一组的文字阴影和文字放光颜色都不同，看起来都十分漂亮，遗憾的是，中文并没有那么漂亮的字体了。在页面的字体设计中，可以拿出来玩玩，绝对很炫的。

效果图，有点偏差

CSS样式：

大家可以在下面分享自己学习的经验，谢谢！！！

趣的动画效果

前几天在网上看到了一个很有趣的动画效果，如下，光会跟随鼠标在卡片上进行移动，并且卡片会有视差的效果

那么在 Vue3 中应该如何去实现这个效果呢？

基本实现思路

其实实现思路很简单，无非就是分几步：

首先，卡片是相对定位，光是绝对定位
监听卡片的鼠标移入事件mouseenter，当鼠标进入时显示光
监听卡片的鼠标移动事件mouseover，鼠标移动时修改光的left、top，让光跟随鼠标移动
监听卡片的鼠标移出事件mouseleave，鼠标移出时，隐藏光

我们先在 Index.vue 中准备一个卡片页面，光的CSS效果可以使用filter: blur() 来实现

可以看到现在的效果是这样

实现光源跟随鼠标

在实现之前我们需要注意几点：

1、鼠标移入时需要设置卡片 overflow: hidden，否则光会溢出，而鼠标移出时记得还原
2、获取鼠标坐标时需要用clientX/Y而不是pageX/Y，因为前者会把页面滚动距离也算进去，比较严谨

刚刚说到实现思路时我们说到了mouseenter、mousemove、mouseleave，其实mouseenter、mouseleave 这二者的逻辑比较简单，重点是 mouseover 这个监听函数

而在 mouseover 这个函数中，最重要的逻辑就是：光怎么跟随鼠标移动呢？

或者也可以这么说：怎么计算光相对于卡片盒子的 left 和 top

对此我专门画了一张图，相信大家一看就懂怎么算了

left=clientX - x - width/2
height=clientY - y - height/2

知道了怎么计算，那么逻辑的实现也很明了了~封装一个use-light-card.ts

接着在页面中去使用

这样就能实现基本的效果啦~

卡片视差效果

卡片的视差效果需要用到样式中 transform 样式，主要是配置四个东西：

perspective：定义元素在 3D 变换时的透视效果
rotateX：X 轴旋转角度
rotateY：Y 轴旋转角度
scale3d：X/Y/Z 轴上的缩放比例

现在就有了卡片视差的效果啦~

给所有卡片添加光源

上面只是给一个卡片增加光源，接下来可以给每一个卡片都增加光源啦！！！

让光源变成可配置

上面的代码，总感觉这个 hooks 耦合度太高不太通用，所以我们可以让光源变成可配置化，这样每个卡片就可以展示不同大小、颜色的光源了~像下面一样

既然是配置化，那我们希望是这么去使用 hooks 的，我们并不需要自己在页面中去写光源的dom节点，也不需要自己去写光源的样式，而是通过配置传入 hooks 中

所以 hooks 内部要自己通过操作 DOM 的方式，去添加、删除光源，可以使用createElement、appendChild、removeChild 去做这些事~

完整源码

在线咨询

上一篇：HTML5与手机游戏的未来
下一篇：用于执行DDoS攻击的超链路审计Ping

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商