12纯 CSS 创作一种文字断开的交互特效

时间：2022-11-01 07:34:34

原文地址：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&num; 视频演示如何用纯 CSS 创作一种文字断开的交互特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/LmjNgL 可交互视频教程 此视频是可以交 ...

  2. 如何用纯 CSS 创作一种文字断开的交互特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/LmjNgL 可交互视频教程 此视 ...

  3. 1&period;纯 CSS 创作一个按钮文字滑动特效 &plus; 弹幕（残缺）

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  4. 59&period;纯 CSS 创作彩虹背景文字

    原文地址:https://segmentfault.com/a/1190000015352436 修改后地址:https://scrimba.com/c/cqK3LaTQ 感想: 又一次见识到CSS的 ...

  5. 19&period;纯 CSS 创作一种有削铁如泥感觉的菜单导航特效

    原文地址:https://segmentfault.com/a/1190000014836748 感想: 把原元素隐藏,利用伪元素::before 和 ::after 各取上下一半 clip-path ...

  6. 14&period;纯 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. HTTPS简介

    一.简单总结 1.HTTPS概念总结 HTTPS 就是对HTTP进行了TLS或SSL加密. 应用层的HTTP协议通过传输层的TCP协议来传输,HTTPS 在 HTTP和 TCP中间加了一层TLS/SS ...

  2. git查看提交历史

    git日志的查看 在使用 Git 提交了若干更新之后,又或者克隆了某个项目,想回顾下提交历史,我们可以使用 git log 命令查看. 查看日志信息: $ git log 可以用 --oneline ...

  3. POJ3468 线段树（区间更新，区间求和，延迟标记）

    A Simple Problem with Integers Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 97196   ...

  4. C&num;数据操作LINQ

    Linq是language integrated query的缩写,即"语言集成查询"之意. Linq主要包含四个组件,Linq to object.Linq to XML.Lin ...

  5. linux学习心得之vim&sol;Cvim篇

    linux学习心得之vim/Cvim篇 在linux 下,vim 时一种最常见的编辑器,很多linux的发行版就自带了.我的是CentOS 6.3. 基本上Vim共分为3种模式,分别是一般模式,编辑模 ...

  6. 新手推荐&colon;Hadoop安装教程&lowbar;单机&sol;伪分布式配置&lowbar;Hadoop-2&period;7&period;1&sol;Ubuntu14&period;04

    下述教程本人在最新版的-jre openjdk-7-jdk OpenJDK 默认的安装位置为: /usr/lib/jvm/java-7-openjdk-amd64 (32位系统则是 /usr/lib/ ...

  7. VisualStudioCode创建的asp&period;net core控制台程序部署到linux

    1.asp.net core控制台程序 static void Main(string[] args) { ; ) { Console.WriteLine("Hello World!&quo ...

  8. out&comma; ref 和 params 的区别和用法

    1. out 参数. 如果你在一个方法中,返回多个相同类型的值,可以考虑返回一个数组. 但是,如果返回多个不同类型的值,返回数组就不可取.这个时候可以考虑使用out参数. out参数就侧重于在一个方法 ...

  9. LVS&plus;Heartbeat 高可用集群方案操作记录

    之前分别介绍了LVS基础知识和Heartbeat基础知识, 今天这里简单说下LVS+Heartbeat实现高可用web集群方案的操作说明. Heartbeat 项目是 Linux-HA 工程的一个组成 ...

  10. Python初学者第二十四天 函数进阶（3）生成器

    24day 1.列表生成式: 循环模式:[变量(加工后的变量) for 变量 in iterable] print([i for i in range(0,101,2)]) [1,4,9,16,25, ...

相关文章