前端每日实战: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 创作牛奶文字变换效果的更多相关文章
- 如何用纯 CSS 创作牛奶文字变换效果
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MGNWOm 可交互视频教 ...
- 前端每日实战:38# 视频演示如何用纯 CSS 创作阶梯文字特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MXYBEM 可交互视频教程 此视频 ...
- 前端每日实战:152# 视频演示如何用纯 CSS 创作一个圆点错觉效果
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gBwzKR 可交互视频 此视频是可 ...
- 33.纯 CSS 创作牛奶文字变换效果
原文地址:https://segmentfault.com/a/1190000015037234 感想:transform: translateY(50% & -50%); animatio ...
- 前端每日实战:53# 视频演示如何用纯 CSS 创作一个文本淡入淡出的 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ERwpeG 可交互视频 此视频是可 ...
- 前端每日实战:149# 视频演示如何用纯 CSS 创作一个宝路薄荷糖的动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oagrvz 可交互视频 此视频是可 ...
- 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...
- 前端每日实战:158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pxLbjv 可交互视频 此视频是可 ...
- 前端每日实战:140# 视频演示如何用纯 CSS 创作文本的淡入动画效果
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZMwgqK 可交互视频 此视频是可 ...
随机推荐
- 用jquery获取select标签中选中的option值及文本
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- mysql 数据库表结构对比语句
判断两个数据库互相不存在的表 select a.TABLE_SCHEMA,a.TABLE_NAME from information_schema.TABLES a where a.TABLE_SCH ...
- Spring自动装配之依赖注入(DI)
依赖注入发生的时间 当Spring IOC 容器完成了Bean 定义资源的定位.载入和解析注册以后,IOC 容器中已经管理类Bean定义的相关数据,但是此时IOC 容器还没有对所管理的Bean 进行依 ...
- TCP协议-流量控制
流量控制是通过滑动窗口来实现控制的.使用了坚持定时器,防止发送失败导致死锁.
- Struts2之校验
##1.输入校验 错误提示页面 <%@ page language="java" contentType="text/html; charset=UTF-8&quo ...
- Emmet-前端开发神器
地址:https://segmentfault.com/a/1190000007812543 Emmet是一款编辑器插件,支持多种编辑器支持.在前端开发中,Emmet 使用缩写语法快速编写 HTML. ...
- 对于nginx配置文件中的fastcgi_param相关参数的理解
今天在ubuntu中搭建LNMP的时候,遇到了一个问题 在浏览器中访问.php文件的时候,nginx不能正常解析,页面只是空白,后来百度了一下,发现了问题 在nginx的配置文件nginx.conf中 ...
- HDU 4012 Paint on a Wall(状压+bfs)
Paint on a Wall Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65768/65768 K (Java/Others) ...
- pyspider启动错误解决(Python 3.7)
问题一 安装好pyspider之后,在启动的时候,报出上图错误. 原因 async和await从 python3.7 开始已经加入保留关键字中. 参考: What’s New In Python 3. ...
- 【记录】spring/springboot 配置mybatis打印sql
======================springboot mybatis 打印sql========================================== 方式 一: ##### ...