css文字移动淡出效果 |dwcss规则定义中文

css 线条箭头，css图像热区，css字体描边阴影，css多行多列排列，css 外部样式优先级，css 无序列表点变大，dwcss规则定义中文 css文字移动淡出效果 |dwcss规则定义中文

/*样式代码*/
.move-fade {
animation: move-fade 2s linear forwards;
opacity: 0;
position: relative;
left: 100px;
}
@keyframes move-fade {
0% {
opacity: 0;
left: 100px;
}
25% {
opacity: 1;
left: 50px;
}
75% {
opacity: 1;
left: 200px;
}
100% {
opacity: 0;
left: 200px;
}
}

这里大家定义一个类名为“move-fade”的样式，然后用CSS3的animation属性定义了关键帧动画“move-fade”，并给元素设置了一个初始值，位置是相对于文档左侧100个像素。

在动画中大家设定了四个关键帧（0%、25%、75%、100%），每个关键帧的位置和透明度都有更改，这样就可以让文字看起来淡出，并在移动的过程中增加生动感。

最后一步是将这个类名加入到想要使用它的元素上：

<p class="move-fade">这里的文字将会在页面上移动淡出.</p>

完整的示例代码：

<!DOCTYPE html>
<html>
<head>
<title>CSS Text Move-Fade Effect</title>
<style>
.move-fade {
animation: move-fade 2s linear forwards;
opacity: 0;
position: relative;
left: 100px;
}
@keyframes move-fade {
0% {
opacity: 0;
left: 100px;
}
25% {
opacity: 1;
left: 50px;
}
75% {
opacity: 1;
left: 200px;
}
100% {
opacity: 0;
left: 200px;
}
}
</style>
</head>
<body>
<p class="move-fade">这里的文字将会在页面上移动淡出.</p>
</body>
</html>

如此一来，页面上的文字就会在精彩的效果中逐渐消失。