css3动画打字效果 |获取css复选框值

/* HTML 代码 */
<div id="text"></div>
/* CSS 代码 */
#text{
font-size: 24px;
font-family: Arial, sans-serif;
color: #333;
border-right: solid 2px #333;
width: 1em; 
white-space: nowrap;
overflow: hidden;
}
#text.animate{
animation: type 2s steps(28, end);  
}
@keyframes type{
from { width: 0 }
}
/* JavaScript 代码 */
var text = document.getElementById("text");
text.classList.add("animate");

上述代码中，大家使用了#text选择器来设置文字的样式，包括字体大小、字体类型、颜色等等，同时也设置了一个右边框。大家还使用了一些附加的属性来控制文字的换行、文本溢出等问题。

接下来，大家为元素添加了一个animate的 CSS 类，并为其设置了一个名为type的关键帧动画。动画的效果是在 2 秒内，文字从未显示到完全显示，达成了一个打字的效果。大家使用了steps()函数来控制动画的精度，让文字一步步出现。

最后，在 JavaScript 中大家通过getElementById()方法获取到文本元素，并为其添加了animate类，从而使动画开始。

使用 CSS3 动画打字效果，可以让大家的页面更加生动、有趣，引起用户的兴趣和注意。同时，如果结合多种动画方式和效果，可以创造出更加炫酷的展示效果。