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

首先，对于前端页面结构来说，总体由三个层组成：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. python实现IP地址转换为32位二进制

    python实现IP地址转换为32位二进制 #!/usr/bin/env python # -*- coding:utf-8 -*- class IpAddrConverter(object): de ...

  2. explicit和implicit

    explicit是C++中的一个关键字,只用于修饰只有一个参数的构造函数: class A{ explicit A(const T obj); }; 该关键字告诉编译器该类只能显式的转换,不能隐式(i ...

  3. Junit5常用注解

    0. IDEA中Maven项目测试类的新建方法 a. 如图在src目录下新建文件夹test b. 鼠标右键test,将该文件设置成test source c. 右键需要新建的测试类,如下图操作,选中T ...

  4. python 之禅 又名 蛇宗三字经

    打开cmd 输入python回车 import this Beautiful is better than ugly. Explicit is better than implicit. Simple ...

  5. JDK 安装部署

    环境: OS: CentOS 6.4 JDK版本: jdk-7u17-linux-x64.tar.gz 一.解压JDK程序包: # tar -xf jdk-7u17-linux-x64.tar.gz ...

  6. nginx+tomcat实现负载均衡以及双机热备

    还记得那些年吗? 还记得更新代码之后,服务器起不来被领导训斥吗?还记得更新代码,需要停机过多的时间被渠道部们埋怨吗?还记得更新代码,代码出错时自己吓个半死吗?于是我们聪明勤快的程序员,看着电影待到夜深 ...

  7. Linux磁盘及文件系统管理4

    文件系统的使用: 首先要“挂载”:mount命令和umount命令 根据文件系统之外的其它文件系统要想能够被访问,都必须通过“关联”到根文件系统上的某个目录来实现,此关联操作即为“挂载”:此目录即为“ ...

  8. C#实现10进制转2进制

    这几天在复习计算机原理,看到二进制忽然想到二进制转10进制的公式,然后转念一想10进制转二进制的公式好像没印象,那索性自己写出来. 结果学渣的我发现,并不能写出来!什么数列,对数,xx函数忘得一干二净 ...

  9. Python 读取txt文件，排序并写回文件

    # 'C:\Users\SAM\Desktop\数据竞赛\个人征信_1108\个人征信\train\bank_detail_train.txt'# 反斜杠的写法会报编码错误f=open('C:/Use ...

  10. Bootstrap-轮播图-No.3

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...