如何用纯 CSS 创作牛奶文字变换效果
CSS 如何 效果 文字 变换 创作 用纯
2023-09-27 14:26:43 时间
效果预览
在线演示按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/MGNWOm
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cvPryA6
源代码下载
本地下载每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 DOM,容器中包含 2 段文本:
<div class="container">
<p>Explorer</p>
<p>Discovery</p>
</div>
居中显示:
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
设置字体样式:
p {
color: white;
font-size: 100px;
font-weight: bold;
font-family: sans-serif;
text-transform: uppercase;
text-align: center;
}
让 2 段文本重叠:
p {
margin: 0;
}
p:nth-child(1) {
transform: translateY(50%);
}
p:nth-child(2) {
transform: translateY(-50%);
}
定义动画,让 2 段文本交替显示:
p {
animation: show-hide 10s infinite;
filter: opacity(0);
}
p:nth-child(1) {
animation-direction: normal;
}
p:nth-child(2) {
animation-direction: reverse;
}
@keyframes show-hide {
0% {
filter: opacity(0);
}
25% {
filter: opacity(1);
}
40% {
filter: opacity(1);
}
50% {
filter: opacity(0);
}
}
增加字间距的变化效果:
@keyframes show-hide {
0% {
filter: opacity(0);
letter-spacing: -0.8em;
}
25% {
filter: opacity(1);
}
40% {
filter: opacity(1);
}
50% {
filter: opacity(0);
letter-spacing: 0.24em;
}
}
增加文本模糊效果:
@keyframes show-hide {
0% {
filter: opacity(0) blur(0.08em);
letter-spacing: -0.8em;
}
25% {
filter: opacity(1) blur(0.08em);
}
40% {
filter: opacity(1) blur(0.24em);
}
50% {
filter: opacity(0) blur(0.24em);
letter-spacing: 0.24em;
}
}
最后,为容器设置对比度滤镜:
.container {
filter: contrast(10);
background-color: black;
overflow: hidden;
}
大功告成!
相关文章
- HTML、CSS和JS如何变成页面的
- html的css背景图的repeat
- CSS布局 ——从display,position, float属性谈起
- 一文搞懂css中精灵图如何使用
- css-控制元素中的字符超过规定的宽度影藏
- 我是如何用CSS绘制各种形状的
- CSS中常用的10个文本样式属性——让文本设置再无难点
- web系统js、css文件终极提速之gzip静态压缩+动态压缩
- 为什么要重置css样式,如何重置css样式?使用reset.css重置样式,还是使用normalize.css重置样式,他们的区别是什么?
- css 利用 clip-path 裁剪多边形,三角形,梯形,六边形等
- 如何用CSS画三角形
- Css初步教程
- 如何用纯 CSS 创作一组昂首阔步的圆点
- 如何用纯 CSS 创作一个极品飞车 loader
- 如何用纯 CSS 创作一副国际象棋
- 如何用纯 CSS 为母亲节创作一颗像素画风格的爱心
- 如何用纯 CSS 创作 404 文字变形为 NON 文字的交互特效
- 如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
- 常见文本框提示css技巧
- 利用css中的border生成三角,兼容包括IE6的主流浏览器
- 谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画!
- jQuery如何改变css伪元素样式
- 谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少
- CSS系列:CSS中盒子模型
- 浏览器原理 22 # 渲染流水线:CSS如何影响首次加载时的白屏时间?
- css——内容溢出显示垂直滚动条,内容不超出就不显示滚动条
- 前端开发基础——4.CSS 第一天