我有这个:
div {
position: relative;
width: 20px;
height: 100px;
border-radius: 10px;
background: green;
margin: 0 auto;
transform-origin: 10px 10px;
animation: rotate 1s ease-in-out infinite alternate;
}
@keyframes rotate {
from {transform: rotate(-30deg);}
to {transform: rotate(30deg);}
}
hr {
position: relative;
top: -10px;
}
<div></div>
<hr>
但我想要这样的事情:
div {
position: relative;
width: 20px;
height: 100px;
border-radius: 10px;
background: green;
margin: 0 auto;
transform-origin: 10px 10px;
animation: rotate 1s ease-in-out infinite alternate, translate 0.5s ease-in-out infinite alternate;
}
@keyframes rotate {
from {transform: rotate(-30deg);}
to {transform: rotate(30deg);}
}
@keyframes translate {
from {top: 10px;}
to {top: 0px;}
}
hr {
position: relative;
top: -10px;
}
<div></div>
<hr>
编辑:我可能没解释得这么好。我的意思是,是否有一种方法可以让div的底部触及线条,使用任何类型的动画来上下移动它?我希望它是动态的,所以如果我改变旋转的值,我就不必计算和改变翻译的值。
EDIT2:简单地说:我只想让div做第二个例子正在做的事情而不需要垂直移动的特定值。
答案 0 :(得分:1)
你应该玩价值观以使其完美,但这就是这个想法:
div {
position: relative;
width: 20px;
height: 100px;
border-radius: 10px;
background: green;
margin: 0 auto;
transform-origin: 10px 10px;
animation: rotate 1s ease-in-out infinite alternate;
}
@keyframes rotate {
0% {transform: rotate(-30deg); top: 10px;}
50% {top: 0px;}
100% {transform: rotate(30deg); top: 10px;}
}
hr {
position: relative;
top: -10px;
}
<div></div>
<hr>
答案 1 :(得分:0)
我不确定这是你所期望的,但我会试一试。
uint8_t value;
for (uint16_t a = 0; a < 32768; a++) {
value = fram.read8(a);
if ((a % 32) == 0) {
Serial.print("\n 0x"); Serial.print(a, HEX); Serial.print(": ");
}
Serial.print("0x");
if (value < 0x1)
Serial.print('0');
Serial.print(value, HEX); Serial.print(" ");
}
* {
margin: 0;
padding: 0;
}
div {
width: 20px;
height: 100px;
border-radius: 10px;
background: green;
margin: 0 auto;
transform-origin: 10px 10px;
animation: rotate 1s ease-in-out infinite alternate, stretch 1s ease-in-out infinite;
}
hr {
position: absolute;
top: 99px;
width: 99%;
}
@keyframes rotate {
from {
transform: rotate(-30deg);
}
to {
transform: rotate(30deg);
}
}
@keyframes stretch {
0% {
height: 112px;
}
50% {
height: 100px;
}
100% {
height: 112px;
}
}