gpt4 book ai didi

css - 如何为 :before on webkit browsers? 之类的伪元素设置动画

转载 作者:行者123 更新时间:2023-12-02 05:04:44 25 4
gpt4 key购买 nike

<分区>

Possible Duplicate:
CSS3 transitions on pseudo-elements (:after, :before) not working?

我的 CSS 过渡只能在 Firefox 中工作...不知道为什么它在 chrome、safari 或 Opera 中没有动画效果。

这是一个 fiddle :http://jsfiddle.net/chovy/HUDuy/

HTML:

<ol class="steps">
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ol>

CSS:

ol.steps {
list-style-type: none;
counter-reset: step-counter;
padding-left: 60px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

ol.steps li {
position: relative;
padding: 10px 20px;
height: 50px;
}

ol.steps li:before {
content: counter(step-counter, decimal);
counter-increment: step-counter;
position: absolute;
left: -50px;
top: 10px;
border: 1px solid #ccc;
width: 45px;
height: 45px;
line-height: 45px;
border-radius: 50px;
background: #f9f9f9;
text-align: center;
font-size: 28px;
color: #aaa;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}

ol.steps li:hover:before {
width: 60px;
height: 60px;
line-height: 60px;
left: -57px;
top: 2px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com