简单CSS实现闪烁动画(+1白话讲解)
时间:2019-11-04
本文章向大家介绍简单CSS实现闪烁动画(+1白话讲解),主要包括简单CSS实现闪烁动画(+1白话讲解)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文转载于:猿2048网站⇒https://www.mk2048.com/blog/blog.php?id=icj2chj2ab
背景
本文承接自上文《CSS实现文字打字动画(+1白话讲解)》
介绍
提到闪烁动画,很多人可能会想起 <blink>
这个标签,亦或者是text-decoration: blink
这个东西,但是这两者都有很大的局限性,身为"专业"前端开发者的我们怎么能满足于此呢?所以我们不得不去寻找一些其他的方法。
开始操作
原图
字体调回正常啦~
- 想法1: 让元素变成透明再变回原样
.title{
animation: blink 1s 3;
}
@keyframes blink{
to {
color: transparent;
}
}
我们用Chrome开发者工具中的Animation看一看这个动画
可以发现..这个元素在变成透明之后会瞬间显现到原来的样子,很江硬,我想把他变成平滑的显现出来,于是想到了一个办法:通过修改关键帧,让其在循环周期中进行状态切换
.title{
animation: blink 1s 3;
}
@keyframes blink{
50% {
color: transparent;
}
}
舒服了一点
但是长了眼睛的读者一定能从图中发现这个动画的过程是加速的,导致这个动画看起来不是很自然
读了我上一篇文章的童鞋们一定会想到steps这个东西~ 让我们来试一哈
.title{
animation: blink 1s 3 steps(1);
}
@keyframes blink{
50% {
color: transparent;
}
}
完美
傻了吧,你的动画是一下都不会闪的在这里用to的童鞋注意了,steps(1)表示颜色值的切换只发生在动画周期的末尾,所以效果会变成这样
回顾
上一篇文章末尾提到了添加一个闪烁的光标,那么我们就用上面学到的知识来实现一下吧~
.title{
...
width: 17ch;
white-space: nowrap;
overflow: hidden;
border-right: 2px solid; //不指定颜色,使光标和文字颜色一致
animation: typing 10s steps(17),
blink 1s steps(1) infinite; //infinite用来使动画无限循环
}
@keyframes typing{
from {
width: 0;
}
}
@keyframes blink{
50% {
border-color: transparent;
}
}
肥肠完美
因为字体等原因效果展示不是肥肠好,但是应该是最优解啦,还可以通过JS进行维护,这里就不讲啦
文章翻译改编于CSS揭秘
原文地址:https://www.cnblogs.com/htmlandcss/p/11791522.html
- 上高速就开启自动驾驶,但出车祸了!自动驾驶真不敢用哦!
- Gof设计模式之建造者模式(二)
- 数字化随笔-演进AI
- 有料 | 无人驾驶登机桥首次在深圳试行
- java学习:eclipse + Weblogic 12c + svn 集成开发环境搭建
- Docker容器学习梳理--容器登陆方法梳理(attach、exec、nsenter)
- java学习:调用 java web service
- java学习:数据增删改查、存储过程调用及事务处理
- 极客手工:自制51四驱无线遥控小车
- flash:二次贝塞尔曲线应用-生成飞机路径示意图
- 微信小程序重磅功能上线!一键连Wi-Fi/手机变门禁卡
- MySQL下载安装、基本配置、问题处理
- windows下命令行模式中cd命令无效的原因
- 分布式和集群区别?什么是云计算平台?分布式的应用场景?
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例