1. IT分享知识网首页
  2. 开发框架
  3. CSS

CSS3新增属性

老牧童 • • CSS • 阅读 158

CSS3新增属性圆角<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>talk</title><styl

大家好，欢迎来到IT知识分享网。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>

 

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/31289.html

赞 (0)
老牧童老牧童
0
上一篇 2023-11-02 17:15
下一篇 2023-11-07 16:15

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信