关于编程问题
来源：3-1 @keyframes
qq_世味_0
2017-03-03 10:04:29
<!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;
top:800px;
right: 0;
left: 0;
width: 30px;
height: 30px;
margin: auto;
transform: rotate(90deg);
animation: down 1s linear infinite;
}
@keyframes down{
form{transform: translateY(0px);}
to{transform: translateY(5px);}
}
</style>
</head>
<body>
<div>></div>
</body>
</html>
为啥我这总是拐弯。。。。
2回答
-
Hew_520
2017-03-06
@keyframes down{
form{transform: translateY(0px) rotate(90deg);}
to{transform: translateY(5px) rotate(90deg);}
}
欢迎采纳。
0 -
小于飞飞
2017-03-03
注意可以测试下，transform: rotate和transform: translate分开写，相应属性会失效，可以看做是一个属性，后面的覆盖了前面的，transform运用多个值时，其之间必须使用空格分隔， 要这样写如：transform: rotate(90deg) translate(0); 另一种思路：@keyframes中改变的是top或者bottom值，也可以实现。希望对你有帮助，祝学习愉快，欢迎采纳。
0
相似问题