通过简单的SCSS+TypeScript。我们可以实现视频中常见的渐变动效,这里是通过原生CSS+JS来实现的,下图为动效中效果截图:

html部分,用来定义文字基本结构
<div class="reveal">WWW.ZHUIGE.COM</div>
CSS部分,主要通过伪类和关键帧动画来控制控制字符的透明度,位移,缩放来实现动画
@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
text-align: center;
background: #f0f1f0;
}
.reveal {
position: relative;
display: flex;
color: #1173EB;
font-size: 2em;
font-family: Raleway, sans-serif;
letter-spacing: 3px;
text-transform: uppercase;
white-space: pre;
span {
opacity: 0;
transform: scale(0);
animation: fadeIn 2.4s forwards;
}
&::before,
&::after {
position: absolute;
content: "";
top: 0;
bottom: 0;
width: 2px;
height: 100%;
background: #1173EB;
opacity: 0;
transform: scale(0);
}
&::before {
left: 50%;
animation: slideLeft 1.5s cubic-bezier(0.7, -0.6, 0.3, 1.5) forwards;
}
&::after {
right: 50%;
animation: slideRight 1.5s cubic-bezier(0.7, -0.6, 0.3, 1.5) forwards;
}
}
@keyframes fadeIn {
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes slideLeft {
to {
left: -6%;
opacity: 1;
transform: scale(0.9);
}
}
@keyframes slideRight {
to {
right: -6%;
opacity: 1;
transform: scale(0.9);
}
}
js部分,主要控制延迟
let duration = 0.8;
let delay = 0.3;
let revealText = document.querySelector(".reveal");
let letters = revealText.textContent.split("");
revealText.textContent = "";
let middle = letters.filter(e => e !== " ").length / 2;
letters.forEach((letter, i) => {
let span = document.createElement("span");
span.textContent = letter;
span.style.animationDelay = `${delay + Math.abs(i - middle) * 0.1}s`;
revealText.append(span);
});
-
两行css代码快速实现文字描边效果在网站中,我们可以通过css实现文字描边,模拟霓虹灯的效果
-
如何用css快速实现三角形通过css和伪类也可以实现各种三角形。
-
css实现手机充电动画效果通过css,我们可以实现很多动画效果,例如,我们通过animation,transform,filter,这些动画相关的css属性,就可以模拟手机充电的动画效果:
-
如何用css实现倒影效果在电商和产品广告中,我们经常看到水中倒影的效果,其实这种效果我们也可以通过css来实现。并且这种效果也是通过css的几种属性来实现。
-
利用css的延迟操作为页面的交互和动画带来更好的效果css延迟操作是一种常见的css技术,可以用来延迟元素的显示时间。通过在css中设置元素的延迟时间,可以让元素在页面加载完成后才显示,从而为页面的交互和动画效果带来更好的体验。
-
如何利用css和简单JavaScript实现文字渐隐动态效果通过css的animation动画及js循环控制实现
暂无评论,抢个沙发...