css3 display none 到 display block 有过渡效果没

html-css024

css3 display none 到 display block 有过渡效果没,第1张

display:none到displayblock是没有过渡效果的,也就是说transform里的函数配合transition都没法用,display:none说是会使浏览器重绘,在display:none到display:block中先执行了transform里的动作,最后才显示display:block的,原因就是W3C渲染就是这样的。希望我理解的正确,有更好解释可以多多指教吧!

特殊的:在js中如果个给display:none加个延时 也是可以出现动画效果的

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:

button {width: 100pxheight: 50pxborder: 0color: whitebackground: -webkit-radial-gradient(#72787f, #545c64)}

3、浏览器运行index.html页面,此时用CSS实现了按钮中间白、四周黑,上方白、下方灰的效果。