原文地址：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. Thinkphp 关联模型

    1.定义关联模型 2.使用关联模型 D('BlogRelation')->relation(true)->add($data);

  2. SQL2000服务端配置－如何让外网访问SQL2000

    刚刚写了个DEMO,在内网来测试SQL2000后完全正常.现在想测试外网是否正常,毕竟路由器IP不固定,所以选择了路由器+花生壳免费域名(koma.5166.info),所以先安装花生壳客户端软件.下 ...

  3. ALGO-120_蓝桥杯_算法训练_学做菜

    问题描述 涛涛立志要做新好青年,他最近在学做菜.由于技术还很生疏,他只会用鸡蛋,西红柿,鸡丁,辣酱这四种原料来做菜,我们给这四种原料标上字母A,B,C,D. 涛涛现在会做的菜有五种: . 西红柿炒鸡蛋 ...

  4. vc++使用cookie登录网站

    以http://www.idc816.com为例 效果图: 1)先登录获取cookie,再使用cookie获取用户信息 2)记录cookie,关闭程序后重新运行程序,直接获取用户信息 使用Fiddle ...

  5. java设计模式-Observer(2)

    一.模拟AWT事件处理 回顾一下JDK里面按下一个Button,有件事发生,这个东西怎么写: package com.cy.dp.observer.awt; import java.awt.Butto ...

  6. 廖雪峰Java1-2程序基础-9数组

    数组初识 1.数组的特点: 数组所有元素初始化默认值,int默认值为0 数组创建后大小不可改变 数组索引从0开始 数组是引用类型 使用索引下标访问数组元素,索引超出范围会报错 2.数组的定义: 类型[ ...

  7. Jmeter（二十）Beanshell or JSR223

    有关Beanshell和JSR223组件的部分,早就想写一大篇幅随笔进行记录,苦于不知如何去描述这两部分的内容,一直在修改随笔. 介绍一下Beanshell: Beanshell是轻量级Java,支持 ...

  8. [UE4]name slot一个种应用技巧

    如图所示“MouseOver”是一个Child Widget,是一个按钮. “Image_0”跟“MouseOver”是重叠在一起的,这样“Image_0”就会挡住“MouseOver”按钮的事件响应 ...

  9. 00004 - test命令详解

    Shell中的 test 命令用于检查某个条件是否成立,它可以进行数值.字符和文件三个方面的测试. -------------------------------------------------- ...

  10. 搭建双节点pg_pool+主从postgresql架构

    复制方式           优点                                                                 缺点 ——————————————— ...