双箭头CSS
问题描述:
答
我只是用:之前和复制你使用的CSS的:之后,只有改变的margin-top和位置。
#basso
\t {
\t text-align: center;
\t display: inline-block;
\t vertical-align: middle;
\t }
\t #bottom
\t {
\t display: inline-block;
\t border-radius: 50%; \t
\t }
\t #freccia:hover #bottom
\t {
\t display: inline-block;
\t border-radius: 50%;
\t border: 0.15em solid #4183D7;
\t }
\t #freccia:hover #bottom:after
\t {
\t border-top: 0.15em solid #4183D7;
\t border-right: 0.15em solid #4183D7;
\t }
\t #bottom
\t {
\t display: inline-block;
\t width: 3em;
\t height: 3em;
\t border: 0.15em solid #333;
\t border-radius: 50%;
\t margin-left: 0.75em;
\t transition: all 0.1s ease-out;
\t
\t
\t }
\t #bottom:after
\t {
\t content: '';
\t display: inline-block;
\t margin-top: 0.6em;
\t width: 1.2em;
\t height: 1.2em;
\t border-top: 0.15em solid #333;
\t border-right: 0.15em solid #333;
\t -moz-transform: rotate(135deg);
\t -webkit-transform: rotate(135deg);
\t transform: rotate(135deg);
\t transition: all 0.1s ease-out;
\t }
\t \t #bottom:before
\t {
\t \t position: absolute;
\t content: '';
\t display: inline-block;
\t margin-top: 0.3em;
\t width: 1.2em;
\t height: 1.2em;
\t border-top: 0.15em solid #333;
\t border-right: 0.15em solid #333;
\t -moz-transform: rotate(135deg);
\t -webkit-transform: rotate(135deg);
\t transform: rotate(135deg);
\t transition: all 0.1s ease-out;
\t }
\t #bottom:hover:after
\t {
\t content: '';
\t display: inline-block;
\t margin-top: 0.9em;
\t width: 1.2em;
\t height: 1.2em;
\t border-top: 0.15em solid #4183D7;
\t border-right: 0.15em solid #4183D7;
\t -moz-transform: rotate(135deg);
\t -webkit-transform: rotate(135deg);
\t transform: rotate(135deg);
\t }
\t
\t #bottom:hover:before
\t {
\t content: '';
\t display: inline-block;
\t margin-top: 0.6em;
\t width: 1.2em;
\t height: 1.2em;
\t border-top: 0.15em solid #4183D7;
\t border-right: 0.15em solid #4183D7;
\t -moz-transform: rotate(135deg);
\t -webkit-transform: rotate(135deg);
\t transform: rotate(135deg);
\t }
<div id="basso">
<a href="#" id="freccia">
<span id="bottom"></span>
</a>
</div>
您使用的边距是有点过分,它扩大了一圈。只有你错过了:徘徊你没有改变到正确的颜色。 –