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

↗☻【HTML5秘籍 #BOOK#】第8章 使用CSS3的更多相关文章

  1. HTML5秘籍(第2版) 中文pdf扫描版

      HTML5秘籍(第2版)共包括四个部分,共13章.第一部分介绍了HTML5的发展历程,用语义元素构造网页,编写更有意义的标记,以及构建更好的Web表单.第二部分介绍了HTML5中的音频与视频.CS ...

  2. 《HTML5秘籍》学习总结--2016年7月24日

    前段时间因为工作中看到同事使用了一个type为date的<input>元素,直接就形成了一个日期选择的表单控件,当时觉得很神奇,以为是什么插件,就问了同事是怎么做出来的,同事告诉我这是HT ...

  3. 第四章初始CSS3预习笔记

    第四章 初始CSS3预习笔记 一: 1: 什么是CSS? 全称是层叠样式表;/通常又称为风格样式表,.他是用来进行网页风格设计的; 2:CSS的优势: 1>内容以表现分离,即使用u前面学习的HT ...

  4. 学习笔记 第十四章 使用CSS3动画

    第14章   使用CSS3动画 [学习重点] 设计2D动画 设计3D动画 设计过渡动画 设计帧动画 能够使用CSS3动画功能设计页面特效样式 14.1  设计2D动画 CSS2D Transform表 ...

  5. 学习笔记 第十三章 使用CSS3新布局

    第13章   使用CSS3新布局 [学习重点] 设计多列布局 设计弹性盒布局样式 使用CSS3布局技术设计适用移动需求的网页 13.1  多列布局 CSS3使用columns属性定义多列布局,用法如下 ...

  6. CSS3秘笈第三版涵盖HTML5学习笔记9~12章

    第9章,装饰网站导航 限制访问,处于隐私方面考虑,浏览器已经开始限制可以对伪类:visited应用哪些CSS属性了.其中包括对已访问过的链接定义color.background-color.borde ...

  7. CSS3秘笈第三版涵盖HTML5学习笔记6~8章

    第二部分----CSS实用技术 第6章,文本格式化 指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...

  8. CSS3秘笈第三版涵盖HTML5学习笔记1~5章

    第一部分----CSS基础知识 第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中 ...

  9. CSS3秘笈第三版涵盖HTML5学习笔记13~17章

    第13章,构建基于浮动的布局 使用的是float(浮动)属性 注:float:none值将取消所有浮动,通常只用来取消元素中已经应用的浮动. 切记:不需要给正文的div设计宽度,即使设计成固定宽度也不 ...

随机推荐

  1. WCF 傻瓜教程

    第一步,新建WCF服务应用程序 第二步,定义接口: 修改接口类,定义你要的方法接口默认文件名:IService1.cs 第三步,实现接口: 在svc文件里实现接口方法,默认文件名:Service1.s ...

  2. ARC工程中添加非ARC文件

    转载自:http://blog.csdn.net/zhenweicao/article/details/16988543 分类: IOS2013-11-27 17:02 626人阅读 评论(0) 收藏 ...

  3. 使用tolua++编译pkg，从而创建自定义类让Lua脚本使用

    步骤一:首先自定义类(这里Himi自定义类名 “MySprite”) MySprite.h 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // //  ...

  4. windows 2008 R2 Activition

    无需破解:Windows Server 2008 R2 至少免费使用 900天 1.首先安装后,有一个180天的试用期. 2.在180天试用期即将结束时,使用下面的评估序列号激活Svr 2008 R2 ...

  5. python中变量

    在Python中,变量的概念基本上和初中代数的方程变量是一致的. 例如,对于方程式 y=x*x ,x就是变量.当x=2时,计算结果是4,当x=5时,计算结果是25. 只是在计算机程序中,变量不仅可以是 ...

  6. ExtJs 自定义Vtype验证

    最近公司开发项目在用ExtJs,碰到验证的就大概的总结了一些常用的验证.自定义的验证主要有两种方式:一种是单字段的自定义验证,另一种是多字段间的验证.对于单字段的验证主要通过regex配置项指定自定义 ...

  7. php数组内容分页的例子(转)

    php数组内容分页代码 时间:2016-03-04 23:46:34来源:网络 导读:php数组内容分页代码,当前页如果大于总页数,当前页为最后一页,分页显示时,应该从多少条信息开始读取数据.   p ...

  8. 1056: [HAOI2008]排名系统 - BZOJ

    Description 排名系统通常要应付三种请求:上传一条新的得分记录.查询某个玩家的当前排名以及返回某个区段内的排名记录.当某个玩家上传自己最新的得分记录时,他原有的得分记录会被删除.为了减轻服务 ...

  9. FileFilter

    FileFilter 下面的例子中我们创建了一个FileFilter类,此类根据文件名的扩展名是否为.png来筛选文件.创建FileFilter实例之后需要将此实例作为参数传给File的listFil ...

  10. Spring MVC与表单日期提交的问题

    Spring MVC与表单日期提交的问题 spring mvc 本身并不提供日期类型的解析器,需要手工绑定, 否则会出现非法参数异常. org.springframework.beans.BeanIn ...