原文地址：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. 什么是词性标注（POS tagging）

    词性标注也叫词类标注,POS tagging是part-of-speech tagging的缩写. 维基百科对POS Tagging的定义: In corpus linguistics, part-o ...

  2. Windows Azure Web Site (19) Azure Web App链接到VSTS

    <Windows Azure Platform 系列文章目录> 之前遇到一个问题,客户在海外使用 我参考了一下国内Azure China的文档:https://school.azure.c ...

  3. CentOS 7.4 初次手记：第四章 CentOS安全了解

    第四章 CentOS安全了解... 66 第一节 user.group.chmod. 66 I 10位文件属性... 66 II user/group增删改... 67 III user/group配 ...

  4. Unity3D工程版本管理方案【转自 兜里】

    参阅:http://outofmemory.cn/wr/?u=http%3A%2F%2Fblog.dou.li%2Funity3d%25e5%25b7%25a5%25e7%25a8%258b%25e7 ...

  5. Qt应用程序单实例化

    在实际应用中,我们经常需要让应用程序只有一个实例,再打开新的文档或者页面时,只是替换现在的窗口或者新打开一个标签,而不是重新启动一次应用程序.Qt中是否可以做到这样呢,答案是肯定的,因为Qt本身可以直 ...

  6. Oracle关于自连接、左外连接、右外连接、全连接

    关于自连接.左外连接.右外连接.全连接:   简单来讲,随便来个例子: A表 B表 id name id name  1 a 1 b  2 b 3 c 4 c   内连接就是左表和右表相同的数据: s ...

  7. golang的垃圾回收（GC）机制

    golang的垃圾回收采用的是 标记-清理(Mark-and-Sweep) 算法 就是先标记出需要回收的内存对象快,然后在清理掉: 在这里不介绍标记和清理的具体策略(可以参考https://lengz ...

  8. Abp.AutoMapper扩展(1) --static class AutoMapExtensions

    // 摘要:        //     Converts an object to another using AutoMapper library. Creates a new object    ...

  9. Mybatis 系列4-结合源码解析节点：typeAliases

    [Mybatis 系列10-结合源码解析mybatis 执行流程] [Mybatis 系列9-强大的动态sql 语句] [Mybatis 系列8-结合源码解析select.resultMap的用法] ...

  10. CentOS之文档的压缩与打包

    .rar压缩文件linux中不识别,.zip在windows和Linux中动能使用. .gz:由gzip压缩工具压缩的文件 .bz2:bzip2压缩工具压缩的文件 .tar:由tar打包程序打包的文件 ...