直播短视频源码，模糊实现视觉的 3D 效果

直播短视频源码，模糊实现视觉的 3D 效果的相关代码
实现一个文字的 3D 变换
首先，我们需要实现一个文字的 3D 变换，这个比较简单。主要是借助 transform-style: preserve-3d 和 perspective，以及让文字绕 Y 轴进行旋转即可。
简单的代码如下：

 

<p>CSS3DEFFECT</p>

body {
perspective: 160vmin;
}

p {
font-size: 24vmin;
transform-style: preserve-3d;
animation: rotate 10s infinite ease-in-out;
}

@keyframes rotate {
0% {
transform: rotateY(-45deg);
}
50% {
transform: rotateY(45deg);
}
100% {
transform: rotateY(-45deg);
}
}

 

这个效果已经有了初步的 3D 效果，但是仅仅是这样，会觉得少了些什么。接下来我们就需要补充一下模糊的效果，让距离我们近的文字清晰，远离我们的文字模糊。
但这样就需要对每个文字进行精细化处理，上面的 HTML 结构无法做到对每一个文字的单独处理，我们简单改造一下结构：

 

<p>
<span>C</span>
<span>S</span>
<span>S</span>
<span>3</span>
<span>D</span>
<span>E</span>
<span>F</span>
<span>F</span>
<span>E</span>
<span>C</span>
<span>T</span>
</p>

 

完整的代码大概是这样：

 

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

$count: 12;

body, html {
font-family: 'Lobster', cursive;
perspective: 160vmin;
overflow: hidden;
}

p {
margin: auto;
font-size: 24vmin;
transform-style: preserve-3d;
animation: rotate 10s infinite ease-in-out;

span {
text-shadow:
1px 1px 0 rgba(0, 0, 0, .9),
2px 2px 0 rgba(0, 0, 0, .7),
3px 3px 0 rgba(0, 0, 0, .5),
4px 4px 0 rgba(0, 0, 0, .3),
5px 5px 0 rgba(0, 0, 0, .1);

&:nth-child(-n+5) {
animation-delay: -5s;
}
}
}

@for $i from 1 to 7 {
span:nth-child(#{$i}),
span:nth-last-child(#{$i}) {
animation: filterBlur-#{$i} 10s infinite ease-in-out;
}

@keyframes filterBlur-#{$i} {
0% {
filter: blur(0px) contrast(5);
}
50% {
filter: blur(#{7 - $i}px) contrast(1);
}
100% {
filter: blur(0px) contrast(5);
}
}
}
@keyframes rotate {
0% {
transform: rotateY(-45deg);
}
50% {
transform: rotateY(45deg);
}
100% {
transform: rotateY(-45deg);
}
}

 

以上就是 直播短视频源码，模糊实现视觉的 3D 效果的相关代码，更多内容欢迎关注之后的文章