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

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

    安装shop++ 安装成功 访问 http://127.0.0.1:8080 即网站首页 访问 http://127.0.0.1:8080/admin 即网站后台

  2. 03_Hive的交互方式

    之前使用的Shell方式只是Hive交互方式中的一种,还有一种就是将Hive启动为服务运行在一个节点上,那么剩下的节点 就可以使用客户端来连接它,从而也可以使用Hive的数据分析服务 1.Hive的交 ...

  3. UCOSII 之 任务统计

    UCOSII 使用空闲任务的计数值(OSIdleCtr)来实现CPU使用率的统计,首先统计一个固定时间内的计数值保存下来为 (MAX),然后再开启一个固定的时间段,当时间到达时得到另外一个(OSIdl ...

  4. 面试题——SSM面试题

      树木丛生红火火 树木丛生红火火 微信公众号:Java全栈开发大联盟 原文地址:https://note.youdao.com/ynoteshare1/index.html?id=3f81baea7 ...

  5. 自定义控件之Canvas图形绘制基础练习-青春痘笑脸^_^

    对于自定义控件的意义不言而喻,所以对它的深入研究是很有必要的,前些年写过几篇关于UI效果的学习过程,但是中途比较懒一直就停滞了,而对于实际工作还是面试来说系统深入的了解自定义控件那是很有必要的,所以接 ...

  6. Lambda使用深入解析

    这一次继续对Lambda表达式进行深入,因为它实在太重要了,这次会涉及到java.util.function中的一些新的FunctionalInterface的使用,用它来进一步巩固对Lambda表达 ...

  7. 关于WebMvcConfigurationSupport的大坑-静态资源访问不了

    WebMvcConfigurationSupport是spring boot2.0以后用来替代WebMvcConfigurerAdapter,但是如果你直接用WebMvcConfigurationSu ...

  8. All-in-One Office，不容错过的办公插件

      WPS Office是由金山自主研发的一款办公软件套装,具备办公软件最常用的文字.表格.演示等多种功能. 这款国产办公软件不仅免费,而且具有内存小.海量模板.兼容性强.操作更加符合中国人使用习惯等 ...

  9. 04—mybatis的关联映射

    mybatis的关联映射一对一一对多多对多 一.一对一(一个人只能有一个身份证号) 1.创建表创建表tb_card CREATE TABLE `tb_card` ( `id` int(11) NOT ...

  10. 推荐几款好用的Chrome插件

    '工欲善其事,必先利其器'.优秀的开发者不仅体现在其在技术方面的精通,还体现在其对各种开发工具的充分了解与使用,这会让其开发效率事半功倍.作为一个前端开发者,平时主要是跟浏览器打交道,Chrome浏览 ...