web前端之小功能聚集、简单交互效果

纯CSS实现可编辑文字霓虹灯闪烁效果

效果图

html

<h1 contenteditable="true">Hello World</h1>

style

* {margin: 0;padding: 0;box-sizing: border-box;font-family: arial;
}body {display: flex;align-items: center;justify-content: center;min-height: 100vh;background-color: #07252d;
}h1 {position: relative;letter-spacing: 15px;text-transform: uppercase;text-align: center;color: #0e3742;line-height: 0.7;outline: none;-webkit-box-reflect: below 1px linear-gradient(transparent, #0008);animation: animate 5s linear infinite;
}@keyframes animate {0%,20%,30%,50%,60%,80%,90%,100% {color: #0e3742;}20%,30%,50%,60%,80%,90%,100% {color: #ffffff;text-shadow: 0 0 10px #03bcf4, 0 0 20px #03bcf4, 0 0 40px #03bcf4, 0 0 80px #03bcf4;}
}

css之实现流水文字、闪烁、荧光、炫酷

效果图

html

<div class="twinkle_text"><p>web前端开发工程师</p>
</div>

style

body {background-color: #333;
}.twinkle_text {background-image: -webkit-linear-gradient(left, #ff0000, #66ffff 10%, #cc00ff 20%, #CC00CC 30%, #CCCCFF 40%, #00FFFF 50%, #CCCCFF 60%, #CC00CC 70%, #CC00FF 80%, #66FFFF 90%, #ffff00 100%);-webkit-text-fill-color: transparent;/* 将字体设置成透明色 */-webkit-background-clip: text;/* 裁剪背景图，使文字作为裁剪区域向外裁剪 */-webkit-background-size: 200% 100%;-webkit-animation: masked-animation 4s linear infinite;font-size: 37px;
}@keyframes masked-animation {0% {background-position: 0 0;}100% {background-position: -100% 0;}
}

web前端之文本擦除效果与下划线结合

效果图

html

<p class="box"><span>突来的消息 那个人是你 这么多年 你杳无音讯 没钱难买通天路 你往前走不要回头 我的春风何时来 带我走向大海 能够握紧的就别放了 能够拥抱的就别拉扯 我知道 吹过的牛逼 也会随青春一笑了之 就老去吧 孤独别醒来你渴望的离开 只是无处停摆 多想一觉醒来 有件开心的事发生 清醒的人最荒唐 你纵身跃入酒杯 梦从此溺亡 功名利禄忽下忽上 虚无的像云在飘荡</span>
</p>

JavaScript

function init() {let textEl = document.querySelector(".box span"),str = textEl.textContent,i = 0;textEl.textContent = '';function initRAF() {if (i >= str.length) return false;textEl.textContent += str[i];requestAnimationFrame(initRAF);i++;}initRAF();
}init();

style

.box {color: #333333;line-height: 2;
}.box span {background: linear-gradient(to right, #333333, #800000) no-repeat right bottom;background-size: 0 2px;transition: background-size 1s;cursor: pointer;
}.box span:hover {background-position: left bottom;background-size: 100% 2px;
}

css之下划线动画

html

<p class="box"><span>上班很累 总不能不上吧 挣钱很苦 总不能不赚吧 年纪大了 少一点任性 你可以不做你不喜欢的事 但你要做应该做的事 巷子里的猫很自由 但却没有归宿 围墙里的狗有归宿 却终身都得低头 人生这道选择题 怎么选都会有遗憾人间非净土各有各的苦 每个人都不容易 无论你当下正在经历什么 都要调整心态 继续前行 记住你的心态是最好的风水</span>
</p>

style

.box {color: #333333;line-height: 2;
}.box span {background: linear-gradient(to right, #333333, #800000) no-repeat right bottom;background-size: 0 2px;transition: background-size 1s;cursor: pointer;
}.box span:hover {background-position: left bottom;background-size: 100% 2px;
}