CSS3 新特性

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

首先,对于前端页面结构来说,总体由三个层组成: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>

 

posted @ 2017-02-09 17:16  名字被占用。  阅读(183)  评论(0编辑  收藏  举报