效果预览

按下右侧的“点击预览”按钮在当前页面预览,点击链接全屏预览。

https://codepen.io/zhang-ou/pen/LmjNgL

可交互视频教程

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/c/c2EvWHN

源代码下载

请从 github 下载。

https://github.com/comehope/front-end-daily-challenges/tree/master/012-broken-text-effects

代码解读

定义 dom,只有一个元素,元素有一个 data-text 属性,属性值等于元素内的文本:

<div class="text" data-text="BREAK">BREAK</div>

居中显示:

html, body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

设置渐变背景色:

body {
background: linear-gradient(brown, sandybrown);
}

设置文本的字体字号:

.text {
font-size: 5em;
font-family: "arial black";
}

利用伪元素增加文字:

.text {
position: relative;
} .text::before,
.text::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
color: lightyellow;
}

设置左侧文字的遮罩:

.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::before,
.text::after {
transition: 0.2s;
} .text:hover::before {
left: -0.15em;
} .text:hover::after {
left: 0.15em;
}

隐藏辅助元素,包括原始文字和伪元素的背景色:

.text {
color: transparent;
} .text::before {
/*background-color: darkgreen;*/
} .text::after {
/*background-color: darkblue;*/
}

两侧文字增加歪斜效果:

.text:hover::before {
transform: rotate(-5deg);
} .text:hover::after {
transform: rotate(5deg);
}

微调文字的高度:

.text:hover::before {
top: -0.05em;
} .text:hover::after {
top: 0.05em;
}

大功告成!

知识点

前端每日实战:12# 视频演示如何用纯 CSS 创作一种文字断开的交互特效的更多相关文章

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

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

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

    原文地址:https://segmentfault.com/a/1190000014719591 总结:三部分组成,原文透明,左右都与原文重叠(绝对定位),但左右各取相应一部分. HTML代码: &l ...

  3. 前端每日实战:160# 视频演示如何用纯 CSS 创作一个打开内容弹窗的交互动画

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

  4. 前端每日实战:14# 视频演示如何用纯 CSS 创作一种侧立图书的特效

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

  5. 前端每日实战:19# 视频演示如何用纯 CSS 创作一种有削铁如泥感觉的菜单导航特效

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

  6. 前端每日实战:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效

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

  7. 前端每日实战:7# 视频演示如何用纯 CSS 创作一个 3D 文字跑马灯特效

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

  8. 前端每日实战:158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件

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

  9. 前端每日实战:140# 视频演示如何用纯 CSS 创作文本的淡入动画效果

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

随机推荐

  1. Eureka服务注册与发现-提供消费服务模型

    1.工具及软件版本 JDK1.8 Spring Boot 1.4.3.RELEASE <parent> <groupId>org.springframework.boot< ...

  2. 如何复制CSDN上他人的博客文章到自己博客下

    原作者:hello_world!(CSDN) 原文地址:https://jingyan.baidu.com/article/0964eca24e159c8285f53618.html</a> ...

  3. PHP 对Memcache的使用实例

    <?php //连接Memcache$mem = new Memcache;$mem->connect("localhost", 11211) or die (&quo ...

  4. C++ Primer笔记(1)——连续读取数据、类型对应的尺寸、类型转换、字符串分行写法

    这次要看看C++ Primer,这本基本上就是必读书籍了.下面的内容就是一些之前没有学过的知识的笔记. 读取数量不定的输入数据 虽然很简单,但是还是记一下: #include <iostream ...

  5. 应用安全 - 软件漏洞 - 可视化平台kibana漏洞汇总

    CVE-2019-7609  Date: 类型: RCE 前置条件: Timelion And Canvas 影响范围: kibana-RCE < PoC | ExP: https://gith ...

  6. python+selenium模拟鼠标操作

    from selenium.webdriver.common.action_chains import ActionChains #导入鼠标相关的包 ------------------------- ...

  7. 前端 CSS 盒子模型 目录

    CSS盒子模型介绍 padding border属性

  8. [DS+Algo] 006 两种简单排序及其代码实现

    目录 1. 快速排序 QuickSort 1.1 步骤 1.2 性能分析 1.3 Python 代码示例 2. 归并排序 MergeSort 2.1 步骤 2.2 性能分析 2.3 Python 代码 ...

  9. 嗨翻C语言--这里没有蠢问题(一)

    问:card_name[0]是什么意思?答:它是用户输入的第一个字符.如果用户输入了10,那么card_name[0]就将是1.问:总是得用/*和*/写注释吗?答:如果你的编译器支持C99标准,就可以 ...

  10. 网络流 ISAP算法

    网络流问题: 我自己理解,在流网络中,在不违背容量限制的条件下,解决各种从源点到汇点的问题. ISAP算法概念: 据说不会有卡ISAP时间的题目---时间复杂度O(E^2*V) 首先原理都是基于不断寻 ...