zoukankan      html  css  js  c++  java

  • CSS3新增属性

    圆角

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>talk</title>
<style type="text/css">
div {
    position: relative;
    width: 500px;
    height: 300px;
    border: 1px solid black;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
        -ms-border-radius: 50%;
         -o-border-radius: 50%;
            border-radius: 50%;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    line-height: 300px;
}
div:before,
div:after {
    position: absolute;
    content: "";
    display: block;
    border: 1px solid black;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
        -ms-border-radius: 50%;
         -o-border-radius: 50%;
            border-radius: 50%;
}
div:before {
    width: 50px;
    height: 50px;
    bottom: -25px;
    right: 25px;
}
div:after {
    width: 20px;
    height: 20px;
    bottom: -50px;
    right: 0;
}
</style>
</head>
<body>
<div>大家好，欢迎来到这里！</div>
</body>
</html>

    转换（Transform2D）

    CSS3的变形(Transform)属性，让元素在一个坐标系统中变形。这个属性包含一系列变形函数，可以移动、旋转和缩放元素。

    旋转rotate

    语法transform:rotate(<angle>); angle指旋转角度，正数表示顺时针旋转，负数表示逆时针旋转。

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rotate</title>
<style type="text/css">
* { margin: 0; padding: 0; list-style-type: none; }
a,
img { border: 0; }
body { font: 12px/180% Arial; }
.main { width: 1000px; margin: 50px auto; position: relative; }
.pic { width: 300px; height: 290px; border: 1px solid #ccc; background: #fff; box-shadow: 2px 2px 3px #aaa; }
.pic img { margin: 10px 0 0 8px; width: 285px; }
.pic p { text-align: center; font-size: 20px; }
.pic1 {
    -webkit-transform: rotate(7deg);
       -moz-transform: rotate(7deg);
        -ms-transform: rotate(7deg);
         -o-transform: rotate(7deg);
            transform: rotate(7deg);
}
.pic2 {
    -webkit-transform: rotate(-8deg);
       -moz-transform: rotate(-8deg);
        -ms-transform: rotate(-8deg);
         -o-transform: rotate(-8deg);
            transform: rotate(-8deg);
}
.pic3 { position: absolute; top: 40px; left: 350px; z-index: 2;
    -webkit-transform: rotate(-35deg);
       -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
         -o-transform: rotate(-35deg);
            transform: rotate(-35deg);
}
.pic4 { position: absolute; top: 360px; left: 350px; z-index: 3;
    -webkit-transform: rotate(35deg);
       -moz-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
         -o-transform: rotate(35deg);
            transform: rotate(35deg);
}
.pic5 { position: absolute; top: 150px; left: 600px; z-index: 4;
    -webkit-transform: rotate(60deg);
       -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
         -o-transform: rotate(60deg);
            transform: rotate(60deg);
}
.pic6 { position: absolute; top: 180px; left: 280px; z-index: 5;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
}
</style>
</head>
<body>
<div class="main">
    <div class="pic pic1"><img src="images/1.jpg"><p>2D转换</p></div>
    <div class="pic pic2"><img src="images/2.jpg"><p>2D转换</p></div>
    <div class="pic pic3"><img src="images/3.jpg"><p>2D转换</p></div>
    <div class="pic pic4"><img src="images/4.jpg"><p>2D转换</p></div>
    <div class="pic pic5"><img src="images/5.jpg"><p>2D转换</p></div>
    <div class="pic pic6"><img src="images/6.jpg"><p>2D转换</p></div>
</div>
</body>
</html>

    移动translate

    translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

    translateX(x)仅水平方向移动(X轴移动);

    translateY(Y)仅垂直方向移动(Y轴移动);

    translate(x, y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)。

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>translateX</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
    transform: translateX(200px);
}
</style>
</head>
<body>
<div><img src="images/sprite.jpg"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>translateY</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
    transform: translateY(200px);
}
</style>
</head>
<body>
<div><img src="images/sprite.jpg"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>translate</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
    transform: translate(200px, 100px);
}
</style>
</head>
<body>
<div><img src="images/sprite.jpg"></div>
</body>
</html>

    缩放scale

    scale()方法，指定对象的2D scale(2D缩放)。

    scaleX(x)元素仅水平方向缩放(X轴缩放);

    scaleY(y)元素仅垂直方向缩放(Y轴缩放);

    scale(x, y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)。

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scaleX</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
    transform: scaleX(.5);
}
</style>
</head>
<body>
<div><img src="images/sprite.jpg"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scaleY</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
    transform: scaleY(.5);
}
</style>
</head>
<body>
<div><img src="images/sprite.jpg"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scale</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
    transform: scale(.5, .5);
}
</style>
</head>
<body>
<div><img src="images/sprite.jpg"></div>
</body>
</html>

    扭曲skew

    skew()方法，指定对象skew transformation(斜切扭曲)。

    三种情况

    skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);

    skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形);

    skew(x, y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形)。

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>skew</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
    transform: skew(15deg, 15deg);
}
</style>
</head>
<body>
<div><img src="images/sprite.jpg"></div>
</body>
</html>

    转换（Transform 3D）

    rotateZ看上去与2D的旋转rotate(45deg)没有区别

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rotateZ</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
    transform: rotateZ(45deg);
}
</style>
</head>
<body>
<div><img src="images/sprite.jpg"></div>
</body>
</html>

    rotate3D X Y 伸缩之后旋转，不允许省略参数，0与非0，0就是不变化。

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rotate3d</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
    transform: rotate3d(1, 1, 1, 45deg);
}
</style>
</head>
<body>
<div><img src="images/sprite.jpg"></div>
</body>
</html>

    translateZ 看山去无感知，应该是你视角远近

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>translateZ</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
    transform: translateZ(200px);
}
</style>
</head>
<body>
<div><img src="images/sprite.jpg"></div>
</body>
</html>

    translate3D

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>translate3d</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
    transform: translate3d(200px, 200px, 200px);
}
</style>
</head>
<body>
<div><img src="images/sprite.jpg"></div>
</body>
</html>

    scaleZ 厚度

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scaleZ</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
    transform: scaleZ(.5);
}
</style>
</head>
<body>
<div><img src="images/sprite.jpg"></div>
</body>
</html>

    scale3D

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scale3d</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
    transform: scale3d(.5, .5, .5);
}
</style>
</head>
<body>
<div><img src="images/sprite.jpg"></div>
</body>
</html>

    坐标系统

    针对图片位置进行旋转

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>origin</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto;}
div > img {
    transform: rotate(45deg);
    transform-origin: left top;
}
</style>
</head>
<body>
<div><img src="images/sprite.jpg"></div>
</body>
</html>

    扩展属性

    transform-style属性，指定嵌套元素是怎样在三维空间中呈现。
    - transform-style: flat|preserve-3d;

    preserve-3d可以使重叠而不重叠，要给父元素配置。

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform style</title>
<style type="text/css">
body { background: #abcdef; }
div { position: relative; width: 760px; height: 760px; margin: auto;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
div > .inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateY(-45deg); background: url(images/circle_inner.png) no-repeat center center; }
div > .middle { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateX(-45deg); background: url(images/circle_middle.png) no-repeat center center; }
div > .outer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateZ(-45deg); background: url(images/circle_outer.png) no-repeat center center; }
div > .imooc { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background: url(images/imooc.png) no-repeat center center; }
</style>
</head>
<body>
<div>
    <div class="inner"></div>
    <div class="middle"></div>
    <div class="outer"></div>
    <div class="imooc"></div>
</div>
</body>
</html>

    perspective属性，指定观察者与「z=0」平面的距离，使具有三维位置变换的元素产生透视效果。
    - perspective: number|none;

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>perspective</title>
<style type="text/css">
body { background: #abcdef; }
div { position: relative; width: 760px; height: 760px; margin: auto;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
    perspective: 500px;
}
div > .inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateY(45deg); background: url(images/circle_inner.png) no-repeat center center; }
div > .middle { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateX(45deg); background: url(images/circle_middle.png) no-repeat center center; }
div > .outer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateZ(45deg); background: url(images/circle_outer.png) no-repeat center center; }
div > .imooc { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background: url(images/imooc.png) no-repeat center center; }
</style>
</head>
<body>
<div>
    <div class="inner"></div>
    <div class="middle"></div>
    <div class="outer"></div>
    <div class="imooc"></div>
</div>
</body>
</html>

    perspective-origin属性，指定透视点的位置。
    - perspective-origin: x-axis y-axis;

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>perspective-origin</title>
<style type="text/css">
body { background: #abcdef; }
div { position: relative; width: 760px; height: 760px; margin: auto;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-perspective: 500px;
       -moz-perspective: 500px;
        -ms-perspective: 500px;
         -o-perspective: 500px;
            perspective: 500px;
    -webkit-perspective-origin: bottom;
       -moz-perspective-origin: bottom;
        -ms-perspective-origin: bottom;
         -o-perspective-origin: bottom;
            perspective-origin: bottom;
}
div > .inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateY(45deg); background: url(images/circle_inner.png) no-repeat center center; }
div > .middle { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateX(45deg); background: url(images/circle_middle.png) no-repeat center center; }
div > .outer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateZ(45deg); background: url(images/circle_outer.png) no-repeat center center; }
div > .imooc { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background: url(images/imooc.png) no-repeat center center; }
</style>
</head>
<body>
<div>
    <div class="inner"></div>
    <div class="middle"></div>
    <div class="outer"></div>
    <div class="imooc"></div>
</div>
</body>
</html>

    backface-visibility属性，指定元素背面面向用户时是否可见。
    - backface-visibility: visible|hidden;

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>perspective-origin</title>
<style type="text/css">
body { background: #abcdef; }
div { position: relative; width: 760px; height: 760px; margin: auto;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-perspective: 500px;
       -moz-perspective: 500px;
        -ms-perspective: 500px;
         -o-perspective: 500px;
            perspective: 500px;
    -webkit-perspective-origin: bottom;
       -moz-perspective-origin: bottom;
        -ms-perspective-origin: bottom;
         -o-perspective-origin: bottom;
            perspective-origin: bottom;
}
div > .inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateY(45deg); background: url(images/circle_inner.png) no-repeat center center; }
div > .middle { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateX(45deg); background: url(images/circle_middle.png) no-repeat center center; }
div > .outer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; transform: rotateZ(45deg); background: url(images/circle_outer.png) no-repeat center center; }
div > .imooc { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background: url(images/imooc.png) no-repeat center center; }
</style>
</head>
<body>
<div>
    <div class="inner"></div>
    <div class="middle"></div>
    <div class="outer"></div>
    <div class="imooc"></div>
</div>
</body>
</html>

    过渡（Transition）

    − 允许css的属性值在一定的时间区间内平滑地过渡
    − 在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

    transition-property属性，检索或设置对象中的参与过渡的属性。
    − none(没有属性改变)
    − all(所有属性改变)，默认值
    − property(元素属性名)

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition-property</title>
<style type="text/css">
body { background: #abcdef; }
div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
    -webkit-transition-property: transform;
       -moz-transition-property: transform;
        -ms-transition-property: transform;
         -o-transition-property: transform;
            transition-property: transform;
}
div:hover { cursor: pointer; transform: rotate(180deg);
    -webkit-transition-property: transform;
       -moz-transition-property: transform;
        -ms-transition-property: transform;
         -o-transition-property: transform;
            transition-property: transform;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

    transition-duration属性，检索或设置对象过渡的持续时间。规定完成过渡效果需要花费的时间(以秒或毫秒计) − 默认值是0。
    − transition-duration: time;

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition-duration</title>
<style type="text/css">
body { background: #abcdef; }
div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
    -webkit-transition-property: transform;
       -moz-transition-property: transform;
        -ms-transition-property: transform;
         -o-transition-property: transform;
            transition-property: transform;
    -webkit-transition-duration: 2s;
       -moz-transition-duration: 2s;
        -ms-transition-duration: 2s;
         -o-transition-duration: 2s;
            transition-duration: 2s;
}
div:hover { cursor: pointer; transform: rotate(180deg);
    -webkit-transition-property: transform;
       -moz-transition-property: transform;
        -ms-transition-property: transform;
         -o-transition-property: transform;
            transition-property: transform;
    -webkit-transition-duration: 2s;
       -moz-transition-duration: 2s;
        -ms-transition-duration: 2s;
         -o-transition-duration: 2s;
            transition-duration: 2s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

    transition-timing-function属性，检索或设置对象中过渡的动画类型。

    transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) |cubic-bezier(<number>, <number>, <number>, <number>);

    − linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
    − ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
    − ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
    − ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
    − ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)（一般都用这个）

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition-timing-function</title>
<style type="text/css">
body { background: #abcdef; }
div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
    -webkit-transition-property: transform;
       -moz-transition-property: transform;
        -ms-transition-property: transform;
         -o-transition-property: transform;
            transition-property: transform;
    -webkit-transition-duration: 2s;
       -moz-transition-duration: 2s;
        -ms-transition-duration: 2s;
         -o-transition-duration: 2s;
            transition-duration: 2s;
    -webkit-transition-timing-function: ease-in-out;
       -moz-transition-timing-function: ease-in-out;
        -ms-transition-timing-function: ease-in-out;
         -o-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
}
div:hover { cursor: pointer; transform: rotate(180deg);
    -webkit-transition-property: transform;
       -moz-transition-property: transform;
        -ms-transition-property: transform;
         -o-transition-property: transform;
            transition-property: transform;
    -webkit-transition-duration: 2s;
       -moz-transition-duration: 2s;
        -ms-transition-duration: 2s;
         -o-transition-duration: 2s;
            transition-duration: 2s;
    -webkit-transition-timing-function: ease-in-out;
       -moz-transition-timing-function: ease-in-out;
        -ms-transition-timing-function: ease-in-out;
         -o-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

    ransition-delay属性，检索或设置对象延迟过渡的时间。指定秒或毫秒数之前要等待切换效果开始 − 默认值为0。
    − transition-delay: time;

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition-delay</title>
<style type="text/css">
body { background: #abcdef; }
div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
    -webkit-transition-property: transform;
       -moz-transition-property: transform;
        -ms-transition-property: transform;
         -o-transition-property: transform;
            transition-property: transform;
    -webkit-transition-duration: 2s;
       -moz-transition-duration: 2s;
        -ms-transition-duration: 2s;
         -o-transition-duration: 2s;
            transition-duration: 2s;
    -webkit-transition-timing-function: ease-in-out;
       -moz-transition-timing-function: ease-in-out;
        -ms-transition-timing-function: ease-in-out;
         -o-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
    -webkit-transition-delay: 1s;
       -moz-transition-delay: 1s;
        -ms-transition-delay: 1s;
         -o-transition-delay: 1s;
            transition-delay: 1s;
}
div:hover { cursor: pointer; transform: rotate(180deg);
    -webkit-transition-property: transform;
       -moz-transition-property: transform;
        -ms-transition-property: transform;
         -o-transition-property: transform;
            transition-property: transform;
    -webkit-transition-duration: 2s;
       -moz-transition-duration: 2s;
        -ms-transition-duration: 2s;
         -o-transition-duration: 2s;
            transition-duration: 2s;
    -webkit-transition-timing-function: ease-in-out;
       -moz-transition-timing-function: ease-in-out;
        -ms-transition-timing-function: ease-in-out;
         -o-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
    -webkit-transition-delay: 1s;
       -moz-transition-delay: 1s;
        -ms-transition-delay: 1s;
         -o-transition-delay: 1s;
            transition-delay: 1s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

    transition属性，复合属性，检索或设置对象变换时的过渡。

    − transition: property duration timing-function delay;

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition</title>
<style type="text/css">
body { background: #abcdef; }
div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
    -webkit-transition: transform 2s ease-in-out 1s;
       -moz-transition: transform 2s ease-in-out 1s;
        -ms-transition: transform 2s ease-in-out 1s;
         -o-transition: transform 2s ease-in-out 1s;
            transition: transform 2s ease-in-out 1s;
}
div:hover { cursor: pointer; transform: rotate(180deg);
    -webkit-transition: transform 2s ease-in-out 1s;
       -moz-transition: transform 2s ease-in-out 1s;
        -ms-transition: transform 2s ease-in-out 1s;
         -o-transition: transform 2s ease-in-out 1s;
            transition: transform 2s ease-in-out 1s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

    动画（animation）

    animation-name属性，检索或设置对象所应用的动画名称。
    - animation-name: keyframename | none;
    keyframename:指定要绑定到选择器的关键帧的名称; none:指定有没有动画(可用于覆盖从级联的动画)

    animation-duration属性，检索或设置对象动画的持续时间
    - animation-duration: time;
    time指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果

    animation-timing-function属性，检索或设置对象动画的过渡类型
    - animation-timing-function:
    ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>);

    animation-delay属性，检索或设置对象动画的延迟时间。
    - animation-delay: time;
    可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0。

    animation-iteration-count属性，检索或设置对象动画的循环次数。
    - animation-iteration-count: infinite | <number>;
    <number>为数字，其默认值为“1”;infinite为无限次数循环。

    animation-direction属性，检索或设置对象动画在循环中是否反向运动。
    - animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;
    normal:正常方向;
    reverse:反方向运行;
    alternate:动画先正常运行再反方向运行，并持续交替运行;
    alternate-reverse:动画先反运行再正方向运行，并持续交替运行。

    animation-fill-mode属性，规定当动画不播放时(当动画完成或当动画有延迟未开始播放时)，要应用到元素的样式。与循环属性冲突
    - animation-fill-mode: none | forwards | backwards | both | initial | inherit;
    none:默认值。不设置对象动画之外的状态; forwards:设置对象状态为动画结束时的状态; backwards:设置对象状态为动画开始时的状态; both:设置对象状态为动画结束或开始的状态。

    animation-play-state属性，指定动画是否正在运行或已暂停。
    - animation-play-state: paused | running;
    paused:指定暂停动画; running:默认值，指定正在运行的动画。

    animation属性
    复合属性。检索或设置对象所应用的动画特效。
    animation: name duration timing-function delay iteration-count direction fill-mode play-state;

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<style type="text/css">
body { background: #abcdef; }
div { position: relative; width: 760px; height: 760px; margin: auto;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
div > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background-repeat: no-repeat; background-position: center; }
div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation: circle_inner linear 10s infinite;
            animation: circle_inner linear 10s infinite;
}
div > .middle { background-image: url(images/circle_middle.png);
    -webkit-animation: circle_middle linear 10s infinite;
            animation: circle_middle linear 10s infinite;
}
div > .outer { background-image: url(images/circle_outer.png);
    -webkit-animation: circle_outer linear 10s infinite;
            animation: circle_outer linear 10s infinite;
}
div > .imooc { background-image: url(images/imooc.png); }
@keyframes circle_inner {
    from { transform: rotateX(0deg);   }
    to   { transform: rotateX(360deg); }
}
@keyframes circle_middle {
    from { transform: rotateY(0deg);   }
    to   { transform: rotateY(360deg); }
}
@keyframes circle_outer {
    from { transform: rotateZ(0deg);   }
    to   { transform: rotateZ(360deg); }
}
</style>
</head>
<body>
<div>
    <div class="inner"></div>
    <div class="middle"></div>
    <div class="outer"></div>
    <div class="imooc"></div>
</div>
</body>
</html>

    Keyframes关键帧，可以指定任何顺序排列来决定Animation动画变化的关键位置。

    使用@keyframes规则创建动画，通过逐步改变从一个CSS样式设定到另一个。 在动画过程中可以通过@keyframes规则多次更改CSS样式的设定

    @keyframes animationname {
    　　keyframes-selector {
    　　　　css-styles;
    　　}
    }
    animationname:必写项，定义animation的名称。
    keyframes-selector:必写项，动画持续时间的百分百分比，0-100%、from (0%)、to (100%) 。
    css-styles:必写项，一个或多个合法的CSS样式属性。

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>@KeyFrames</title>
<style type="text/css">
body { background: #abcdef; }
div { position: relative; width: 760px; height: 760px; margin: auto;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
div > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background-repeat: no-repeat; background-position: center; }
div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation: circle_inner linear 10s infinite;
            animation: circle_inner linear 10s infinite;
}
div > .middle { background-image: url(images/circle_middle.png);
    -webkit-animation: circle_middle linear 10s infinite;
            animation: circle_middle linear 10s infinite;
}
div > .outer { background-image: url(images/circle_outer.png);
    -webkit-animation: circle_outer linear 10s infinite;
            animation: circle_outer linear 10s infinite;
}
div > .imooc { background-image: url(images/imooc.png); }
@-webkit-keyframes circle_inner {
    form   { transform: rotateX(0deg);   }
    25%    { transform: rotateX(45deg);  }
    75%    { transform: rotateX(315deg); }
    to     { transform: rotateX(360deg); }
}
@keyframes circle_inner {
    form   { transform: rotateX(0deg);   }
    25%    { transform: rotateX(45deg);  }
    75%    { transform: rotateX(315deg); }
    to     { transform: rotateX(360deg); }
}
@-webkit-keyframes circle_middle {
    form   { transform: rotateY(0deg);   }
    25%    { transform: rotateY(45deg);  }
    75%    { transform: rotateY(315deg); }
    to     { transform: rotateY(360deg); }
}
@keyframes circle_middle {
    form   { transform: rotateY(0deg);   }
    25%    { transform: rotateY(45deg);  }
    75%    { transform: rotateY(315deg); }
    to     { transform: rotateY(360deg); }
}
@-webkit-keyframes circle_outer {
    form   { transform: rotateZ(0deg);   }
    25%    { transform: rotateZ(45deg);  }
    75%    { transform: rotateZ(315deg); }
    to     { transform: rotateZ(360deg); }
}
@keyframes circle_outer {
    form   { transform: rotateZ(0deg);   }
    25%    { transform: rotateZ(45deg);  }
    75%    { transform: rotateZ(315deg); }
    to     { transform: rotateZ(360deg); }
}
</style>
</head>
<body>
<div>
    <div class="inner"></div>
    <div class="middle"></div>
    <div class="outer"></div>
    <div class="imooc"></div>
</div>
</body>
</html>
  • 相关阅读:
    一步步学习SPD2010--第八章节--理解工作流（3）--使用操作和条件
    《python深度学习》笔记---9.1、深度学习知识回顾
    《python深度学习》笔记---8.5、生成式对抗网络简介
    《python深度学习》笔记---8.4、用变分自编码器生成图像
    《python深度学习》笔记---8.3、神经风格迁移
    Git 里面的 origin 到底代表啥意思?
    《python深度学习》笔记---8.2、DeepDream
    《python深度学习》笔记---8.1、使用LSTM生成文本
    《python深度学习》笔记---7.3.3、模型集成
    2021年1月份中国浏览器份额
  • 原文地址：https://www.cnblogs.com/liqianlong/p/15427839.html
Copyright © 2011-2022 走看看