开发商前缀
-moz- Firefox
-webkit- Chrome和Safari
-ms- Internet Explorer
-o- Opera
伪类创造的交互性虽好，但已经有点过时了。主要问题是—太突然了。换句话说，如果使用了:hover伪类，鼠标放上去马上换样式，鼠标一离开马上就没有，太突然了。太突然了就显得不自然了。CSS3提供了过渡（transition）功能，可以从一组样式平滑地切换到另一组样式
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> article:nth-child(1) { text-align: justify; /* 实现两端对齐文本效果 */ -webkit-column-count: 3; } article:nth-child(2) { text-align: justify; /* 实现两端对齐文本效果 */ -webkit-column-width: 10em; -webkit-column-gap: 2em; -webkit-column-rule:3px outset #ff00ff; } button { color: #fff; padding: 10px; border: 1px solid black; background: lightgreen; -webkit-transition: background 0.5s, color 0.5s; -o-transition: all 0.5s; } button:hover { color: black; background: yellow; } img { width: 200px; padding: 10px; border: 1px solid #000; background-color: #fff; -webkit-transition: all 1s; } img:hover { -webkit-transform: scale(2.2) rotate(10deg); } </style> </head> <body> <button>Hover here!</button> <img src="http://ww4.sinaimg.cn/bmiddle/66ced710gw1e8ffqkmbwij20jo0czmyj.jpg" alt="" /> <article>昨晚看《激战》，讲的两个屌丝逆袭的故事，这种拳拳到肉的搏击片真是过瘾。张家辉为这片子把自己身材练成这样儿，还有比这更励志的吗？不过前面近二十分钟铺垫实在无味，持剪刀者心太软。昨晚看《激战》，讲的两个屌丝逆袭的故事，这种拳拳到肉的搏击片真是过瘾。张家辉为这片子把自己身材练成这样儿，还有比这更励志的吗？不过前面近二十分钟铺垫实在无味，持剪刀者心太软。昨晚看《激战》，讲的两个屌丝逆袭的故事，这种拳拳到肉的搏击片真是过瘾。张家辉为这片子把自己身材练成这样儿，还有比这更励志的吗？不过前面近二十分钟铺垫实在无味，持剪刀者心太软。昨晚看《激战》，讲的两个屌丝逆袭的故事，这种拳拳到肉的搏击片真是过瘾。张家辉为这片子把自己身材练成这样儿，还有比这更励志的吗？不过前面近二十分钟铺垫实在无味，持剪刀者心太软。昨晚看《激战》，讲的两个屌丝逆袭的故事，这种拳拳到肉的搏击片真是过瘾。张家辉为这片子把自己身材练成这样儿，还有比这更励志的吗？不过前面近二十分钟铺垫实在无味，持剪刀者心太软。昨晚看《激战》，讲的两个屌丝逆袭的故事，这种拳拳到肉的搏击片真是过瘾。张家辉为这片子把自己身材练成这样儿，还有比这更励志的吗？不过前面近二十分钟铺垫实在无味，持剪刀者心太软。昨晚看《激战》，讲的两个屌丝逆袭的故事，这种拳拳到肉的搏击片真是过瘾。张家辉为这片子把自己身材练成这样儿，还有比这更励志的吗？不过前面近二十分钟铺垫实在无味，持剪刀者心太软。昨晚看《激战》，讲的两个屌丝逆袭的故事，这种拳拳到肉的搏击片真是过瘾。张家辉为这片子把自己身材练成这样儿，还有比这更励志的吗？不过前面近二十分钟铺垫实在无味，持剪刀者心太软。昨晚看《激战》，讲的两个屌丝逆袭的故事，这种拳拳到肉的搏击片真是过瘾。张家辉为这片子把自己身材练成这样儿，还有比这更励志的吗？不过前面近二十分钟铺垫实在无味，持剪刀者心太软。昨晚看《激战》，讲的两个屌丝逆袭的故事，这种拳拳到肉的搏击片真是过瘾。张家辉为这片子把自己身材练成这样儿，还有比这更励志的吗？不过前面近二十分钟铺垫实在无味，持剪刀者心太软。昨晚看《激战》，讲的两个屌丝逆袭的故事，这种拳拳到肉的搏击片真是过瘾。张家辉为这片子把自己身材练成这样儿，还有比这更励志的吗？不过前面近二十分钟铺垫实在无味，持剪刀者心太软。昨晚看《激战》，讲的两个屌丝逆袭的故事，这种拳拳到肉的搏击片真是过瘾。张家辉为这片子把自己身材练成这样儿，还有比这更励志的吗？不过前面近二十分钟铺垫实在无味，持剪刀者心太软。</article> <article>昨晚看《激战》，讲的两个屌丝逆袭的故事，这种拳拳到肉的搏击片真是过瘾。张家辉为这片子把自己身材练成这样儿，还有比这更励志的吗？不过前面近二十分钟铺垫实在无味，持剪刀者心太软。昨晚看《激战》，讲的两个屌丝逆袭的故事，这种拳拳到肉的搏击片真是过瘾。张家辉为这片子把自己身材练成这样儿，还有比这更励志的吗？不过前面近二十分钟铺垫实在无味，持剪刀者心太软。昨晚看《激战》，讲的两个屌丝逆袭的故事，这种拳拳到肉的搏击片真是过瘾。张家辉为这片子把自己身材练成这样儿，还有比这更励志的吗？不过前面近二十分钟铺垫实在无味，持剪刀者心太软。昨晚看《激战》，讲的两个屌丝逆袭的故事，这种拳拳到肉的搏击片真是过瘾。张家辉为这片子把自己身材练成这样儿，还有比这更励志的吗？不过前面近二十分钟铺垫实在无味，持剪刀者心太软。昨晚看《激战》，讲的两个屌丝逆袭的故事，这种拳拳到肉的搏击片真是过瘾。张家辉为这片子把自己身材练成这样儿，还有比这更励志的吗？不过前面近二十分钟铺垫实在无味，持剪刀者心太软。昨晚看《激战》，讲的两个屌丝逆袭的故事，这种拳拳到肉的搏击片真是过瘾。张家辉为这片子把自己身材练成这样儿，还有比这更励志的吗？不过前面近二十分钟铺垫实在无味，持剪刀者心太软。昨晚看《激战》，讲的两个屌丝逆袭的故事，这种拳拳到肉的搏击片真是过瘾。张家辉为这片子把自己身材练成这样儿，还有比这更励志的吗？不过前面近二十分钟铺垫实在无味，持剪刀者心太软。昨晚看《激战》，讲的两个屌丝逆袭的故事，这种拳拳到肉的搏击片真是过瘾。张家辉为这片子把自己身材练成这样儿，还有比这更励志的吗？不过前面近二十分钟铺垫实在无味，持剪刀者心太软。昨晚看《激战》，讲的两个屌丝逆袭的故事，这种拳拳到肉的搏击片真是过瘾。张家辉为这片子把自己身材练成这样儿，还有比这更励志的吗？不过前面近二十分钟铺垫实在无味，持剪刀者心太软。昨晚看《激战》，讲的两个屌丝逆袭的故事，这种拳拳到肉的搏击片真是过瘾。张家辉为这片子把自己身材练成这样儿，还有比这更励志的吗？不过前面近二十分钟铺垫实在无味，持剪刀者心太软。昨晚看《激战》，讲的两个屌丝逆袭的故事，这种拳拳到肉的搏击片真是过瘾。张家辉为这片子把自己身材练成这样儿，还有比这更励志的吗？不过前面近二十分钟铺垫实在无味，持剪刀者心太软。昨晚看《激战》，讲的两个屌丝逆袭的故事，这种拳拳到肉的搏击片真是过瘾。张家辉为这片子把自己身材练成这样儿，还有比这更励志的吗？不过前面近二十分钟铺垫实在无味，持剪刀者心太软。</article> </body> </html>