开发商前缀
-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. 拓展：return和print的使用时机

    拓展:return和print的使用时机  一直纠结函数里的return用法.以下内容摘自百度知道..def 是用来定义函数的一个关键字,只有在函数的定义时用到他.Python 函数定义的语法:def ...

  2. 开始学习python

    刚刚离开学校,到公司实习,发现所有的技术都是崭新的,所有的工具都是熟悉中带着陌生. 就像是孤身一人到了一个曾经只闻其名的偌大城市,看什么都觉得新鲜,做什么都心有畏惧.幸好 搞软件并没有那么多人情世故, ...

  3. Have Fun with Numbers (大数)

    Notice that the number 123456789 is a 9-digit number consisting exactly the numbers from 1 to 9, wit ...

  4. 1.JSP 简介及工作原理

    1.JSP 简介 JSP(Java Server Pages)是由Sun Microsystems公司倡导.许多公司参与一起建立的一种动态网页技术标准.JSP技术有点类似ASP技术,它是在传统的网页H ...

  5. IE10用video标签播放本地mp4文件失败的解决办法

    1. 首先用“格式工厂”将要播放的视频文件按照“AVC高质量与大小”转换为要求格式的mp4文件: 2. 设置IIS7.5,添加mp4的MIME类型,步骤如下: 1.打开IIS管理器(运行inetmgr ...

  6. Java中的IO流系统详解

    Java 流在处理上分为字符流和字节流.字符流处理的单元为 2 个字节的 Unicode 字符,分别操作字符.字符数组或字符串,而字节流处理单元为 1 个字节,操作字节和字节数组. Java 内用 U ...

  7. H2嵌入式数据库的各种连接方式

    H2database是一款用java语言编写的开源数据库, 一般用作游戏的数据存储, 当然web项目也是可以用的, web项目也可以将该数据库 首先要安装H2数据库 http://www.h2data ...

  8. linux du 与 df 命令

    du 命令:显示每个文件和目录的磁盘使用空间 命令格式:du [选项][文件] -k或--kilobytes  以KB(1024bytes)为单位输出. -m或--megabytes  以MB为单位输 ...

  9. python 记录日志logging

    在项目开发中,往往要记录日志文件.用python记录日志有两种方式: 1.利用python 自带的logging库,例如: # -*- coding: utf-8 -*- import osimpor ...

  10. 【数学】[BZOJ 3884] 上帝与集合的正确用法

    Description 根据一些书上的记载,上帝的一次失败的创世经历是这样的: 第一天, 上帝创造了一个世界的基本元素,称做“元”. 第二天, 上帝创造了一个新的元素,称作“α”.“α”被定义为“元” ...