老师我这个实现的效果有点问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2-2</title>
<style type="text/css">
div {
font-family: 'Microsoft Yahei';
font-size: 60px;
font-weight: bold;
line-height: 600px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 800px;
height: 600px;
margin: auto;
text-align: center;
border: 5px solid #000;
border-radius: 50%;
-webkit-animation-name: color;
-o-animation-name: color;
animation-name: color;
-webkit-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: ease-in-out;
-o-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
/*此处写代码*/
}
@keyframes color {
from { top: -2000px; }
to { opacity: 500px; }
}
</style>
</head>
<body>
<div>大家好，欢迎来到慕课网！</div>
</body>
</html>
正在回答
同学你好，效果图中显示出来就恢复到原来状态了，代码没有问题。
如果想动画停在结束位置，可以在div中添加如下属性
后面小节中会讲解这个属性，这里可以先了解一下。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星