animation2-7练习习作有点有参考吗老师

做不出来呢

Glimmering5426 2017-03-21

源自：CSS3动画 2-16 animation-iteration-count

收起

3回答

du叫兽 2017-03-30 19:33:56

仅供参考，欢迎采纳！！！

<!DOCTYPE html>

<html>

<head>

div {

font-family: 'Microsoft Yahei';

font-size: 60px;

font-weight: bold;

line-height: 600px;

position: absolute;

top: -1000px;

right: 0;

left: 0;

width: 800px;

height: 600px;

margin: auto;

text-align: center;

border: 5px solid #000;

border-radius: 50%;

animation-name: disp;

animation-duration: 10s;

animation-delay:5s;

/*此处写代码*/

}

@keyframes disp{

from{top:-1000px;}

to{top:0px;}

}

</style>

</head>

<body>

<div>大家好，欢迎来到慕课网！</div>

</body>

</html>

收起回答

提问者 Glimmering5426 2017-03-22 10:23:19

不理解keyframes前面为什么是@，还有我看animation-name:disp; 这个disp具体是什么意思

收起回答

小于飞飞 #1

@这是固定的语法呦，disp 是@keyframes 定义的名字，然后animation 直接使用disp 。

2017-03-22 12:00:14

小于飞飞 2017-03-21 17:54:50

你好，简明思路如下：

先定义div ，通过css样式设置。
通过 @keyframes 来定义动画关键帧，如题的椭圆 top值改变。
通过animation 设置，由@keyframes的相关属性。

希望对你有帮助，祝学习愉快，欢迎采纳。

收起回答

提问者 Glimmering5426 #1

不理解keyframes前面为什么是@，还有我看animation-name:disp; 这个disp具体是什么意思

2017-03-22 10:23:41
提问者 Glimmering5426 #2

<style type="text/css"> div { font-family: 'Microsoft Yahei'; font-size: 60px; font-weight: bold; line-height: 600px; position: absolute; top: -1000px; right: 0; left: 0; width: 800px; height: 600px; margin: auto; text-align: center; border: 5px solid #000; border-radius: 50%; animation-name:disp; animation-duration: 1s; animation-timing-function:linear; animation-delay:2s; animation-iteration-count: infinite; } @-webkit-keyframes disp { form { transform:translateY(-1000);} to { transform:translateY(1500); } } @keyframes disp { form { transform:translateY(-1000);} to { transform:translateY(1500); } } </style> 哪里有问题呢

2017-03-22 11:23:38
小于飞飞回复提问者 Glimmering5426 #3

你好，@keyframes中应该是 from，同时添加px单位， from { transform:translateY(-1000px);} , 也可以改变 top 的值，来达到效果。祝学习愉快。

2017-03-22 12:25:50