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

首先，对于前端页面结构来说，总体由三个层组成：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之atexit模块的使用

    python atexit 模块定义了一个 register 函数,用于在 python 解释器中注册一个退出函数,这个函数在解释器正常终止时自动执行,一般用来做一些资源清理的操作. atexit 按 ...

  2. vue 项目文件流数据格式转blob图片预览展示

    为了图片安全性,有时候上传图片后后台不会直接返回图片地址,会返回文件流的数据格式,这种格式需要处理下才能展示在页面上   // 使用axios请求上传接口 axios({ method: 'get', ...

  3. 手动编译用于i.MX6系列ARM的交叉编译SDK

    前言: 在前一节中,在使用别的机器(系统:UBUNTU14.04)上编译好的交叉编译SDK,配置在我的电脑(系统:UBUNTU16.04)上,用于bazel编译Tensorflow时会报arm-pok ...

  4. Django—auth模块

    auth模块简介 auth模块是对登录认证方法的一种封装,之前我们获取用户输入的用户名及密码后需要自己从user表里查询有没有用户名和密码符合的对象, 而有了auth模块之后就可以很轻松的去验证用户的 ...

  5. Linux学习笔记（四）Linux常用命令:帮助命令

    一.帮助命令man [man] [命令] 例如: man ls man的级别 man -f [命令]  相当于  whereis [命令] 可查看该命令有几个等级,进而可以通过 man [等级数] [ ...

  6. 将服务端select设置为非阻塞，处理更多业务

    服务端代码: #include<WinSock2.h> #include<Windows.h> #include<vector> #include<stdio ...

  7. C 字符串几点

    1.字符串结尾必须为“\0” 2.多种处理函数在<string.h> 3.常用字符串处理函数: 1.strlen 求字符串长度(\0不算在内) 2.strcpy(a,b) 将b复制到a中 ...

  8. git 版本落后推送错误

     http://114.215.90.144/student_association/student.git ! [rejected]        master -> master (non- ...

  9. python+Appium自动化：toast定位

    Toast简介 Toast是一种简易的消息提示框. 当视图显示给用户,在应用程序中显示为浮动.和Dialog不一样的是,它永远不会获得焦点,无法被点击. 用户将可能是在中间键入别的东西.Toast类的 ...

  10. Mariadb多实例启动脚本

    #!/bin/bash port=3306 mysql_user="root" mysql_pwd="centos" cmd_path="/app/m ...