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实现圆角的outline效果的教程
Jun 05 HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
Dec 13 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
推荐10个HTML5响应式框架
Feb 25 HTML / CSS
HTML5+CSS3实现机器猫
Oct 17 HTML / CSS
浅析HTML5 Landmark
Sep 11 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
Jun 01 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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
PHP语法速查表
2006/12/06 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
jquery中常用的SET和GET
2009/01/13 Javascript
javascript加号&quot;+&quot;的二义性说明
2013/03/04 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
python3中布局背景颜色代码分析
2020/12/01 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
火锅店营销方案
2014/02/26 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
硕士论文致谢范文
2015/05/14 职场文书
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript