开发商前缀
-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. zhuan:点滴记录——Ubuntu 14.04中gedit打开文件出现中文乱码问题

    在中文支持配置还不完整的Ubuntu 14.04中,使用gedit打开带有中文字符的文件有时会出现乱码的情况,这是由于gedit对字符编码匹配不正确导致的,解决方法如下: 在终端中输入如下命令,然后重 ...

  2. Linux进程间通信IPC学习笔记之有名管道

    基础知识: 有名管道,FIFO先进先出,它是一个单向(半双工)的数据流,不同于管道的是:是最初的Unix IPC形式,可追溯到1973年的Unix第3版.使用其应注意两点: 1)有一个与路径名关联的名 ...

  3. HighCharts 根据spline-plot-bands图，定制自己的图(区间里显示多个数据)

    公司项目里有这样一个需求,根据数据绘图,但是数据很多,不可能每个点每个点的去画,这样显示的数据太密集非常的难看(更显得技术不专业),如图: 所以我和项目经理商量如何显示这个图形,按照他的意思是,按照范 ...

  4. CentOS安装crontab及使用方法

    crontab命令常见于Unix和类Unix的操作系统之中,用于设置周期性被执行的指令.该命令从标准输入设备读取指令,并将其存放于 “crontab”文件中,以供之后读取和执行.通常,crontab储 ...

  5. eval()字符串转成对象

    var s = "{a:1,b:2}"; console.log(typeof s); s = eval("(" + s + ")"); c ...

  6. 团体程序设计天梯赛-练习集L1-005. 考试座位号

    L1-005. 考试座位号 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 每个PAT考生在参加考试时都会被分配两个座位号,一个 ...

  7. Firefly的角色跳转场景简单示例

    源地址:http://bbs.9miao.com/thread-45790-1-2.html 本例演示的是模拟游戏服务端,让角色在场景1中跳转到场景2中.在实际游戏中,client将要跳转的角色id和 ...

  8. HDU4608+模拟

    简单的模拟题. 暴力枚举 /* 模拟 */ #include<algorithm> #include<iostream> #include<string.h> #i ...

  9. 【转】linux常用命令全集

    linux常用命令全集

  10. Linux下Keepalived 安装与配置

    Keepalived 安装与配置 一.环境说明 1.操作系统内核版本:2.6.9-78.ELsmp 2.Keepalived软件版本:keepalived-1.1.20.tar.gz 二.环境配置 1 ...