~平时喜欢逛博客，看别人的学习总结和遇到的问题解决办法，恰好最近在做书签整理，翻到了之前一个前辈移动前端的总结，所以我就按他的总结模块对自己的知识进行了梳理，不过由于都是手写的，为了方便，下面的都是平时常用的。

首先，对于前端页面结构来说，总体由三个层组成：html结构层、css表现层、javascript行为层，他们相互独立而又相互依存。

由于IOS系统移动端坚决抵制FLASH等插件登陆其移动端浏览器，所以CSS3在移动端有了很大的用途，主要体现在形状和动画上。

下面结合我的学习总结（平时用得多的）分别举例说明：：：

1、圆角（ border-radius ）

四个角==  border-top-left-radius  /  border-top-right-radius  /  border-bottom-left-radius  /  border-bottom-right-radius

eg:

<!doctype html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>css3圆角效果</title>

<style>

  div{

      width:100px;

      height:100px;

      border:1px solid blue;

      -webkit-border-radius:5px;

      }

</style>

</head>

<body>

  <div></div>

</body>

</html>

2、阴影（ box-shadow / text-shadow ）

eg:

<style>

      div{

          width:150px;

          height:150px;

          background-color:#ccc;

          -webkit-box-shadow:2px 2px 20px #06c;

      }

      p{

          text-shadow:10px 10px 16px #06c;

      }

</style>

<body>

       <div></div>

       <p>这个文本有阴影效果</p>

</body>

3、背景图像

background-image  背景图像

background-size:[<length>|<percentage>|auto]{1,2}|cover|contain;    背景图像的大小（常用cover，保持图像宽高比，将图片缩放到正好完全覆盖所定义背景区域）

4、2D变形（ transform ）

（1）旋转 transform:rotate(45deg);                （2）缩放 transform:scale(2);  // 放大两倍    transform:scale(-2);  // 翻转元素并缩放    transform:scale(0.5);  // 缩小一半

（3）移动 transform:translate(40px);  // 只有一个值时表示水平偏移，如要垂直偏移，要设第一个参数为0，再加上第二个参数（正值：右移/下移；负值：左移/上移）

（4）倾斜 transform:skew(30deg);    // 只有一个值时表示相对于X轴倾斜（或者skewX(30deg)），如要相对于Y轴倾斜，要加上第二个参数（skew(30deg, 10deg)或者skewY(10deg)）

（5）变形 transform:matrix(1,0.4,0,1,0,0)   // matrix()是一个矩阵函数，有6个参数（a,b,c,d,e,f）

5、3D动画（ transition 和 animations）

transition支持从一个属性值平滑过渡到另一个属性值；animations支持通过关键帧在页面上产生更复杂的动画效果

（1）transition是一个复合属性，可同时定义transition-property（过渡属性），transition-duration（过渡时间），transition-delay（过渡延迟时间），transition-function（过渡效果）以及它们的子属性值

eg1:

<style>

        #d{width: 300px;height: 200px;background-color: sandybrown;}

        /*way1*/

        #d:hover{background-color: blueviolet;

            transition-property:background-color; /*定义过渡属性*/

            transition-duration:2s;   /*定义过渡时间*/

            transition-delay:1s;      /*定义过渡延迟时间*/

            transition-function:ease-in-out;  /*定义过渡效果*/

        }

        /*way2*/

       /* #d:hover{

            background-color: blueviolet;

            transition: background-color 2s 1s ease-in-out;

        }*/

    </style>

<div id="d"></div>

eg2:

<style type="text/css">

        .nvflim1{

            width:245px;

            height:175px;

            position:absolute;

            z-index:17;

            margin-left:480px;

            margin-top:80px;

            overflow:hidden;

            background-color:#F00;

            opacity:1;

            -webkit-transition:all 0.2s ease-in;}

        .nvflim2{

            width:245px;

            height:175px;

            position:absolute;

            z-index:17;

            margin-left:220px;

            margin-top:80px;

            overflow:hidden;

            background-color:#0f0;

            opacity:1;

            -webkit-transition:all 0.2s ease-in;}

    </style>

<div class="nvflim1" id="animation"></div>

<script type="text/javascript">

    function NvflimAnimation(){

        setTimeout(function(){

           // $("#animation").removeClass().addClass("nvflim2");

            document.getElementById("animation").removeAttribute("class");

            document.getElementById("animation").setAttribute("class","nvflim2");

        },1000)

    }

    window.addEventListener("load",NvflimAnimation,false)

</script>

（2）animations也是一个复合属性，包含：animation-name（动画名称），animation-duration（动画时间），animation-function（动画播放方式），animation-delay（动画延迟时间），animation-iteration-count（动画播放次数），animation-direction（动画播放方向）以及它们的子属性值

<style>

        .d1{

            margin: 0 auto;

            width: 400px;

            height: 300px;

            background: url("2.jpg")center no-repeat;

            transform-style:preserve-3d;

            /*way1*/

            animation-name:r1;            /*动画名*/

            animation-duration:10s;       /*动画时间*/

            animation-timing-function:linear;   /*动画播放方式*/

            animation-iteration-count:infinite;   /*动画播放次数*/    /*  infinite 无限次 */

            /*way2*/

            /*animation:r1 10s linear infinite;*/

        }

        @keyframes r1{                      /*调用动画r1*/

            0%{transform:rotatey(0deg);}        /*设置第一个关键帧是开始位置*/

            50%{transform:rotatey(180deg);}      /*设置第二个关键帧是中间位置*/

            100%{transform:rotatey(360deg);}     /*设置第三个关键帧是结束位置*/

        }

    </style>

<div class="d1"></div>

CSS3 新特性的更多相关文章

  1. 新特性AAtitti css3 新特性attilax总结titti css

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

  2. Atitti css3 新特性attilax总结

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

  3. CSS3新特性（阴影、动画、渐变、变形、伪元素等）

    CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等)   目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...

  4. 深入了解css3新特性

    深入了解css3新特性:http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/

  5. H5 和 CSS3 新特性

    博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...

  6. css3新特性总结

    一.什么是css3 css用于控制网页的样式和布局,css3是css的升级版本,受浏览器限制,跨浏览器开发有点复杂.css3完全向后兼容 二.css3新特性 1.边框 css3的边框有如下属性: (1 ...

  7. 01-移动端开发教程-CSS3新特性

    1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...

  8. css css3新特性

    css  css3新特性 一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2V ...

  9. [转]深入了解 CSS3 新特性

    简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...

  10. css3新特性学习系列 -- border

    css3新特性 border属性(border-radius.border-image.box-shadow)详解 1.border-radius  圆角 支持:IE9+ 用法: border-rad ...

随机推荐

  1. selenium 12306模拟登陆

    代码应用场景 :基于第三方打码网站模拟登陆12306 验证码识别 基于第三方平台超级鹰识别 超级鹰官网:http://www.chaojiying.com/user/ 超级鹰使用流程: 注册 登陆(用 ...

  2. oracle索引查询

    /*<br>* *查看目标表中已添加的索引 * */ --在数据库中查找表名 select * from user_tables where  table_name like 'table ...

  3. Asp.net Core 微信小程序支付

    最近要做一个微信小程序支付的功能 在网上找了一下 .net Core做微信支付的博客 和 demo 几乎没有 自己研究了好几天 参考了 很多 大牛的博客 勉强做出来了  因为参数都没有 比如 opid ...

  4. 14.SpringMVC核心技术-类型转换器

    类型转换器 在前面的程序中,表单提交的无论是 int 还是 double 类型的请求参数,用于处理该请求 的处理器方法的形参, 均可直接接收到相应类型的相应数据,而非接收到 String 再手工转换. ...

  5. python 删除特定字符所在行

    #查询文件中含有特殊字符串的行 #!/usr/bin/python # -*- coding:utf- -*- import re file1 = open('test.txt','r+') istx ...

  6. Oracle笔记（十四） 用户管理

    SQL语句分为三类:DML.DDL.DCL,之前已经讲解完了DML和DDL,现在就差DCL操作的,DCL主要表示的是数据库的控制语句,控制的就是操作权限,而在DCL之中,主要有两个语法:GRANT.R ...

  7. 面试题——常见的gc算法有哪些？

    常见的gc算法有哪些? java garbage collection是一个自动进程,用于管理程序使用的运行时内存.通过自动执行JVM,可以减轻程序中分配和释放内存资源的开销. 垃圾回收机制是由垃圾回 ...

  8. 最小m子段和（动态规划）

    问题描述: 给定n个整数组成的序列,现在要求将序列分割为m段,每段子序列中的数在原序列中连续排列.如何分割才能使这m段子序列的和的最大值达到最小? 输入格式: 第一行给出n,m,表示有n个数分成m段, ...

  9. TensorFlow中numpy与tensor数据相互转化

    numpy与tensor数据相互转化: *Numpy2Tensor 虽然TensorFlow网络在输入Numpy数据时会自动转换为Tensor来处理,但是我们自己也可以去显式的转换: data_ten ...

  10. IPV4和IPV6的划分

    IP(Internet Protocol,网络互联协议)地址就是连接互联网的主机被分配或指派的一段数字标识,是传输报文组装时最重要的组成部分,用来在互联网中数据传输时标识源和目标主机. IPv4 IP ...