CSS文字分裂和故障特效

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第7天，点击查看活动详情”

css学习之文字分裂和故障效果，具体参考chokcoco。

文字分裂

css知识点：

1、滤镜filter相关属性blur和contrast，blur会造成元素模糊，contrast设置对比度,能实现元素更亮或更淡。

2、transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

定义父级元素大小以及滤镜效果

.content {
    position: relative;
    margin: 20vh auto;
    width: 50vw;
    height: 10vw;
    filter: blur(0.3vw) contrast(10);
}
.child {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    position: absolute;
    overflow: hidden;
    font-size: 6vw;
    height: 10vw;
}

less动态设置每个子元素的动画时间

.loop(@n,@i:1) when(@i<=@n){
    .child:nth-child(@{i}) {
        width: @i * 5vw;
        animation: rotate 1.5s ease-in @i * 100ms;
        z-index: 10 - @i;
        &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: (@i - 1) * 5vw;
            height: 10vw;
            background: #fff;
            z-index: 1;
        }
    }
    .loop(@n,(@i)+1)  
}
.loop(@count);
@keyframes rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1, 1);
    }
    70% {
        transform: translate(-50%, -50%) rotate(180deg) scale(0.1, 0.5);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg) scale(1, 1);
    }
}

文字故障

css知识点：

1、滤镜filter相关属性contrast。

2、混合模式mix-blend-mode相关属性darken变暗。

3、视觉效果由位移、遮罩、混合模式完成。

定义父级元素大小以及位置

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(2.4);
    width: 300px;
    font-size: 0.8vw;
    color: #fff;
}

设置父级元素伪元素滤镜以及相关样式

.content::before {
    content: attr(data-word);
    position: absolute;
    top: 0;
    left: 0.5px;
    height: 0px;
    color: rgba(255, 255, 255, 0.9);
    overflow: hidden;
    z-index: 2;
    animation: redShadow 1s ease-in infinite;
    filter: contrast(200%);
    text-shadow: 1px 0 0 red;
}

.content::after {
    content: attr(data-word);
    position: absolute;
    top: 0;
    left: -3px;
    height: 36px;
    color: rgba(255, 255, 255, 0.8);
    overflow: hidden;
    z-index: 3;
    background: rgba(0, 0, 0, 0.9);
    animation: redHeight 1.5s ease-out infinite;
    filter: contrast(200%);
    text-shadow: -1px 0 0 cyan;
    mix-blend-mode: darken;
}

—— END ——