如何在CSS转换期间防止文本样式默认值

时间:2014-07-11 10:33:14

标签: css css-transitions

DEMO HERE

如何防止文本权重表单在转换期间更改为更粗体?最终结果两种方式都很好,但在转换过程中,文本变得更大胆。元素悬停后的元素会发生这种情况。例如。如果你将第二个事件悬停在时间轴上,第一个事件不受影响,但第二个事件本身和第三个事件。

HTML

<div class="timeline">
    <ol>
        <li>
            <span class="date">Week 1</span>Event 1
        </li>
        <li>
            <span class="date">Week 2</span>Event 2
        </li>
        <li>
            <span class="date">Week 3</span>Event 3
        </li>
    </ol>
</div>

CSS

ol {
    position: relative;
    display: block;
    margin: 100px;
    margin-top: 150px;
    height: 4px;
    background: #24ad9e;
}
ol::after {
    content: "";
    position: absolute;
    top: -8px;
    display: block;
    width: 0;
    height: 0;
    border-radius: 5px;
    border: 10px solid #24ad9e;
    right: -10px;
    border: 10px solid transparent;
    border-right: 0;
    border-left: 20px solid #24ad9e;
    border-radius: 3px;
}
.timeline ol li {
    position: relative;
    top: -76px;
    left:-50px;
    display: inline-block;
    float: left;
    width: 150px;   
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    font: 14px "Lato" Helvetica Arial;
}
.timeline ol li::before {
    content: "";
    position: absolute;
    top: 3px;
    left: -29px;
    display: block;
    width: 6px;
    height: 6px;
    border: 4px solid #24ad9e;
    background: #fff;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.date {
    color: #000;
    display: block; 
    margin-top: -17px;
}

/* Hover effects */

.timeline ol li:hover {
    cursor: pointer;
    color: #28e;
}
.timeline ol li:hover::before {
    /*top: 1px;
    left: -29px;
    width: 6px;
    height: 6px;*/
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

/* transitions */
.timeline ol li::before, .timeline ol li:hover::before {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;

1 个答案:

答案 0 :(得分:2)

使用CSS backface-visibility属性来解决此问题。请参阅此Link