所以在文章开头的动画实现就变得很简单了,我们只需要设置一个画布背景,然后用内容混合让文字叠加, 最后设计文字和故障线的动画即可. 接下来我们看看具体的实现步骤....实现方案
我们先来实现文字的混合效果, 故障线和画布背景, css代码如下:
.blink {
// ......;
}
40% {
top: 35%;
}
60% {
top: 2%;
}
80% {
top: 80%;
}
100% {
top:...99%;
}
}
复制代码
shakeFront和shake分别为后置文字和前置文字的动画, lineShake为故障线的动画....笔者已将组件代码上传到github, 大家可以安装使用或者在其基础上进一步完善, 比如基于背景图片的故障动画等等, 以上css3特性在现代浏览器中支持相对稳定, 在做H5开发中可以一试.
云服务器
ICP备案
腾讯会议
云直播
对象存储
