这个怎么样?请给点意见,谢谢!
来源:2-29 编程练习
永不止息L
2017-02-16 01:12:52
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2-9</title>
<style type="text/css">
div {
font-family: Arial;
font-size: 72px;
font-weight: bold;
position: fixed;
right: 0;
left: 0;
width: 30px;
height: 30px;
margin: auto;
transform: rotate(90deg);
/*此处写代码*/
-webkit-animation:div .09s linear 5s infinite alternate;
}
@keyframes div{from{bottom:30px;}to{bottom:5px; }}
</style>
</head>
<body>
<div>></div>
</body>
</html>这个怎么样?请给点意见,谢谢!
1回答
你的这个代码运行之后会发现最开始的时候的那个小箭头会在屏幕的最上方而不是最下方,然后在延迟5s之后那个小箭头突然的跑到了下面,这样的效果似乎不太好,我觉得最开始你的小箭头就应该在屏幕的最下方,解决方法就是你可以在这个div{}里面在添加一句话:bottom:5px;这样的话就是说你的小箭头最开始的时候就在离屏幕最下方5px处停留着。
这样的表现形式应该会比你现在的这个样子表现的要好一些。
相似问题
回答 1
回答 1