Question

我想为此箭头制作动画，但由于某种原因，它与文字不符。请问你能帮帮我吗？：）

<div id="blogtitle">
<center>
<div id="arrow">&#11015;</div>
<div style="font-size:18px">Now go <span style="color:{color:permalink border}">that way</span></div>
</center>

编辑：This is what bothers me箭头略低于文字。

Answer 1

您可以更改转换值：

@-webkit-keyframes bounce {
0%, 20%, 60%, 100%  { -webkit-transform: translateY(-5px); }
40%  { -webkit-transform: translateY(-25px); }
80% { -webkit-transform: translateY(-15px); }
}

＆＃13;

#arrow {
    color:{color:permalink border};
    font-size:18px;
    float:left;
    -webkit-animation: bounce 2s infinite ease-in-out;
   
}


@-webkit-keyframes bounce {
	0%, 20%, 60%, 100%  { -webkit-transform: translateY(-5px); }
    40%  { -webkit-transform: translateY(-25px); }
	80% { -webkit-transform: translateY(-15px); }
}

#blogtitle{
    position:relative;
    height:auto;
    z-index:5;
    text-transform:uppercase;
    color:{color:blog title};
    font-size:150px;
    letter-spacing:2px;
    font-weight:bold;
    text-align:left;
    width:250px;
    padding-top: 10px;
    padding-left: 10px;
    }

＆＃13;

<div id="blogtitle">
	<center>
	<div id="arrow">&#11015;</div>
	<div style="font-size:18px">Now go <span style="color:{color:permalink border}">that way</span></div>
	</center>
	    
	    
	</div>

＆＃13;

Answer 2

这是由于float属性。添加否定margin以抵消它......

#arrow {
 font-size: 18px;
  -webkit-animation: bounce 2s infinite ease-in-out;
  margin-top: -2px; /* edit as you need */
  float: left;
}

jsfiddle

#arrow {
  font-size: 18px;
  -webkit-animation: bounce 2s infinite ease-in-out;
  margin-top: -2px;
  float: left;
}

@-webkit-keyframes bounce {
  0%,
  20%,
  60%,
  100% {
    -webkit-transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-20px);
  }
  80% {
    -webkit-transform: translateY(-10px);
  }
}

#blogtitle {
  position: relative;
  height: auto;
  z-index: 5;
  text-transform: uppercase;
  color: {
    color: blog title
  }
  ;
  font-size:150px;
  letter-spacing:2px;
  font-weight:bold;
  text-align:left;
  width:250px;
  padding-top: 10px;
  padding-left: 10px;
}

<div id="blogtitle">
  <center>
    <div id="arrow">&#11015;</div>
    <div style="font-size:18px">Now go <span style="color:{color:permalink border}">that way</span></div>
  </center>


</div>

Answer 3

检查

Zaphod

<div id="arrow" style=" margin-top: -3px;">⬇</div>

符号与文本不符

3 个答案: