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 相关文章推荐
纯HTML+CSS3制作导航菜单(附源码)
Apr 24 HTML / CSS
利用CSS3实现的文字定时向上滚动
Aug 29 HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 HTML / CSS
CSS3实现文本垂直排列的方法
Jul 10 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
HTML5中原生的右键菜单创建方法
Jun 28 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 HTML / CSS
css3 选择器
May 11 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代码
2006/12/06 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
PHP curl使用实例
2015/07/02 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
python写程序统计词频的方法
2019/07/29 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
python用什么编辑器进行项目开发
2020/06/17 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
python的数学算法函数及公式用法
2020/11/18 Python
python 模拟登陆163邮箱
2020/12/15 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
全球知名鞋履品牌授权零售商:Journeys
2016/09/17 全球购物
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
汉语言文学毕业求职信
2014/07/17 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
招商银行工作证明
2015/06/17 职场文书