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

总结：三部分组成，原文透明，左右都与原文重叠（绝对定位），但左右各取相应一部分。

HTML代码：

  1. <html>
  2.     <head>
  3.         <link rel="stylesheet" href="index.css">
  4.     </head>
  5.     <body>
  6.         <div class="text" data-text="BREAK">BREAK</div>
  7.     </body>
  8. </html>

CSS代码：

  1. html, body {
  2.     margin:;
  3.     padding:;
  4.     height: 100%;
  5.     display: flex;
  6.     justify-content: center;
  7.     align-items: center;
  8. }
  9. /* */
  10. /* 设置渐变背景色 */
  11. body{
  12.     background: linear-gradient(brown, sandybrown);
  13. }
  14. .text{
  15.     font-size: 5em;
  16.     font-family: "arial black";
  17.     position: relative;
  18.     /* 透明 */
  19.     /* color: transparent; */
  20. }
  21. /* 利用伪元素增加文字 */
  22. .text::before,
  23. .text::after{
  24.     content: attr(data-text);
  25.     /* 使before 和after 内容与text重合 */
  26.     position: absolute;
  27.     top:;
  28.     left:;
  29.     color: lightyellow;
  30.     transition: 0.2s;
  31. }
  32. /* 设置左侧文字的遮罩 */
  33. .text::before{
  34.     /* background-color: darkgreen; */
  35.     /* 图形的四个部分 */
  36.     clip-path: polygon(0 0, 60% 0, 30% 100%, 0 100%);
  37. }
  38. /* 设置右侧文字的遮罩 */
  39. .text::after {
  40.     /*background-color: darkblue; */
  41.     clip-path: polygon(60% 0, 100% 0, 100% 100%, 30% 100%);
  42. }
  43. .text:hover::before {
  44.     /* 当鼠标划过时，遮罩的文字分别向两侧偏移 */
  45.     left: -0.15em;
  46.     /* 两侧文字增加歪斜效果 */
  47.     transform: rotate(-5deg);
  48.     /* 微调文字的高度 */
  49.     top: -0.05em;
  50. }
  51.  
  52. .text:hover::after {
  53.     left: 0.15em;
  54.     transform: rotate(5deg);
  55.     top: 0.05em;
  56. }

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. 系统服务和普通FORMS程序共存一体的实现

    要求:一个EXE,如何将它做成这样的效果:1.双击它时,像一个FORMS程序那样正常显示窗体运行.2.注册成系统服务,每次都可以从service.msc中启动它. 也就是说,没注册之前,它可以当作普通 ...

  2. php .htaccess文件使用详解

    1..htaccess文件使用前提 .htaccess的主要作用就是实现url改写,也就是当浏览器通过url访问到服务器某个文件夹时,作为主人,我们可以来接待这个url,具体地怎样接待它,就是此文件的 ...

  3. 构建Jenkins自动化编译管理环境

    今天研究了一下Jenkins,有了一个粗浅的认识,顺手把构建的过程说一下,后续慢慢补充: (1)Secure CRT 连接到Linux服务器 要注意的一点是,要搞好一个文件传输的路子,否则不好传东西. ...

  4. LeetCode——1. Two Sum

    一.题目链接:https://leetcode.com/articles/two-sum/ 二.题目大意: 给定一个int型数组A和int值a,要求从A中找到两个数,使得这两个数值的和为a:返回结果为 ...

  5. Windows进程单实例运行

    场景         Windows进程单实例运行,如果有进程没有退出,继续等待,直到进程完全退出,才会进入下一个实例 HANDLE pHandle = NULL; do  {  pHandle = ...

  6. mariadb semi plugin遇到的坑

    安装完semi plugin运行一段时间后,重启mariadb, 突然发现canal无法解析数据了,一直在报错,然后登陆mariadb, show plugins竟然没有看到之前安装的semi plu ...

  7. HDOJ 2013 蟠桃记

    #include<iostream> using namespace std; int main() { int n; while (cin >> n) { ; ;i < ...

  8. c#类 对象 构造函数 析构函数——面向对象

    类: 也是复杂数据类型 也是需要我们先定义出类型,才能使用它的数据 对象: 是通过模板类实例化出来的个体,具有具体的属性和行为(方法),对象是不能索引到静态方法. 对象的生命周期 构造—— 使用—— ...

  9. MySQL建立索引，触发器

    创建索引: ALTER TABLE <表名> ADD INDEX (<字段>); >ALTER TABLE `table_name` ADD PRIMARY KEY (` ...

  10. Delphi XE5中的新增内容

    Delphi XE5中的新增内容 Delphi XE5是所有Delphi开发人员的必须备升级,并且是来自Embarcadero的获奖的.多设备应用开发解决方案的最新版本.使用Delphi XE5的新特 ...