css3 文字断裂效果


Posted in HTML / CSS onApril 22, 2022

clip-path属性

创建一个只有元素的部分区域,可以显示的剪切区域。区域内的部分显示,区域外的隐藏。

<h1 data-text="Text Crack">
    <span>Text Crack</span>
</h1>

使用元素的伪元素复制两份文本,再使用 clip-path 将元素本身、元素的两个伪元素分为3部分,分别对这3部分进行控制

body, html
{
    display: flex;
    height: 100%;
    width: 100%;
    background-color: #000;
    overflow: hidden;
    font-family: sans-serif;
}
 
h1 {
    position: relative;
    margin: auto;
    font-size: calc(20px + 5vw);
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-shadow: 0 0 10px blue;
    user-select: none;
    white-space: nowrap;
    filter: blur(0.007em);
    animation: shake 2.5s linear forwards;
}
 
h1 span {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
}
 
h1::before,
h1::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
}
 
h1::before {
    animation: crack1 2.5s linear forwards;
    clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
}
 
h1::after {
    animation: crack2 2.5s linear forwards;
    clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
}
 
@keyframes shake {
    5%,
    15%,
    25%,
    35%,
    55%,
    65%,
    75%,
    95% {
        filter: blur(0.018em);
        transform: translateY(0.018em) rotate(0deg);
    }
 
    10%,
    30%,
    40%,
    50%,
    70%,
    80%,
    90% {
        filter: blur(0.01em);
        transform: translateY(-0.018em) rotate(0deg);
    }
 
    20%,
    60% {
        filter: blur(0.03em);
        transform: translate(-0.018em, 0.018em) rotate(0deg);
    }
 
    45%,
    85% {
        filter: blur(0.03em);
        transform: translate(0.018em, -0.018em) rotate(0deg);
    }
 
    100% {
        filter: blur(0.007em);
        transform: translate(0) rotate(-0.5deg);
    }
}
 
@keyframes crack1 {
    0%,
    95% {
        transform: translate(-50%, -50%);
    }
 
    100% {
        transform: translate(-51%, -48%);
    }
}
 
@keyframes crack2 {
    0%,
    95% {
        transform: translate(-50%, -50%);
    }
 
    100% {
        transform: translate(-49%, -53%);
    }
}

因为使用了 clip-path 裁剪后的元素,只有元素的剪切区域才能被显示,所以我们可以分别控制 3 个部分进行动画

最终效果如下

css3 文字断裂效果

到此这篇关于css实现文字断裂效果的示例代码的文章就介绍到这了!

 

Tags in this post...

HTML / CSS 相关文章推荐
详解css3自定义滚动条样式写法
Dec 25 HTML / CSS
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 HTML / CSS
css3背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
html5指南-2.如何操作document metadata
Jan 07 HTML / CSS
解析CSS 提取图片主题色功能(小技巧)
May 12 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 HTML / CSS
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 #HTML / CSS
开发微信小程序之WXSS样式教程
Apr 18 #HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 #HTML / CSS
HTML5基础学习之文本标签控制
Mar 25 #HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
Mar 25 #HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
flex弹性布局详解
You might like
php去除重复字的实现代码
2011/09/16 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
[00:56]PWL开团时刻DAY8——追追追追追!
2020/11/09 DOTA
简明 Python 基础学习教程
2007/02/08 Python
用Python写冒泡排序代码
2016/04/12 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
施工资料员的岗位职责
2013/12/22 职场文书
新年晚会主持词
2014/03/24 职场文书
2014年管理工作总结
2014/11/22 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
利用python进行数据加载
2021/06/20 Python
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang
设置IIS Express并发数
2022/07/07 Servers