符号与文字不符

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); }
}

#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;
    }

<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 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

检查这个

Fiddle

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

符号与文字不符

Symbol is not in line with text

html

css

text

symbols