Question

我有一个问题，HTML元素在动画时移动，我已经拍摄了两张照片来猜测我想要的东西......

动画前： http://i031.radikal.ru/1406/9a/41e9b81ddaed.png 动画后： http://i057.radikal.ru/1406/1b/c5e3f763fd98.png

我想要的是，在“过渡”之后，元素保持在他们的线上......

这是一些HTML和CSS代码

HTML

<div id="sliderdiv">
    <ul>
    <li>
        <div id="bullets">
        <div class="bullet" id="bul1"></div>
        <div class="bullet" id="bul2"></div>
        <div class="bullet" id="bul3"></div>
        <div class="bullet" id="bul4"></div>
        <div class="bullet" id="bul5"></div>
        </div>
    </li>
    <li>
        <div id="sliderimages">
            <img src="sliderimages/bilberry.png">
            <img src="sliderimages/dogrose.png">
            <img src="sliderimages/dryedbilberry.png">
            <img src="sliderimages/dryeddogrose.png">
            <img src="sliderimages/dryedherbs.png">
            <img src="sliderimages/wildapple.png">
        </div>
    </li>
    <li>
    <div id="arrows">
    <div id="slideup"></div>
    <div id="slidedown"></div>
    </div>
    </li>
    </ul>

CSS

#sliderdiv{
    text-align: center;
    padding-top: 40px;
    height: 771px;
    width: 100%;
}

#sliderimages{
    overflow: hidden;
    text-align: center;
    height: 771px;
    width: 1187px;
}

#sliderdiv ul li{
    list-style: none;
    display: inline-block;
}

#arrows{
    width: 26px;
    margin-left: 5px;
}

#slideup{
    margin-bottom: 10px;
}

#slideup{
    cursor: pointer;
    width: 26px;
    height: 18px;
    background-image: url('slideup.png');
    -webkit-transition: background-image 0.5s ease-in-out;
    -moz-transition: background-image 0.5s ease-in-out;
    -ms-transition: background-image 0.5s ease-in-out;
    -o-transition: background-image 0.5s ease-in-out;
    transition: background-image 0.5s ease-in-out;
}


#slideup:hover{
    background-image: url('slideuph.png');
    -webkit-transition: background-image 0.5s ease-in-out;
    -moz-transition: background-image 0.5s ease-in-out;
    -ms-transition: background-image 0.5s ease-in-out;
    -o-transition: background-image 0.5s ease-in-out;
    transition: background-image 0.5s ease-in-out;
}

#slidedown{
    cursor: pointer;
    overflow: hidden;
    margin-bottom: 380px;
    width: 26px;
    height: 18px;
    background-image: url('slidedown.png');
    -webkit-transition: background-image 0.5s ease-in-out;
    -moz-transition: background-image 0.5s ease-in-out;
    -ms-transition: background-image 0.5s ease-in-out;
    -o-transition: background-image 0.5s ease-in-out;
    transition: background-image 0.5s ease-in-out;
}


#slidedown:hover{
    background-image: url('slidedownh.png');
    -webkit-transition: background-image 0.5s ease-in-out;
    -moz-transition: background-image 0.5s ease-in-out;
    -ms-transition: background-image 0.5s ease-in-out;
    -o-transition: background-image 0.5s ease-in-out;
    transition: background-image 0.5s ease-in-out;
}

.bullet{
    position: relative;
    background-color: #747474;
    width: 10px;
    height: 10px;
    margin-bottom: 15px;
    border-radius: 30px;
    border: none;
    -webkit-transition: background-color, border 0.2s ease-in-out;
    -moz-transition: background-color, border 0.2s ease-in-out;
    -ms-transition: background-color, border 0.2s ease-in-out;
    -o-transition: background-color, border 0.2s ease-in-out;
    transition: background-color, border 0.2s ease-in-out;
}

.bullet:last-child{
    margin-bottom: 350px; 
}

.bullet:hover{
    border-left: 5px;
    border: solid 5px #747474;
    background-color: #eeeeee;
    -webkit-transition: background-color, border 0.2s ease-in-out;
    -moz-transition: background-color, border 0.2s ease-in-out;
    -ms-transition: background-color, border 0.2s ease-in-out;
    -o-transition: background-color, border 0.2s ease-in-out;
    transition: background-color, border 0.2s ease-in-out;
}

.bullet:last-child:hover{
    margin-bottom: 350px; 
}

#bullets{
    margin-right: 10px;
}

Answer 1

尝试将此添加到您的课程中：

.bullet{
    position: relative;
}

.bullet:hover{
    right: 5px;
    top: -5px;
    margin-bottom: 5px;
}

Answer 2

您可以将border属性的初始值设置为5px solid #FFFFFF到.bullet选择器。假设此处颜色#FFFFFF是页面的背景颜色（因此它看起来是透明的）。

当鼠标悬停在项目符号上时，在伪选择器border内使用单个手写属性border-color: #747474;替换:hover速记属性，而border-width和border-style将是继承自初始边界值5px和solid

DEMO

动画时HTML元素的移动很糟糕

2 个答案: