效果预览

在线演示

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

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;
}

大功告成!

知识点

原文地址:https://segmentfault.com/a/1190000014719591

如何用纯 CSS 创作一种文字断开的交互特效的更多相关文章

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

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

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

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

  3. 如何用纯 CSS 创作一种有削铁如泥感觉的菜单导航特效

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

  4. 如何用纯 CSS 创作一种侧立图书的特效

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

  5. 如何用纯 CSS 创作一种按钮被瞄准的交互特效

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

  6. 如何用纯 CSS 创作一个 3D 文字跑马灯特效

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

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

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

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

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

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

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

随机推荐

  1. 重装 Cloudera CDH 5,启动oozie 出错处理

    参考文章:http://community.cloudera.com/t5/Cloudera-Manager-Installation/Error-CDH5-oozie/td-p/8686 按照文章说 ...

  2. 求导四则运算以及三角函数求导 Derivative formulas

    对特定函数的求导. 1:sin(x) 对其进行求斜率.带入公式得:[ sin(x+Δx)- sin(x)]/Δx  = [ sinx*cosΔx + cosx*sinΔx -sin x ]/ Δx = ...

  3. Apache Kylin 是什么?

    Apache Kylin的官网 http://kylin.apache.org/cn/ - 可扩展超快OLAP引擎:  Kylin是为减少在Hadoop上百亿规模数据查询延迟而设计 - Hadoop ...

  4. android 百度地图

    展示当前位置地图 参考百度定位demo (LocationDemo) 实现此功能,运行发现 BDLocationListener 的onReceiveLocation方法无法执行,原因是 Androi ...

  5. 【数据结构(C语言版)系列四】 串

    串类型的定义 串(或字符串)是由零个或多个字符组成的有限序列,一般记为 s = 'a1a2...an',s为串名.子串在主串中的位置以子串的第一个字符在主串中的位置来表示. 串和表示和实现——定长顺序 ...

  6. AtCoder Grand Contest 013 E - Placing Squares

    题目传送门:https://agc013.contest.atcoder.jp/tasks/agc013_e 题目大意: 给定一个长度为\(n\)的木板,木板上有\(m\)个标记点,距离木板左端点的距 ...

  7. Hadoop调度框架

        大数据协作框架是一个桐城,就是Hadoop2生态系统中几个辅助的Hadoop2.x框架.主要如下: 1,数据转换工具Sqoop 2,文件搜集框架Flume 3,任务调度框架Oozie 4,大数 ...

  8. 设计模式(3)-- 原型模式 (clone分析)

    原型模式:用原型实例指定创建对象的种类,并且通过拷贝这些原型来创建对象. 在java中有语言级别的支持:clone 在java中使用原型模式是非常简单的事情,实现Cloneable接口,调用Objec ...

  9. Day01 计算机硬件基础

    1.什么是编程语言? 编程语言是程序员与计算机沟通的介质. 2.什么是编程? 程序员利用某种编程语言的语法格式将自己脑子中想要让计算机做的事写到文件中. 所以说,变成的结果就是文件,文件的内容就是一堆 ...

  10. 《精通css》笔记

    第2章    选择器,注释 1.要知道常用选择器(id选择器,类选择器,类型选择器,后代选择器,伪类选择器(文档结构之外)) 通用选择器(*{    }) 高级选择器(子选择器,相邻同胞选择器,属性选 ...