前端每日实战:33# 视频演示如何用纯 CSS 创作牛奶文字变换效果
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
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;
}
大功告成!
前端每日实战:33# 视频演示如何用纯 CSS 创作牛奶文字变换效果相关推荐
- 前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教程 此视频 ...
- 前端每日实战:93# 视频演示如何用纯 CSS 创作一根闪电连接线
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RBjdzZ 可交互视频 此视频是可 ...
- 前端每日实战:100# 视频演示如何用纯 CSS 创作闪闪发光的霓虹灯文字
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GBwvxw 可交互视频 此视频是可 ...
- 前端每日实战:60# 视频演示如何用纯 CSS 创作一块乐高积木
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qKKqrv 可交互视频 此视频是可 ...
- 前端每日实战:140# 视频演示如何用纯 CSS 创作文本的淡入动画效果
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZMwgqK 可交互视频 此视频是可 ...
- 前端每日实战:34# 视频演示如何用纯 CSS 创作在文本前后穿梭的边框
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qYepNv 可交互视频教程 此视频 ...
- 前端每日实战:151# 视频演示如何用纯 CSS 创作超能陆战队的大白
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ReGRaO 可交互视频 此视频是可 ...
- 前端每日实战:62# 视频演示如何用纯 CSS 创作一只蒸锅
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YvOzNy 可交互视频 此视频是可 ...
- 前端每日实战:73# 视频演示如何用纯 CSS 创作一只卡通狐狸
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OEKZed 可交互视频 此视频是可 ...
最新文章
- 智能车竞赛技术报告 | 节能信标组-哈尔滨工业大学紫丁香五队
- 要做linux运维工程师的朋友,必须要掌握以下几个工具才行
- PHP实习之路—NO.1(看LINUX、APACHE、MYSQL、PHP文档)
- Codeforces Round #392(div 2) 758D (贪心)
- linux账号前有个base,安装 aconda 后Linux的终端界面前部出现(base)字样
- 升级鸿蒙系统有没有翻车,被寄予厚望的华为鸿蒙系统,这次要翻车?原来并不是我们想的那样...
- CentOS7服务管理(重启,停止,自动启动命令)
- 6.5 Introduce Explaining Variable(引入解释性变量)
- 许晴×××汤的营养价值
- cURL(wget)—— 测试 RESTful 接口及模拟 GET/POST/PUT/DELETE/OPTIONS 请求
- 树莓派使用 USB 摄像头做网络监控
- wps2019政府专版 无广告
- 阿里云 maven 镜像地址
- 一个Web前端实习生的简历
- Android11 强制所有APP 横屏显示
- 电脑怎么加快网页打开速度?加快网速。
- SpringCloud 微服务网关Gateway常用限流算法以及简单实现
- 我与鸟哥 Yar 的亲密接触
- 工作一年了,小贺和大家说说心里话
- php app用户验证失败,Apple App Store无法成功添加沙箱技术测试员账号