CSS中transition属性不起作用的原因及解决方法(2)-木庄网络博客

2022-03-27 22:27:41 PHP中文网 JavaScript 百度已收录

HTML

<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>

CSS

p {
  width:100px;
  background-color:red;
  transition-duration: 2s;
  transition-property:width;
}
p:hover {
  width:420px;
  background-color:blue;
}

当鼠标没有放在上面的时候，浏览器上显示效果如下

2345截图20181128135246.png

当鼠标放到红色背景上面的时候，浏览器上显示效果如下：

2345截图20181128134923.png

p标签中指定了width : 100px和background-color:red;这样的话当宽度是100px时，背景是红色。下面指定了transition-duration: 2s;

这样的话，transtion实现的效果从开始到结束的时间是2秒。

最后是transition-property:width;应用transition属性的效果仅为width。

：hover中指定width : 420px和background - color:blue,这样，移动鼠标到上面的时候，宽度变为420px，背景变为蓝色。

如果鼠标悬停，宽度将为420px，背景将为蓝色，但过渡效果仅为宽度。2秒的变化只有宽度。由于转换效果不适用于指定背景颜色，因此只要将鼠标悬停在上面，它就会变为蓝色。

以上就是CSS中transition属性不起作用的原因及解决方法的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » CSS中transition属性不起作用的原因及解决方法

CSS中transition属性不起作用的原因及解决方法

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论