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

首先，对于前端页面结构来说，总体由三个层组成：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. 11.SSH整合

    由于自己学习的版本比较落后,这里就不总结了 在我这个版本整合的过程中的几点问题: 1.在web.xml的配置过程中: <!-- 如果使用的是load获取数据,在jsp页面申请取得数据时才真正的执 ...

  2. Python 针对Excel操作

    1.python 读取Excel # -*- coding: utf-8 -*- import xlrd import os,sys reload(sys) sys.setdefaultencodin ...

  3. 01.Zabbix监控快速入门

    1.监控知识基本概述 1.为什么要使用监控 1.对系统不间断实时监控 2.实时反馈系统当前状态 3.保证服务可靠性安全性 4.保证业务持续稳定运行 2.如何进行监控,比如我们需要监控磁盘的使用率 1. ...

  4. hbase实践之rowkey设计

    rowkey设计的重要性 rowkeys是HBase表设计中唯一重要的一点. rowkey设计要求 唯一性 存储特性 按照字典顺序排序存储 查询特性 由于其存储特性导致查询特性: 查询单个记录: 查定 ...

  5. windows下常用cmd命令

    CMD命令:开始->运行->键入cmd或command(在命令行里可以看到系统版本.文件系统版本)1. appwiz.cpl:程序和功能 2. calc:启动计算器 3. certmgr. ...

  6. Bootstrap-Bootstrap官网卡片响应式布局

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

  7. Spring Boot 跨域访问

    如何在 Spring Boot 中配置跨域访问呢? Spring Boot 提供了对 CORS 的支持,您可以实现WebMvcConfigurer 接口,重写addCorsMappings 方法来添加 ...

  8. [2019牛客多校第二场][E. MAZE]

    题目链接:https://ac.nowcoder.com/acm/contest/882/E 题目大意:有一个\(n\times m\)的01矩阵,一开始可以从第一行的一个点出发,每次可以向左.向右. ...

  9. EasyLogging++学习笔记(1)—— 简要介绍

    对于有开发经验的程序员来说,记录程序执行日志是一件必不可少的事情.通过查看和分析日志信息,不仅可以有效地帮助我们调试程序,而且当程序正式发布运行之后,更是可以帮助我们快速.准确地定位问题.在现在这个开 ...

  10. C++ 头文件的理解

    变量.函数在使用前必须被声明.至于函数里干了什么,编译时不关注,链接(link)时,才会去搜寻所有编译后的文件,寻找函数具体干了什么. *.h头文件干的事情就像“复制-粘贴”,哪里引用,就把*.h内容 ...