您正在使用IPV4(18.205.176.39)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
深圳小产权房       [公益]文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】热门云产品首单特惠秒杀,2核2G云服务器45元/年      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 儿童节 15
2022年 端午节 17
2023年 元 旦 229
2023年 春 节 250
 
本类新增
本类热门文章
您现在的位置:首页 >> 脚本程序 >> 内容
css实现文字断裂效果的示例代码
内容摘要: clip-path属性创建一个只有元素的部分区域,可以显示的剪切区域。区域内的部分显示,区域外的隐藏。h1data-text='TextCrack'spanTextCrack/span/h1使用元素的伪元素复制两份文本,再使用clip-path将元素本身、元素的两个伪元素分为3部分,分别对这3部分进行控制body,html{display:flex;heig......
clip-path属性

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

<h1data-text="TextCrack">

<span>TextCrack</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:0010pxblue;

user-select:none;

white-space:nowrap;

filter:blur(0.007em);

animation:shake2.5slinearforwards;

}

h1span{

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:crack12.5slinearforwards;

clip-path:polygon(0%0%,10%0%,55%100%,0%100%);

}

h1::after{

animation:crack22.5slinearforwards;

clip-path:polygon(44%0%,100%0%,100%100%,70%100%);

}

@keyframesshake{

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);

}

}

@keyframescrack1{

0%,

95%{

transform:translate(-50%,-50%);

}

100%{

transform:translate(-51%,-48%);

}

}

@keyframescrack2{

0%,

95%{

transform:translate(-50%,-50%);

}

100%{

transform:translate(-49%,-53%);

}

上一篇:JavaScript实现网页版贪吃蛇游戏 下一篇:Python统计序列和文件中元素的频度
发布日期:2022/4/22
手机扫二维码直达本页
发布时间:13:25:22
点击:279
录入:齐天大圣
相关文章
Baidu

YiJiaCMS 6.2.1.220509(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2022