SS3为用户添加了三个特殊效果的处理方式：过渡、动画、变化。当用户和界面元素交互时，使用这些特殊样式可大大改善用户的体验效果。这些效果直接由浏览器引擎处理，可以节省开销。尽管如此，它们也会耗费大量的处理能力，尤其是一些复杂的WEB页面上。即使是最基本的效果，也是如此。本篇的目的只是熟悉下这三种CSS处理效果，不推荐在实际系统中大篇幅使用。
方法/步骤
1
另外一方面，由于在CCS3标准化之前，主流浏览器都是通过添加厂商前缀方式提供样式支持。所以要解决浏览器兼容问题，使用这些样式，我们不得不为每一个样式添加各个产商前缀，例如添加一个过度延迟属性transition-delay，不得不这样写：-webkit-transition-delay: 300ms; -o-transition-delay: 300ms; -moz-transition-delay: 300ms; -ms-transition-delay: 300ms; transition-delay: 300ms;
2
效果比较简单，包括以下几点： 窗口透明度发生变化,从最初的0渐变到1。 窗口位置从浏览器底部渐变到浏览器居中位置。 窗口有一个90度的翻转效果。 窗口有遮挡层，弹窗时，遮挡层透明度从0渐变到0.7。 窗口关闭时所有动画反向执行。.dialog-root{ position: fixed; z-index: 2000; left: 50%; top: 50%; transform: translate(-50%, -50%); }
3CSS特殊效果
完整布局代码如下：
弹窗效果
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button below to close the modal.
上一篇：U盘被写保护怎么解除？（最实用）
下一篇：火车驾照的考取有什么要求和条件