如何利用css和简单JavaScript实现文字渐隐动态效果
fox/
如何利用css和简单JavaScript实现下图示例的文字渐隐动态效果呢?
这里我们主要是应用css的以下动画属性
animation: blur 1.5s alternate infinite;
以及简单js控制字符逐一循环动画
具体代码如下:
HTML部分
<div class="loading">Loading</div>
CSS部分
@import url(https://fonts.googleapis.com/css?family=Lato);
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: black;
}
.loading {
color: white;
letter-spacing: 1rem;
font-size: 1.5rem;
font-family: Lato, sans-serif;
text-transform: uppercase;
span {
animation: blur 1.5s alternate infinite;
}
}
@keyframes blur {
to {
filter: blur(5px);
}
}
JavaScript部分
let loading = document.querySelector(".loading");
let letters = loading.textContent.split("");
loading.textContent = "";
letters.forEach((letter, i) => {
let span = document.createElement("span");
span.textContent = letter;
span.style.animationDelay = `${i / 5}s`;
loading.append(span);
});
-
两行css代码快速实现文字描边效果在网站中,我们可以通过css实现文字描边,模拟霓虹灯的效果
-
如何用css快速实现三角形通过css和伪类也可以实现各种三角形。
-
css实现手机充电动画效果通过css,我们可以实现很多动画效果,例如,我们通过animation,transform,filter,这些动画相关的css属性,就可以模拟手机充电的动画效果:
-
如何用css实现倒影效果在电商和产品广告中,我们经常看到水中倒影的效果,其实这种效果我们也可以通过css来实现。并且这种效果也是通过css的几种属性来实现。
-
利用css的延迟操作为页面的交互和动画带来更好的效果css延迟操作是一种常见的css技术,可以用来延迟元素的显示时间。通过在css中设置元素的延迟时间,可以让元素在页面加载完成后才显示,从而为页面的交互和动画效果带来更好的体验。
-
如何利用css的延迟属性结合简单js实现渐变动效通过简单的Scss+TypeScript。我们可以实现视频中常见的渐变动效,这里是通过原生css+JS来实现的
暂无评论,抢个沙发...