HTML5+CSS实现打字动画
- 一共有两种效果
1、第一种是平滑效果
2、第二种是跳动试出字效果
代码如下
<!DOCTYPE html>
<html>
<head>
<title>打字动画</title>
<meta charset="utf-8">
<style type="text/css">
.a{
width: 18em;
white-space: nowrap;
overflow: hidden;
border-right: 0.1em solid;
animation: aa 10s linear infinite,gb 10s linear infinite;
}
@keyframes aa{
0%{width: 0;}
}
@keyframes gb{
50%{border-color: transparent;}
100%{border-color: black;}
}
.b{
width: 18em;
white-space: nowrap;
overflow: hidden;
border-right: 0.1em solid;
animation: bb 10s steps(18) infinite,cc 10s steps(2) infinite;
}
@keyframes bb{
0%{width: 0;}
}
@keyframes cc{
50%{border-color: transparent;}
100%{border-color: black;}
}
</style>
</head>
<body>
<div class="a">平滑效果平滑效果平滑效果平滑效果</div>
<br />
<div class="b">跳动效果跳动效果跳动效果跳动效果</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
