CSS3新增属性

转载

mob604756f44f2a 2021-10-20 10:33:00

圆角

<!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>

转换

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()方法，根据左(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()方法，指定对象的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>

过渡（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属性，检索或设置对象中过渡的动画类型。

− 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>