直播短视频源码,模糊实现视觉的 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 效果的相关代码,更多内容欢迎关注之后的文章