原文地址：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. 生成当前目录文件的xml描述

    需求场景:例如需要在当前目录下把相关文件组织成xml文件去描述.通常在组织项目中的升级文件时候可能会用到. 代码示例: using System; using System.Collections.G ...

  2. bzoj3491: PA2007 Subsets

    Description 有一个集合U={1,2,…,n),要从中选择k个元素作为一个子集A.若a∈A,则要有a*X不属于A,x是一个给定的数.求可选方案对M取模后的值. 1< = N< = ...

  3. P【1012】拼数

    十分蒟蒻...(还是看别人的博才过的...) 题解 #include<cstdio>#include<cstring>#include<algorithm>#inc ...

  4. Dubbo(3)Dubbo admin管理控制台

    dubbo-admin管理控制台: 可以管理服务,消费,以及其他配置: 在dubbo项目的zip包中有个demo-admin项目,可以打成war包,发布到tomcat运行里面: 我这里将dubbo-a ...

  5. Consul之：key/value存储

    key/value作用 动态修改配置文件 支持服务协同 建立leader选举 提供服务发现 集成健康检查 除了提供服务发现和综合健康检查,Consul还提供了一个易于使用的键/值存储.这可以用来保存动 ...

  6. hierarchical_mutex函数问题（C++ Concurrent in Action）

    C++ Concurrent in Action(英文版)书上(No.52-No.53)写的hierarchical_mutex函数,只适合结合std::lock_guard使用,直接使用如果不考虑顺 ...

  7. Git revert及其他一些回退操作

    放弃本地的代码和本地提交,希望会退到远程分支的某次提交时,使用git reset --hard fa042ce. 本地已提交,但是发现有问题,想要撤销本地的提交,使用git checkout /trs ...

  8. HDOJ 2005 第几天？

    #include<iostream> using namespace std; ] = { ,,,,,,,,,,, }; ] = { ,,,,,,,,,,, }; bool isRYear ...

  9. 获取器操作都是针对数据而不是数据集的，要通过append()方法添加数据表不存在的字段

    获取器操作都是针对数据而不是数据集的,要通过append()方法添加数据表不存在的字段 public function getMembership(){ //加入会员s_id = 1 $busines ...

  10. VMware同时使用三种网络模式的虚拟机，测试连通性

    参考资料: 虚拟机中桥接不自动分配IP与设置静态IP问题: https://blog.csdn.net/u013187057/article/details/80579211 腾讯课堂: https: ...