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

html-css037

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实现了按钮中间白、四周黑，上方白、下方灰的效果。