css 实现文字3D旋转近清晰远模糊

3D旋转:父元素设置透距perspective:160vmin,子元素设置3D模式transform-style: preserve-3d
近清晰远模糊:通过filter:blur实现模糊,filter:contrast实现更清晰,通过animation-delay:-ns;从指定时间立即开始动画,通过时间差实现,近清晰,远模糊

效果图:

代码示例:

body {perspective: 160vmin;overflow: hidden;
}
p {margin: auto;font-size: 5vmin;white-space: nowrap;transform-style: preserve-3d;animation: rotate 10s infinite ease-in-out;text-align: center;}
@keyframes rotate {0% {transform: rotateY(-45deg);}50% {/* 逆时针旋转45deg */transform: rotateY(45deg);  }100% {transform: rotateY(-45deg);}
}
/* 制造文字重叠 */
p>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);}/*控制单个文字动画*/
p>span:nth-child(1),
p>span:nth-last-child(1) {animation: filterBlur1 10s infinite ease-in-out;
}@keyframes filterBlur1 {0% {filter: blur(0px) contrast(5);}50% {filter: blur(6px) contrast(1);}100% {filter: blur(0px) contrast(5);}
}p>span:nth-child(2),
p>span:nth-last-child(2) {animation: filterBlur1 10s infinite ease-in-out;
}@keyframes filterBlur2 {0% {filter: blur(0px) contrast(5);}50% {filter: blur(5px) contrast(1);}100% {filter: blur(0px) contrast(5);}
}p>span:nth-child(3),
p>span:nth-last-child(3) {animation: filterBlur1 10s infinite ease-in-out;
}@keyframes filterBlur3 {0% {filter: blur(0px) contrast(5);}50% {filter: blur(4px) contrast(1);}100% {filter: blur(0px) contrast(5);}
}p>span:nth-child(4),
p>span:nth-last-child(4) {animation: filterBlur1 10s infinite ease-in-out;
}@keyframes filterBlur4 {0% {filter: blur(0px) contrast(5);}50% {filter: blur(3px) contrast(1);}100% {filter: blur(0px) contrast(5);}
}/*设置前五个文字,在动画第五秒的状态立即开始动画,即从50%模糊的时候开始动画*/
p>span:nth-child(-n+5) { animation-delay: -5s;}<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>

css 实现文字3D旋转近清晰远模糊相关推荐

3d旋转相册代码源码_如何使用CSS开发精美3D旋转相册？
借助CSS所提供的animation动画属性及2D.3D变换属性,我们可以摆脱对JavaScript的依赖,设计开发各类效果优秀的前端动态效果,在之前文章和视频中我们也介绍了不少基于CSS与JavaS ...
如何用css实现一个3D旋转照片墙
一.前言学习前端是件很有趣的事,今天我又来分享一下关于html+css实现的3D效果的照片墙的代码啦,希望感兴趣的小伙伴会喜欢! 正文: 今天,我们要做一个3D旋转相册,首先让我们了 ...
纯CSS 撩妹3D旋转相册
先看完成效果 *原形态为几张图片为成两个正方形,大正方形包着小正方形然后自主的旋转 *鼠标移入后外层(大正方形)变大继续旋转 2.基本布局 *一个box里包含两个box 3.基本CSS *CSS3 t ...
css 文字 3d旋转动画,CSS3 简单的三维文字旋转动画
CSS 语言: CSSSCSS 确定 *, *:after, *:before { box-sizing: border-box; } html { height: 100vh; background ...
HTML+CSS+JS实现 ❤️爱心文字3D旋转动画特效❤️
css实现文字/图标旋转90度/水平翻转/垂直翻转
一 css实现图片旋转90度 .icon{-moz-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);} 二水平翻转 .icon { ...
用HTML+CSS代码制作3D旋转相册
我的开源管理系统:Vue 3.2 + TypeScript+ Pinia + Vite2 + Element-Plus Gitee 仓库:https://gitee.com/laramie/Geeke ...
css表格文字位置调整,word表格中的文字距离表格四周太远，怎么才能调的近一些，除了调字大小。...
word表格中的文字距离表格四周太远,怎么才能调的近一些,除了调字大小.以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! ...
如何用html5制作3d旋转照片集
最近男友生日要到了,于是,我上网搜索如何制作照片集,作为男友的生日礼物之一,在我耗费几小时之后,终于成功了,撒花撒花~ 看完这篇文章,即使你完全不会html也可以制作成功首先,你需要下载一个软件-- ...

css 实现文字3D旋转近清晰远模糊

css 实现文字3D旋转近清晰远模糊相关推荐

最新文章

热门文章