CSS题目系列（3）- 实现文字切割效果

描述

有一天逛 Codepen 的时候，看到这么一个效果：将文字上下切开两半。

点进去看了一下代码，发现原理很简单，大概就是通过伪类使用attr()函数获取内容，然后进行定位。

你可以点下方链接查看效果：

gd4ark.github.io/blog_demos/…

正文

先让两个伪元素获取到属性的值，并且将位置调好。

<h1 data-content="I Love CSS">I Love CSS</h1>
复制代码

样式部分

h1 {position: relative;color: transparent;
}h1::before,
h1::after {/* 通过 attr 获取属性的值 */content: attr(data-content);position: absolute;left: 0;width: 100%;overflow: hidden;color: #CC3333;
}/* 切割部分 */
h1::before {/* 上对齐 */top: 0;height: 50%;
}/* 剩余部分 */
h1::after {/* 下对齐 */bottom: 0;height: 50%;
}
复制代码

这时候的效果是这样的，所以我们要把剩余部分的文字进行底部对齐。

这里使用flex布局对齐，剩余部分改为：

/* 剩余部分 */
h1::after{bottom: 0;height: 50%;display: flex;align-items: flex-end;
}
复制代码

这时候：

到现在，就已经做好，只要在切割部分上应用动画，即可实现炫酷的切割效果：

/* 切割部分 */
h1::before{animation: action 5s 1s ease alternate infinite;
}
@keyframes action{0%{transform: translateX(0px);}30%{transform: translateX(-5vw);}60%{transform: translateX(0px);}100%{transform: translateX(5vw);}
}
复制代码

完整代码：github.com/gd4Ark/blog…

后记

不得不说那些大神们的脑洞真是大，如果没见过这个效果之前，我是无论如何都想不到可以如此简单的实现这么炫酷的切割效果。

注：此文为原创文章，如需转载，请注明出处。

原文链接

CSS题目系列（3）- 实现文字切割效果相关推荐

CSS冷门属性 mix-blend-mode 制作文字镂空效果
CSS冷门属性 mix-blend-mode 制作文字镂空效果本篇文章为大家带来如何制作文字镂空效果,仅仅使用CSS样式进行处理,借助 mix-blend-mode 属性,将文字的颜色反转,从而实现 ...
CSS环绕球体的旋转文字-3D效果
代码下载地址: http://www.demodashi.com/demo/12482.html 项目文件结构截图只需要一个html文件既可: 项目截图: 代码实现原理: 该示例的实现过程很简单,主 ...
CSS题目系列（1） - 可滚动的Table
描述在开发中,有这样一个需求,Table的表头不动,表身可以滚动,效果请点击以下链接查看: gd4ark.github.io/blog_demos/- 正文假设我们有一个这样结构的表格: < ...
（转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）...
一.文字环绕效果: html代码如下: 1 <body>2 3 <style type="text/css">4 #big img {float: left ...
各种css文字样式效果——多个行内元素居中，三点，缩进，阴影等
前端基础知识--css样式学习一.文字效果 1. 文本垂直水平居中.(一行和多行) 2. 文本超出显示省略值... 3. 文本换行 4. 文本缩进 5. 文本两端对齐 6. 字体阴影效果一.文字效 ...
CSS实现文字动画效果
今天来到了我们的第20个小项目的练习,距离我们100个小项目的练习,我们已经完成了五分之一了,剩下的五分之四,我们一起加油练习. 今天练习的这个小项目是一个CSS实现的文字动画效果,主要就是用在页面加 ...
css如何使文字抖动,CSS美化：实现抖音彩色文字抖动效果
抖音文字的效果(比较晃眼)好看实用,就是采用的数学知识比较考验人的,效果非常简单,就是一个 CSS3 的动画效果. 直接将这下面代码,放到你的 CSS 文件: .douyin{ animation: ...
html文字抖动效果,CSS实现TikTok文字抖动效果示例
前端同学在日常开发中精彩会因为一些动效和设计争的面红耳赤,设计希望用代码实现,前端要设计出gif图,最后谁也不让谁,设计走了,留下了前端独自加班...... CSS技术是前端必须掌握的一项技能,不仅要 ...
css盒心形的代码过程,如何使用CSS和D3实现用文字组成的心形动画效果（附代码）...
本篇文章给大家带来的内容是关于如何使用CSS和D3实现用文字组成的心形动画效果(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://gith ...

CSS题目系列（3）- 实现文字切割效果

描述

正文

后记

CSS题目系列（3）- 实现文字切割效果相关推荐

最新文章

热门文章