HTML跳动爱心代码|最近很火的爱心代码你还没收到吗
最近很火的跳动爱心代码HTML实现可DIY
看效果
点个赞吧,养成好习惯不想动手的小伙伴可以直接👇👇阿里云盘直接提取阿里云盘 DIY版----提取码: f30q
使用说明
主体代码来源于网络,让我们为原作者点赞👍我用css3的animate和@keyframes帧动画加了一个
跳动效果.heart{animation:heart1sinfinite ease-in-out;}@keyframesheart{0%,100%{transform:rotate(-2deg)scale(1);}50%{transform:rotate(2deg)scale(1.12);}}可自行修改爱心颜色context.fillStyle="#dc4b61";//自定义爱心颜色修改基础参数varsettings={particles:{length:520,// 爱心数量duration:5,// 数值变大向内收缩velocity:100,// 移动速度effect:0.75,//正值外发散size:60,// 大小}}DIY输入自定义文字实现我用了一个简单的输入框和按钮实现
input {font-size: 1.375rem;color: #ff437b; /*这里修改文字颜色*/text-align: center;background: none;}<divclass="text_box"><inputtype="text"id="text"placeholder="送给你的那个[Ta]️"><buttonid="btn"onclick="fn()">❤️
