12纯 CSS 创作一种文字断开的交互特效
原文地址：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 创作一种文字断开的交互特效的更多相关文章
- 前端每日实战：12# 视频演示如何用纯 CSS 创作一种文字断开的交互特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/LmjNgL 可交互视频教程 此视频是可以交 ...
- 如何用纯 CSS 创作一种文字断开的交互特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/LmjNgL 可交互视频教程 此视 ...
- 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）
原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...
- 59.纯 CSS 创作彩虹背景文字
原文地址:https://segmentfault.com/a/1190000015352436 修改后地址:https://scrimba.com/c/cqK3LaTQ 感想: 又一次见识到CSS的 ...
- 19.纯 CSS 创作一种有削铁如泥感觉的菜单导航特效
原文地址:https://segmentfault.com/a/1190000014836748 感想: 把原元素隐藏,利用伪元素::before 和 ::after 各取上下一半 clip-path ...
- 14.纯 CSS 创作一种侧立图书的特效
原文地址:https://segmentfault.com/a/1190000014751037 HTML代码: <div class="books"> <div ...
- 如何用纯 CSS 创作一种有削铁如泥感觉的菜单导航特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/XqYroe 可交互视频教 ...
- 如何用纯 CSS 创作一种侧立图书的特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/deVgRM 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一种按钮被瞄准的交互特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. 在线演示 https://codepen.io/zhang-ou/pen/ELWMLr 可交互视频教程 此视 ...
随机推荐
- ManualResetEvent学习实例
ManualResetEvent为多个线程之间提供了一个共享的信号. 初始化:ManualResetEvent mre=new ManualResetEvent(true) 初始值为true表示有信号 ...
- variable 'QJsonArray array' has initializer but incomplete type
variable "xxx" has initializer but incomplete type 编译报以上错误 分析:“xxx”对应的类型没有找到,没包含定义该变量类型的头文 ...
- 【性能测试】使用ab做Http性能测试
[[TOC]] Http性能测试工具 ab(ApacheBench) 安装: yum install httpd 使用 ab -n 20 -c 1 192.168.35.1:8988/fortest ...
- 【转】在同一个类中，一个方法调用另外一个有注解（比如@Async，@Transational）的方法，注解失效的原因和解决方法
参考 原文链接 @Transactional does not work on method level 描述 在同一个类中,一个方法调用另外一个有注解(比如@Async,@Transational) ...
- CSS3 圆角（border-radius）
值:半径的长度 前缀 -moz(例如 -moz-border-radius)用于Firefox -webkit(例如:-webkit-border-radius)用于Safari和Chrome. 例1 ...
- 【C#】C#操作Excel文件(转)
实现C#与Excel文件的交互操作,实现以下功能: 1.DataTable 导出到 Excel文件 2.Model数据实体导出到 Excel文件[List<Model>] 3.导出数据到模 ...
- 筛选法求n以内所有的素数
求n以内所有的素数? 筛选法:将2到n中所有的数都列出来,然后从2开始,先化掉所有2的倍数,然后每次从下一个剩下的数(必然是素数)开始,划掉其内所有的倍数,最后剩下来的数就都是素数 例:13 红色为 ...
- Spring4.0之四：Meta Annotation（元注解）
Spring框架自2.0开始添加注解的支持,之后的每个版本都增加了更多的注解支持.注解为依赖注入,AOP(如事务)提供了更强大和简便的方式.这也导致你要是用一个相同的注解到许多不同的类中去.这篇文章介 ...
- Java学习——Applet写字符串（调字体）
import java.awt.*; import java.applet.Applet; public class GUI2 extends Applet{ public void paint(Gr ...
- 学习笔记之Git / Gitflow / TortoiseGit
Git - Wikipedia https://en.wikipedia.org/wiki/Git Git (/ɡɪt/) is a version control system for tracki ...