原文地址:https://segmentfault.com/a/1190000014719591

总结:三部分组成,原文透明,左右都与原文重叠(绝对定位),但左右各取相应一部分。

HTML代码:

<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="text" data-text="BREAK">BREAK</div>
</body>
</html>

CSS代码:

html, body {
margin:;
padding:;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/* */
/* 设置渐变背景色 */
body{
background: linear-gradient(brown, sandybrown);
}
.text{
font-size: 5em;
font-family: "arial black";
position: relative;
/* 透明 */
/* color: transparent; */
}
/* 利用伪元素增加文字 */
.text::before,
.text::after{
content: attr(data-text);
/* 使before 和after 内容与text重合 */
position: absolute;
top:;
left:;
color: lightyellow;
transition: 0.2s;
}
/* 设置左侧文字的遮罩 */
.text::before{
/* background-color: darkgreen; */
/* 图形的四个部分 */
clip-path: polygon(0 0, 60% 0, 30% 100%, 0 100%);
}
/* 设置右侧文字的遮罩 */
.text::after {
/*background-color: darkblue; */
clip-path: polygon(60% 0, 100% 0, 100% 100%, 30% 100%);
}
.text:hover::before {
/* 当鼠标划过时,遮罩的文字分别向两侧偏移 */
left: -0.15em;
/* 两侧文字增加歪斜效果 */
transform: rotate(-5deg);
/* 微调文字的高度 */
top: -0.05em;
} .text:hover::after {
left: 0.15em;
transform: rotate(5deg);
top: 0.05em;
}

12纯 CSS 创作一种文字断开的交互特效的更多相关文章

  1. 前端每日实战:12# 视频演示如何用纯 CSS 创作一种文字断开的交互特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/LmjNgL 可交互视频教程 此视频是可以交 ...

  2. 如何用纯 CSS 创作一种文字断开的交互特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/LmjNgL 可交互视频教程 此视 ...

  3. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  4. 59.纯 CSS 创作彩虹背景文字

    原文地址:https://segmentfault.com/a/1190000015352436 修改后地址:https://scrimba.com/c/cqK3LaTQ 感想: 又一次见识到CSS的 ...

  5. 19.纯 CSS 创作一种有削铁如泥感觉的菜单导航特效

    原文地址:https://segmentfault.com/a/1190000014836748 感想: 把原元素隐藏,利用伪元素::before 和 ::after 各取上下一半 clip-path ...

  6. 14.纯 CSS 创作一种侧立图书的特效

    原文地址:https://segmentfault.com/a/1190000014751037 HTML代码: <div class="books"> <div ...

  7. 如何用纯 CSS 创作一种有削铁如泥感觉的菜单导航特效

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/XqYroe 可交互视频教 ...

  8. 如何用纯 CSS 创作一种侧立图书的特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/deVgRM 可交互视频教程 此视 ...

  9. 如何用纯 CSS 创作一种按钮被瞄准的交互特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. 在线演示 https://codepen.io/zhang-ou/pen/ELWMLr 可交互视频教程 此视 ...

随机推荐

  1. vue项目中, 字段信息为空时不渲染,是真的不渲染吗

    代码 样式,宽度pro_proj 此class设置有宽度,考虑字数如果太多就进入下一行就没有设置高度 样式改为 数据 渲染. 开始以为,null时vue不渲染,然后审查元素,发现渲染的dom是存在的, ...

  2. 运营站点-开放robots后,站内google搜索数量第二天10条左右,第5天搜录9920条,可喜可贺

    开放robots后,站内google搜索数量第二天10条左右,第5天搜录9920条,可喜可贺 2014年4月29日 16:17:56 到目前为之已搜录14000多条,已有客户在网站注册,加入购物车

  3. vue之v-for

    vue.js 的循环渲染是依赖于 v-for 指令,它能够根据 vue 的实例里面的信息,循环遍历所需数据,然后渲染出相应的内容.它可以遍历数组类型以及对象类型的数据,js 里面的数组本身实质上也是对 ...

  4. Ansible基础入门

    1.1 Ansible是什么        随着移动互联.物联网.互联网+.大数据.云计算等大规模应用的催生推动,以及人们日常生活的互联网化,互联网的蓬勃发展不仅冲击影响着整个经济体,更对人们的生活理 ...

  5. QLExpress 规则引擎使用介绍

    一个轻量级的类java语法规则引擎,作为一个嵌入式规则引擎在业务系统中使用.让业务规则定义简便而不失灵活.让业务人员就可以定义业务规则.支持标准的JAVA语法,还可以支持自定义操作符号.操作符号重载. ...

  6. 珍藏的数据库SQL基础练习题答案

    自己珍藏的数据库SQL基础练习题答案 一,基本表的定义与删除. 题1: 用SQL语句创建如下三张表:学生(Student),课程表(Course),和学生选课表(SC),这三张表的结构如表1-1到表1 ...

  7. 【转】Java工程师必备书单

    江湖路险,你我同行. Java开发工程师一般负责后端开发,当然也有专门做Java Web的工程师,但是随着前后端的分离,越来越多的Java工程师需要往大后端方向发展. 今天我们就来介绍一下Java后端 ...

  8. Jmeter(三十九)User.Properties定义全局变量

    “烟”从物质上满足吸烟者对尼古丁的依赖,但“烟”更从精神上满足了人们对“思想”的欲望---在抽烟的时刻,每个男人都可能成为思想家. ---<冲突> 前面有记到jmeter读取外部文件内容的 ...

  9. Spring事务管理的demo

    事务是逻辑上的一组操作,这组操作要么全部成功,要么全部失败,最为典型的就是银行转账的案例: A要向B转账,现在A,B各自账户中有1000元,A要给B转200元,那么这个转账就必须保证是一个事务,防止中 ...

  10. c#day03

    c#中的随机数 Random random = new Random(); //随机1~200之间的一个数 random.Next(,); //怪兽:防御为10,血量为10 //玩家:随机8~12的攻 ...