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>

标签：child,span,模糊,filter,nth,css,blur,contrast,3D
来源： https://blog.csdn.net/weixin_43294560/article/details/121233376