开发商前缀
-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>