原文地址：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. jQuery介绍 常用选择器

    jquery现在三个版本, 1.x  2.x  3.x  都在用,越小的版本兼容性越好,ie8以下浏览器也支持,新功能不多.我们通常使用1.x 在html中,css放Head中,js放body尾部 j ...

  2. PerformEraseBackground 擦除背景（ThemeServices）

    PerformEraseBackground 擦除背景的简单方法(外带ThemeServices例子) 在查这个函数的时候,顺便看到了有趣的代码. 怎么使用 Themes . unit Unit2; ...

  3. 查找Python项目依赖的库并生成requirements.txt

    使用pip freeze pip freeze > requirements.txt 这种方式配合virtualenv 才好使,否则把整个环境中的包都列出来了. 使用 pipreqs 这个工具的 ...

  4. libextobjc使用

    pod 'libextobjc' #import "extobjc.h" 使用@weakify(self); @strongify(self)

  5. PREV-6_蓝桥杯_翻硬币

    问题描述 小明正在玩一个“翻硬币”的游戏. 桌上放着排成一排的若干硬币.我们用 * 表示正面,用 o 表示反面(是小写字母,不是零). 比如,可能情形是:**oo***oooo 如果同时翻转左边的两个 ...

  6. 【git之】fetch和 pull的区别

    Git中从远程的分支获取最新的版本到本地有这样2个命令:1. git fetch:相当于是从远程获取最新版本到本地,不会自动merge Git fetch origin master git log ...

  7. MySQL 服务启动y异常： 本地无法启动MySQL服务,报的错误：1067，进程意外终止---解决

    启动MySQL后,几秒钟后直接报错了 然后在事件查看器中发现了几条错误信息 Can't start server: Bind on TCP/IP port: No such file or direc ...

  8. “Hello world! ”

    12.1第一篇笔记 Python  方向:1.web全栈    2.人工智能 (java基础)   3. 爬虫开发   4.数据分析(金融) 6个月学习:需完成8-10万行代码的目标 下一步学习方向 ...

  9. react-router 4.x

    本次主要总结react中的路由的使用,实现让根组件根据用户访问的地址动态挂载不同的组件. 1,创建项目 首先使用命令 npx create-react-app react-router创建项目,然后n ...

  10. Java学习——上转型与下转型对象

    上转型:重写父类方法才调用子类方法,其他仍用父类的,包括被子类隐藏的父类成员变量,而且不能调用子类新增的成员变量和成员方法. 下转型:只能是转上去的才能转下去.下转型类似于该子类直接继承父类. pac ...